*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		:root {
			--bg: #f8faff;
			--surface: #ffffff;
			--heading: #1e1b4b;
			--body: #334155;
			--subtle: #64748b;
			--border: rgba(100, 116, 139, .14);
			--accent: #6366f1;
			--n8n: #EA4C60;
			--google: #4285f4;
			--ag: #7c3aed;
			--openai: #10a37f;
			--neutral: #475569;
			--font: 'Inter', sans-serif;
			--heading-font: 'Outfit', sans-serif;
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			font-family: var(--font);
			background: var(--bg);
			color: var(--body);
			min-height: 100vh;
			line-height: 1.6;
			overflow-x: hidden;
		}

		/* ── HEADER ── */
		.site-header {
			background: var(--surface);
			border-bottom: 1px solid var(--border);
			padding: 0 40px;
			height: 62px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: sticky;
			top: 0;
			z-index: 100;
		}

		.site-header svg {
			height: 26px;
			flex-shrink: 0;
		}

		.header-right {
			display: flex;
			align-items: center;
			gap: 24px;
		}

		.header-nav {
			display: flex;
			gap: 6px;
		}

		.header-nav a {
			text-decoration: none;
			font-size: 13px;
			font-weight: 600;
			color: var(--subtle);
			padding: 5px 12px;
			border-radius: 8px;
			transition: all .15s;
		}

		.header-nav a:hover {
			background: rgba(99, 102, 241, .07);
			color: var(--accent);
		}

		.badge-programa {
			font-family: var(--heading-font);
			font-size: 11px;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: .14em;
			color: var(--accent);
		}

		/* ── HERO ── */
		.hero {
			background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4f46e5 100%);
			padding: 64px 40px 60px;
			color: white;
			position: relative;
			overflow: hidden;
		}

		.hero::before {
			content: '';
			position: absolute;
			inset: 0;
			background: radial-gradient(ellipse at 80% 50%, rgba(99, 102, 241, .25) 0%, transparent 60%);
		}

		.hero-inner {
			max-width: 900px;
			margin: 0 auto;
			position: relative;
		}

		.hero-kicker {
			font-family: var(--heading-font);
			font-size: 11px;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: .18em;
			color: rgba(255, 255, 255, .6);
			margin-bottom: 14px;
		}

		.hero h1 {
			font-family: var(--heading-font);
			font-size: clamp(32px, 5vw, 48px);
			font-weight: 900;
			line-height: 1.05;
			letter-spacing: -.03em;
			color: #fff;
			margin-bottom: 16px;
		}

		.hero h1 span {
			color: #a5b4fc;
		}

		.hero p {
			font-size: 17px;
			line-height: 1.6;
			color: rgba(255, 255, 255, .75);
			max-width: 640px;
			margin-bottom: 28px;
		}

		.hero-stats {
			display: flex;
			gap: 32px;
			padding-top: 24px;
			border-top: 1px solid rgba(255, 255, 255, .15);
		}

		.hero-stat {
			display: flex;
			flex-direction: column;
			gap: 3px;
		}

		.hero-stat-n {
			font-family: var(--heading-font);
			font-size: 26px;
			font-weight: 800;
			color: #fff;
			line-height: 1;
		}

		.hero-stat-l {
			font-size: 12px;
			color: rgba(255, 255, 255, .55);
		}

		/* ── LAYOUT ── */
		.main {
			max-width: 1080px;
			margin: 0 auto;
			padding: 52px 40px 80px;
		}

		@media(max-width:600px) {
			.main {
				padding: 32px 20px 60px;
			}
		}

		/* ── SECTION HEADER ── */
		.section-head {
			display: flex;
			align-items: flex-end;
			gap: 14px;
			margin-bottom: 22px;
			padding-bottom: 16px;
			border-bottom: 1px solid var(--border);
		}

		.section-icon {
			width: 38px;
			height: 38px;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			flex-shrink: 0;
		}

		.section-head h2 {
			font-family: var(--heading-font);
			font-size: 20px;
			font-weight: 800;
			color: var(--heading);
			letter-spacing: -.02em;
			line-height: 1.1;
		}

		.section-head p {
			font-size: 14px;
			color: var(--subtle);
			line-height: 1.4;
			margin-top: 2px;
		}

		.section-sep {
			height: 36px;
		}

		/* ── CARDS ── */
		.cards-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 16px;
		}
		@media (max-width: 1024px) {
			.cards-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}
		@media (max-width: 600px) {
			.cards-grid {
				grid-template-columns: 1fr;
			}
		}

		.card {
			background: var(--surface);
			border-radius: 16px;
			border: 1px solid var(--border);
			padding: 22px 22px 20px;
			text-decoration: none;
			color: inherit;
			display: flex;
			flex-direction: column;
			gap: 10px;
			transition: transform .15s, box-shadow .15s, border-color .15s;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.card::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 3px;
			background: var(--card-color, var(--accent));
			border-radius: 16px 16px 0 0;
		}

		.card:hover {
			transform: translateY(-3px);
			box-shadow: 0 12px 32px rgba(15, 23, 42, .09);
			border-color: rgba(99, 102, 241, .2);
		}

		.card-top {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 12px;
		}

		.card-num {
			width: 34px;
			height: 34px;
			border-radius: 9px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: var(--heading-font);
			font-size: 14px;
			font-weight: 800;
			flex-shrink: 0;
			background: rgba(99, 102, 241, .08);
			color: var(--card-color, var(--accent));
		}

		.card-tipo {
			font-size: 11px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: .1em;
			color: var(--card-color, var(--subtle));
			opacity: .85;
			padding: 3px 9px;
			border-radius: 999px;
			background: color-mix(in srgb, var(--card-color, var(--accent)) 10%, transparent);
		}

		.card h3 {
			font-family: var(--heading-font);
			font-size: 16px;
			font-weight: 800;
			color: var(--heading);
			letter-spacing: -.02em;
			line-height: 1.25;
		}

		.card p {
			font-size: 13.5px;
			color: var(--subtle);
			line-height: 1.5;
			flex: 1;
		}

		.card-footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 4px;
			padding-top: 12px;
			border-top: 1px solid var(--border);
		}

		.card-cta {
			font-family: var(--heading-font);
			font-size: 12px;
			font-weight: 800;
			color: var(--card-color, var(--accent));
			white-space: nowrap;
			display: flex;
			align-items: center;
			gap: 4px;
		}

		.card-cta::after {
			content: "→";
		}

		/* ── TARJETA ESPECIAL: ACCESO N8N ── */
		.access-card {
			background: linear-gradient(135deg, #1e1b4b 0%, var(--n8n) 100%);
			border-radius: 18px;
			padding: 28px 30px;
			color: white;
			display: flex;
			align-items: center;
			gap: 28px;
			margin-bottom: 36px;
			border: none;
		}

		.access-left {
			flex: 1;
		}

		.access-icon {
			font-size: 36px;
			margin-bottom: 10px;
		}

		.access-title {
			font-family: var(--heading-font);
			font-size: 20px;
			font-weight: 800;
			color: #fff;
			margin-bottom: 6px;
		}

		.access-desc {
			font-size: 14px;
			color: rgba(255, 255, 255, .75);
			line-height: 1.5;
		}

		.access-right {
			background: rgba(255, 255, 255, .12);
			border-radius: 14px;
			padding: 18px 22px;
			min-width: 260px;
			flex-shrink: 0;
		}

		.access-step {
			display: flex;
			gap: 10px;
			align-items: flex-start;
			margin-bottom: 10px;
			font-size: 13px;
			color: rgba(255, 255, 255, .88);
			line-height: 1.45;
		}

		.access-step:last-child {
			margin-bottom: 0;
		}

		.access-step-n {
			width: 22px;
			height: 22px;
			border-radius: 50%;
			background: rgba(255, 255, 255, .2);
			color: #fff;
			font-family: var(--heading-font);
			font-size: 11px;
			font-weight: 800;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			margin-top: 1px;
		}

		.access-link {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			background: rgba(255, 255, 255, .18);
			color: #fff;
			font-size: 13px;
			font-weight: 700;
			padding: 6px 14px;
			border-radius: 8px;
			text-decoration: none;
			margin-top: 8px;
			transition: background .15s;
		}

		.access-link:hover {
			background: rgba(255, 255, 255, .28);
		}

		/* ── FOOTER ── */
		.site-footer {
			border-top: 1px solid var(--border);
			padding: 28px 40px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 20px;
			background: var(--surface);
		}

		.footer-left {
			display: flex;
			align-items: center;
			gap: 14px;
		}

		.footer-logo {
			height: 20px;
			opacity: .7;
		}

		.footer-txt {
			font-size: 13px;
			color: var(--subtle);
		}

		.footer-contact {
			font-size: 13px;
			color: var(--subtle);
			display: flex;
			align-items: center;
			gap: 6px;
		}

		.footer-contact a {
			color: var(--accent);
			text-decoration: none;
			font-weight: 600;
		}

		@media(max-width:700px) {
			.access-card {
				flex-direction: column;
			}

			.access-right {
				min-width: unset;
				width: 100%;
			}

			.hero-stats {
				flex-wrap: wrap;
				gap: 18px;
			}

			.site-header {
				padding: 0 20px;
			}

			.hero {
				padding: 44px 20px;
			}

			.site-footer {
				flex-direction: column;
				text-align: center;
			}
		}

		/* ── TARJETAS DE GUÍAS DEGRADADAS ── */
		.card-gradient {
			padding: 0;
			border: 1px solid var(--border);
			background: var(--surface);
			color: var(--body);
			transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
		}

		.card-gradient::before {
			display: none;
		}

		.card-banner {
			background: var(--surface);
			height: 140px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
		}

		.card-logo {
			width: 100%;
			height: 100%;
			object-fit: contain;
			padding: 24px;
			display: block;
		}

		.card-banner::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(135deg, var(--g1), var(--g2));
			opacity: 0.15;
			pointer-events: none;
		}

		.card-gradient .card-tipo {
			position: absolute;
			top: 14px;
			left: 14px;
			background: rgba(255, 255, 255, .2) !important;
			color: white !important;
			backdrop-filter: blur(4px);
		}

		.card-gradient .card-body {
			padding: 22px;
			display: flex;
			flex-direction: column;
			flex: 1;
		}

		.card-gradient h3 {
			color: var(--heading);
			margin-bottom: 8px;
			margin-top: 0;
		}

		.card-gradient p {
			color: var(--subtle);
			margin-bottom: 16px;
			margin-top: 0;
		}

		.card-gradient .card-footer {
			margin-top: auto;
			border-top: 1px solid var(--border);
			padding-top: 14px;
			display: flex;
			justify-content: flex-end;
		}

		.card-gradient .card-cta {
			color: var(--g1) !important;
			opacity: 1;
			transition: transform 0.2s;
		}

		.card-gradient:hover .card-cta {
			transform: translateX(3px);
		}

		.card-gradient:hover {
			transform: translateY(-4px) scale(1.01);
			box-shadow: 0 16px 36px var(--g-shadow, rgba(0, 0, 0, .15));
			border-color: var(--g1);
		}

		/* ── ANIMACIONES ── */
		@keyframes heroFadeUp {
			from { opacity: 0; transform: translateY(22px); }
			to   { opacity: 1; transform: translateY(0); }
		}
		@keyframes heroPulse {
			0%, 100% { opacity: .25; transform: scale(1); }
			50%      { opacity: .4;  transform: scale(1.08); }
		}
		.hero-kicker { animation: heroFadeUp .55s ease both; }
		.hero h1     { animation: heroFadeUp .6s .1s ease both; }
		.hero p      { animation: heroFadeUp .6s .18s ease both; }
		.hero-stats  { animation: heroFadeUp .6s .28s ease both; }
		.hero::after {
			content: '';
			position: absolute;
			bottom: -60px; right: -60px;
			width: 340px; height: 340px;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(165,180,252,.18) 0%, transparent 70%);
			animation: heroPulse 5s ease-in-out infinite;
			pointer-events: none;
		}
		.reveal-on-scroll {
			opacity: 0;
			transform: translateY(20px);
			transition: opacity .5s ease, transform .5s ease;
		}
		.reveal-on-scroll.visible {
			opacity: 1;
			transform: translateY(0);
		}

		/* ── FAQ ── */
		.faq-section { margin-top: 52px; }
		.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
		.faq-item {
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: 14px;
			overflow: hidden;
		}
		.faq-q {
			width: 100%;
			background: none;
			border: none;
			text-align: left;
			padding: 18px 22px;
			font-family: var(--heading-font);
			font-size: 15px;
			font-weight: 700;
			color: var(--heading);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			transition: background .15s;
		}
		.faq-q:hover { background: rgba(99,102,241,.04); }
		.faq-q[aria-expanded="true"] { color: var(--accent); }
		.faq-icon {
			width: 22px; height: 22px; flex-shrink: 0;
			border-radius: 50%;
			background: rgba(99,102,241,.08);
			display: flex; align-items: center; justify-content: center;
			font-size: 14px; font-weight: 800; color: var(--accent);
			transition: transform .25s;
		}
		.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
		.faq-a {
			max-height: 0;
			overflow: hidden;
			transition: max-height .3s ease, padding .3s ease;
			padding: 0 22px;
			font-size: 14px;
			color: var(--body);
			line-height: 1.65;
		}
		.faq-a.open {
			max-height: 400px;
			padding: 0 22px 18px;
		}
		.faq-a a { color: var(--accent); font-weight: 600; text-decoration: none; }
		.faq-a a:hover { text-decoration: underline; }

		/* ══════════════════════════════════════════════════════════════ */
		/* ══ ANIMACIONES ESPECIALES - IA HITO 1 ══════════════════════════ */
		/* ══════════════════════════════════════════════════════════════ */

		/* ── PARTÍCULAS FLOTANTES (Hero) ── */
		.particles {
			position: absolute;
			inset: 0;
			overflow: hidden;
			pointer-events: none;
		}
		.particle {
			position: absolute;
			top: 0;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: rgba(165, 180, 252, 0.4);
			animation: floatParticle linear infinite;
			animation-fill-mode: backwards;
		}
		@keyframes floatParticle {
			0% { transform: translateY(100vh) scale(0); opacity: 0; }
			10% { opacity: 1; }
			90% { opacity: 1; }
			100% { transform: translateY(-10vh) scale(1.5); opacity: 0; }
		}

		/* ── GLOW PULSE para elementos accent ── */
		@keyframes glowPulse {
			0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.15); }
			50% { box-shadow: 0 0 40px rgba(99, 102, 241, 0.35), 0 0 80px rgba(99, 102, 241, 0.1); }
		}
		.glow-animate { animation: glowPulse 3s ease-in-out infinite; }

		/* ── GRADIENT SHIMMER para cards ── */
		@keyframes shimmer {
			0% { background-position: -200% center; }
			100% { background-position: 200% center; }
		}
		.card-shimmer::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(
				105deg,
				transparent 40%,
				rgba(255, 255, 255, 0.3) 50%,
				transparent 60%
			);
			background-size: 200% 100%;
			animation: shimmer 3s linear infinite;
			pointer-events: none;
			border-radius: inherit;
		}

		/* ── STAGGER REVEAL mejorada ── */
		@keyframes revealUp {
			from { opacity: 0; transform: translateY(40px) scale(0.96); }
			to { opacity: 1; transform: translateY(0) scale(1); }
		}
		@keyframes revealLeft {
			from { opacity: 0; transform: translateX(-40px); }
			to { opacity: 1; transform: translateX(0); }
		}
		@keyframes revealScale {
			from { opacity: 0; transform: scale(0.85); }
			to { opacity: 1; transform: scale(1); }
		}
		@keyframes revealRotate {
			from { opacity: 0; transform: rotate(-5deg) scale(0.9); }
			to { opacity: 1; transform: rotate(0) scale(1); }
		}
		@keyframes revealBounce {
			0% { opacity: 0; transform: scale(0.3); }
			50% { transform: scale(1.08); }
			70% { transform: scale(0.95); }
			100% { opacity: 1; transform: scale(1); }
		}

		.reveal-up { animation: revealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
		.reveal-left { animation: revealLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
		.reveal-scale { animation: revealScale 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
		.reveal-rotate { animation: revealRotate 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
		.reveal-bounce { animation: revealBounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both; }

		/* ── CARD HOVER ESPECTACULAR ── */
		.card-spec {
			transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			            box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			            border-color 0.3s ease;
			transform-style: preserve-3d;
			perspective: 1000px;
		}
		.card-spec:hover {
			transform: translateY(-8px) rotateX(2deg);
			box-shadow: 
				0 25px 60px rgba(15, 23, 42, 0.12),
				0 0 0 1px var(--card-color, var(--accent));
		}
		.card-spec .card-inner {
			transition: transform 0.4s ease;
		}
		.card-spec:hover .card-inner {
			transform: translateZ(20px);
		}

		/* ── NUMERIC COUNTER ANIMATION ── */
		.count-up {
			display: inline-block;
		}
		@keyframes countPop {
			0% { transform: scale(1); }
			50% { transform: scale(1.2); }
			100% { transform: scale(1); }
		}
		.count-pop { animation: countPop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

		/* ── MAGNETIC BUTTON EFFECT ── */
		.magnetic-btn {
			transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
			            box-shadow 0.3s ease;
		}
		.magnetic-btn:hover {
			transform: scale(1.05);
			box-shadow: 0 8px 30px rgba(99, 102, 241, 0.35);
		}

		/* ── TEXT GRADIENT ANIMATION ── */
		@keyframes gradientShift {
			0% { background-position: 0% 50%; }
			50% { background-position: 100% 50%; }
			100% { background-position: 0% 50%; }
		}
		.text-gradient-anim {
			background: linear-gradient(270deg, #a5b4fc, #818cf8, #c084fc, #a5b4fc);
			background-size: 300% 100%;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			animation: gradientShift 4s ease infinite;
		}

		/* ── TILT EFFECT para cards ── */
		.tilt-card {
			transition: transform 0.2s ease;
			transform-style: preserve-3d;
		}

		/* ── RIPPLE EFFECT ── */
		.ripple-container { position: relative; overflow: hidden; }
		.ripple-effect {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.3);
			transform: scale(0);
			animation: ripple 0.6s linear;
			pointer-events: none;
		}
		@keyframes ripple {
			to { transform: scale(4); opacity: 0; }
		}

		/* ── ACCESS CARD SPECIAL ANIMATION ── */
		@keyframes borderGlow {
			0%, 100% { border-color: rgba(234, 76, 96, 0.3); }
			50% { border-color: rgba(234, 76, 96, 0.7); }
		}
		.access-card-anim {
			position: relative;
			animation: borderGlow 2s ease-in-out infinite;
			border: 2px solid transparent;
			background-clip: padding-box;
		}
		.access-card-anim::before {
			content: '';
			position: absolute;
			inset: -2px;
			background: linear-gradient(135deg, #EA4C60, #1e1b4b, #EA4C60);
			border-radius: 20px;
			z-index: -1;
			animation: borderGlow 2s ease-in-out infinite;
		}

		/* ── SECTION REVEAL ── */
		.section-reveal {
			opacity: 0;
			transform: translateY(30px);
			transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		}
		.section-reveal.revealed {
			opacity: 1;
			transform: translateY(0);
		}

		/* ── FAQ ACCORDION ANIMATION ── */
		.faq-item {
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
		.faq-item:hover {
			transform: translateX(4px);
		}
		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
			            opacity 0.3s ease,
			            transform 0.3s ease;
			opacity: 0;
			transform: translateY(-10px);
		}
		.faq-answer.open {
			max-height: 500px;
			opacity: 1;
			transform: translateY(0);
		}

		/* ── FLOATING ICONS ── */
		@keyframes float {
			0%, 100% { transform: translateY(0) rotate(0deg); }
			50% { transform: translateY(-10px) rotate(3deg); }
		}
		.float-anim { animation: float 3s ease-in-out infinite; }
		.float-anim-delay { animation: float 3s ease-in-out infinite 0.5s; }
		.float-anim-delay-2 { animation: float 3s ease-in-out infinite 1s; }

		/* ── SCROLL PROGRESS BAR ── */
		.scroll-progress {
			position: fixed;
			top: 0;
			left: 0;
			height: 3px;
			background: linear-gradient(90deg, #6366f1, #a5b4fc, #6366f1);
			background-size: 200% 100%;
			z-index: 1000;
			transition: width 0.1s ease;
			animation: gradientShift 2s linear infinite;
		}

		/* ── CURSOR TRAIL EFFECT ── */
		.cursor-glow {
			position: fixed;
			width: 300px;
			height: 300px;
			border-radius: 50%;
			background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
			pointer-events: none;
			z-index: 999;
			transition: transform 0.15s ease, left 0.3s ease, top 0.3s ease;
			opacity: 0;
		}
		.cursor-glow.active { opacity: 1; }

		/* ── LOADING SKELETON ANIMATION ── */
		@keyframes skeletonPulse {
			0%, 100% { opacity: 0.4; }
			50% { opacity: 0.8; }
		}
		.skeleton {
			background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
			background-size: 200% 100%;
			animation: skeletonPulse 1.5s ease infinite;
		}

		/* ── CONFETTI BURST on load ── */
		.confetti {
			position: fixed;
			width: 10px;
			height: 10px;
			pointer-events: none;
			z-index: 9999;
			animation: confettiFall 3s ease-out forwards;
		}
		@keyframes confettiFall {
			0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
			100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
		}

		/* ── HERO ORB ANIMATIONS ── */
		.hero-orb {
			position: absolute;
			border-radius: 50%;
			filter: blur(40px);
			animation: orbFloat 8s ease-in-out infinite;
		}
		@keyframes orbFloat {
			0%, 100% { transform: translate(0, 0) scale(1); }
			25% { transform: translate(30px, -20px) scale(1.1); }
			50% { transform: translate(-20px, 20px) scale(0.9); }
			75% { transform: translate(20px, 30px) scale(1.05); }
		}
		.hero-orb-1 {
			width: 400px;
			height: 400px;
			background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
			top: -150px;
			right: -100px;
			animation-delay: 0s;
		}
		.hero-orb-2 {
			width: 300px;
			height: 300px;
			background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
			bottom: -100px;
			left: -50px;
			animation-delay: 2s;
		}
		.hero-orb-3 {
			width: 200px;
			height: 200px;
			background: radial-gradient(circle, rgba(165, 180, 252, 0.2) 0%, transparent 70%);
			top: 50%;
			left: 30%;
			animation-delay: 4s;
		}

		/* ── STAT COUNTER ANIMATION ── */
		@keyframes statCount {
			from { transform: translateY(20px); opacity: 0; }
			to { transform: translateY(0); opacity: 1; }
		}
		.stat-anim {
			animation: statCount 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
		}
		.stat-anim:nth-child(1) { animation-delay: 0.1s; }
		.stat-anim:nth-child(2) { animation-delay: 0.2s; }
		.stat-anim:nth-child(3) { animation-delay: 0.3s; }
		.stat-anim:nth-child(4) { animation-delay: 0.4s; }

		/* ── FOOTER SLIDE UP ── */
		@keyframes footerSlide {
			from { transform: translateY(100%); opacity: 0; }
			to { transform: translateY(0); opacity: 1; }
		}
		.footer-anim {
			animation: footerSlide 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
		}

		/* ══════════════════════════════════════════════════════════════ */
		/* ══ SECCIÓN ECOSISTEMAS DE IA — UNIVERSO ══════════════════════ */
		/* ══════════════════════════════════════════════════════════════ */
		.cosmos-section {
			position: relative;
			left: 50%;
			right: 50%;
			margin-left: -50vw;
			margin-right: -50vw;
			width: 100vw;
			background: linear-gradient(180deg, #050510 0%, #0a0a1a 40%, #0f0f2a 100%);
			overflow: hidden;
			padding: 80px 0 100px;
			margin-top: 52px;
		}
		.cosmos-section::before {
			content: '';
			position: absolute;
			inset: 0;
			background:
				radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99,102,241,0.12) 0%, transparent 60%),
				radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139,92,246,0.09) 0%, transparent 55%),
				radial-gradient(ellipse 50% 50% at 50% 80%, rgba(16,185,129,0.06) 0%, transparent 50%);
			pointer-events: none;
		}

		/* Estrellas */
		.stars {
			position: absolute;
			inset: 0;
			pointer-events: none;
			background-image:
				radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.7), transparent),
				radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.8), transparent),
				radial-gradient(2px 2px at 160px 20px, rgba(255,255,255,0.6), transparent),
				radial-gradient(1px 1px at 300px 30px, rgba(255,255,255,0.5), transparent),
				radial-gradient(2px 2px at 400px 50px, rgba(255,255,255,0.7), transparent),
				radial-gradient(1px 1px at 500px 20px, rgba(255,255,255,0.6), transparent),
				radial-gradient(2px 2px at 600px 90px, rgba(255,255,255,0.5), transparent),
				radial-gradient(1px 1px at 700px 80px, rgba(255,255,255,0.7), transparent),
				radial-gradient(2px 2px at 800px 70px, rgba(255,255,255,0.5), transparent),
				radial-gradient(1px 1px at 900px 100px, rgba(255,255,255,0.6), transparent),
				radial-gradient(2px 2px at 100px 150px, rgba(255,255,255,0.6), transparent),
				radial-gradient(1px 1px at 280px 140px, rgba(255,255,255,0.5), transparent),
				radial-gradient(2px 2px at 480px 160px, rgba(255,255,255,0.7), transparent),
				radial-gradient(1px 1px at 680px 170px, rgba(255,255,255,0.5), transparent),
				radial-gradient(2px 2px at 880px 150px, rgba(255,255,255,0.6), transparent),
				radial-gradient(1px 1px at 150px 220px, rgba(255,255,255,0.4), transparent),
				radial-gradient(2px 2px at 350px 260px, rgba(255,255,255,0.5), transparent),
				radial-gradient(1px 1px at 550px 240px, rgba(255,255,255,0.6), transparent),
				radial-gradient(2px 2px at 750px 280px, rgba(255,255,255,0.4), transparent),
				radial-gradient(1px 1px at 950px 250px, rgba(255,255,255,0.5), transparent);
			background-size: 1000px 350px;
			animation: starsMove 200s linear infinite;
			opacity: 0.7;
		}
		@keyframes starsMove {
			from { background-position: 0 0; }
			to { background-position: 1000px 700px; }
		}

		.cosmos-header {
			position: relative;
			text-align: center;
			margin-bottom: 60px;
			z-index: 2;
		}
		.cosmos-header h2 {
			font-family: var(--heading-font);
			font-size: clamp(32px, 5vw, 52px);
			font-weight: 900;
			color: #fff;
			letter-spacing: -0.02em;
			margin-bottom: 12px;
			background: linear-gradient(135deg, #a5b4fc 0%, #c084fc 50%, #a5b4fc 100%);
			background-size: 200% auto;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			animation: gradientShift 6s ease infinite;
		}
		.cosmos-header p {
			font-size: 17px;
			color: rgba(165, 180, 252, 0.6);
			max-width: 500px;
			margin: 0 auto;
		}

		/* Sistema solar */
		.solar-system {
			position: relative;
			z-index: 2;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			gap: 44px;
			min-height: 160px;
			padding: 0 32px;
			margin-bottom: 56px;
			flex-wrap: wrap;
		}

		/* Planetas */
		.planet-wrap {
			animation: planetFloat var(--float-duration, 5s) ease-in-out infinite;
			animation-delay: var(--float-delay, 0s);
			flex-shrink: 0;
		}
		.planet {
			position: relative;
			width: var(--planet-size, 80px);
			height: var(--planet-size, 80px);
			border-radius: 50%;
			cursor: pointer;
			transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
			background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.18) 0%, transparent 60%),
			            radial-gradient(circle at 70% 70%, var(--planet-glow, rgba(99,102,241,0.25)) 0%, transparent 50%);
			box-shadow:
				inset -4px -4px 12px rgba(0,0,0,0.3),
				0 0 25px var(--planet-glow, rgba(99,102,241,0.15)),
				0 0 50px var(--planet-glow, rgba(99,102,241,0.08));
			border: 1px solid rgba(255,255,255,0.08);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.planet::after {
			content: '';
			position: absolute;
			inset: -6px;
			border-radius: 50%;
			border: 1px solid rgba(255,255,255,0.05);
			animation: orbitRing 12s linear infinite;
		}
		.planet .planet-initial {
			font-family: var(--heading-font);
			font-size: 22px;
			font-weight: 900;
			color: rgba(255,255,255,0.9);
			pointer-events: none;
			text-shadow: 0 2px 8px rgba(0,0,0,0.4);
		}
		.planet:hover {
			transform: scale(1.12) translateY(-6px);
			box-shadow:
				inset -4px -4px 12px rgba(0,0,0,0.3),
				0 0 40px var(--planet-glow, rgba(99,102,241,0.3)),
				0 0 80px var(--planet-glow, rgba(99,102,241,0.15));
		}
		.planet.active {
			transform: scale(1.2) translateY(-10px);
			box-shadow:
				inset -4px -4px 12px rgba(0,0,0,0.3),
				0 0 50px var(--planet-glow, rgba(99,102,241,0.4)),
				0 0 100px var(--planet-glow, rgba(99,102,241,0.2)),
				0 0 150px var(--planet-glow, rgba(99,102,241,0.08));
		}
		.planet.active::before {
			content: '';
			position: absolute;
			inset: -14px;
			border-radius: 50%;
			border: 2px solid var(--planet-glow, rgba(99,102,241,0.25));
			animation: pulseRing 3s ease-in-out infinite;
		}
		.planet-name {
			position: absolute;
			bottom: -26px;
			left: 50%;
			transform: translateX(-50%);
			font-family: var(--heading-font);
			font-size: 11px;
			font-weight: 700;
			color: rgba(255,255,255,0.4);
			white-space: nowrap;
			letter-spacing: 0.06em;
			transition: all 0.3s ease;
			pointer-events: none;
		}
		.planet.active .planet-name {
			color: rgba(255,255,255,0.85);
			font-size: 12px;
			text-shadow: 0 0 12px var(--planet-glow);
		}
		.planet.dimmed {
			opacity: 0.3;
			transform: scale(0.88);
			filter: grayscale(0.7);
		}

		@keyframes planetFloat {
			0%, 100% { transform: translateY(0); }
			50% { transform: translateY(-14px); }
		}
		@keyframes orbitRing {
			from { transform: rotate(0deg); }
			to { transform: rotate(360deg); }
		}
		@keyframes pulseRing {
			0%, 100% { transform: scale(1); opacity: 0.5; }
			50% { transform: scale(1.08); opacity: 0.15; }
		}

		/* Panel de info cosmico */
		.cosmos-info-wrap {
			position: relative;
			z-index: 2;
			max-width: 860px;
			margin: 0 auto;
			padding: 0 32px;
			perspective: 1200px;
		}
		.cosmos-info {
			display: none;
			animation: cosmosInfoIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
		}
		.cosmos-info.active {
			display: block;
		}
		@keyframes cosmosInfoIn {
			from { opacity: 0; transform: translateY(20px) rotateX(5deg); }
			to { opacity: 1; transform: translateY(0) rotateX(0); }
		}
		.cosmos-glass {
			background: rgba(255, 255, 255, 0.03);
			backdrop-filter: blur(30px);
			-webkit-backdrop-filter: blur(30px);
			border-radius: 24px;
			border: 1px solid rgba(255, 255, 255, 0.08);
			padding: 32px 36px;
			box-shadow:
				0 0 0 1px rgba(255,255,255,0.04),
				0 20px 60px rgba(0,0,0,0.4),
				inset 0 1px 0 rgba(255,255,255,0.06);
			position: relative;
			overflow: hidden;
		}
		.cosmos-glass::before {
			content: '';
			position: absolute;
			top: 0; left: 0; right: 0;
			height: 1px;
			background: linear-gradient(90deg, transparent, var(--info-glow, rgba(165,180,252,0.3)), transparent);
		}
		.cosmos-glass h3 {
			font-family: var(--heading-font);
			font-size: clamp(24px, 3vw, 32px);
			font-weight: 800;
			color: #fff;
			margin-bottom: 6px;
			letter-spacing: -0.02em;
		}
		.cosmos-glass .cosmos-badge {
			display: inline-block;
			padding: 5px 14px;
			border-radius: 999px;
			font-size: 11px;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			background: rgba(255,255,255,0.05);
			color: var(--info-glow, #a5b4fc);
			border: 1px solid rgba(255,255,255,0.1);
			margin-bottom: 16px;
		}
		.cosmos-glass .cosmos-desc {
			font-size: 15px;
			line-height: 1.7;
			color: rgba(255,255,255,0.7);
			margin-bottom: 28px;
			max-width: 680px;
		}
		.cosmos-glass .cosmos-label {
			font-family: var(--heading-font);
			font-size: 10px;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: 0.14em;
			color: rgba(165,180,252,0.45);
			margin-bottom: 10px;
		}
		.cosmos-constellation {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			margin-bottom: 18px;
		}
		.cosmos-star {
			padding: 5px 10px;
			border-radius: 10px;
			background: rgba(255,255,255,0.04);
			border: 1px solid rgba(255,255,255,0.08);
			font-size: 13px;
			font-weight: 600;
			color: rgba(255,255,255,0.85);
			transition: all 0.5s ease-out;
			text-decoration: none;
			cursor: pointer;
		}
		.cosmos-star:hover {
			background: rgba(255,255,255,0.08);
			border-color: rgba(255,255,255,0.15);
			transform: translateY(-2px);
			color: #fff;
			text-decoration: none;
		}
		.cosmos-comets {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
		}
		.cosmos-comet {
			padding: 5px 10px;
			border-radius: 999px;
			background: rgba(255,255,255,0.05);
			color: var(--info-glow, #a5b4fc);
			font-size: 12px;
			font-weight: 700;
			border: 1px solid rgba(255,255,255,0.1);
			transition: all 0.5s ease-out;
			text-decoration: none;
			cursor: pointer;
		}
		.cosmos-comet:hover {
			background: rgba(255,255,255,0.1);
			box-shadow: 0 0 20px var(--info-glow, rgba(165,180,252,0.12));
			color: var(--info-glow, #a5b4fc);
			text-decoration: none;
		}

		/* Logos de apps en paneles */
		.cosmos-logos {
			display: flex;
			gap: 12px;
			margin-top: 20px;
			flex-wrap: wrap;
		}
		.cosmos-logo-item {
			width: 100px;
			height: 100px;
			border-radius: 20px;
			background: #fff;
			border: 1px solid rgba(255,255,255,0.25);
			padding: 14px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
			cursor: default;
			box-shadow: 0 4px 14px rgba(0,0,0,0.22);
		}
		.cosmos-logo-item:hover {
			transform: translateY(-4px) scale(1.08);
			box-shadow: 0 12px 32px rgba(0,0,0,0.32);
		}
		.cosmos-logo-item img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			border-radius: 4px;
		}

		/* Responsive cosmos */
		@media (max-width: 768px) {
			.cosmos-section { padding: 52px 0 68px; }
			.solar-system {
				gap: 20px;
				min-height: 130px;
				padding: 0 12px;
				margin-bottom: 48px;
			}
			.planet {
				--planet-size: 56px !important;
			}
			.planet-name {
				font-size: 9px;
				bottom: -22px;
				letter-spacing: 0.04em;
				color: rgba(255,255,255,0.6);
				display: block;
			}
			.cosmos-header { margin-bottom: 52px; }
			.cosmos-glass {
				padding: 28px 22px;
			}
			.cosmos-glass h3 { font-size: 20px; }
			/* Colapsar grids 2 columnas a 1 columna */
			.cosmos-glass > div[style] {
				grid-template-columns: 1fr !important;
			}
			.cosmos-logo-item {
				width: 56px;
				height: 56px;
				padding: 10px;
				border-radius: 12px;
			}
		}
		@media (max-width: 480px) {
			.solar-system {
				gap: 14px;
				padding: 0 8px;
			}
			.planet {
				--planet-size: 50px !important;
			}
			.planet-name {
				font-size: 9px;
				display: block;
			}
			.cosmos-info-wrap { padding: 0 16px; }
		}
</head>

<body>

	<!-- HEADER -->
	<header class="site-header">
		<a href="./index.html" style="display:flex;align-items:center;text-decoration:none;opacity:.85;transition:opacity .15s;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.85">
		<svg viewBox="0 0 330 91" xmlns="http://www.w3.org/2000/svg" style="height:26px;width:auto;">
			<rect width="91" height="91" fill="#6366f1" rx="4" />
			<path d="M36.2 34.3v-2l24.9-7.8V10.6H30v7.1h24.9v2l-24.9 7.8V39.3h31.1v-7h-24.9z" fill="#fff" />
			<path
				d="M45.6 46.2c-9.5 0-16 5.1-16 14.4 0 8.5 6.3 12.4 16 12.4v1.8l-4.8-1.3H30v7h13.6c2.4 0 3.7-1.3 3.7-3.7V60.5h-5.3v7.2c-4.2 0-6.3-2.6-6.3-6.9 0-5.1 2.9-7.6 9.8-7.6s9.8 3.2 9.8 8.6c0 4.7-1.7 7-5.4 7.7v7.1c6.8-.9 11.6-7 11.6-14.8 0-9-6.5-15.6-16-15.6z"
				fill="#fff" />
			<path d="M127.9 53h-1.6l-6.2-19.7H109V57.9h5.6V38.2h1.6l6.2 19.7H133V33.3h-5.6V53z" fill="#1e1b4b" />
			<path d="M155.2 57.9v-4.9H143.2v-5H153.4v-4.9H143.2v-4.9h11.9v-4.9h-17.5V57.9h17.5z" fill="#1e1b4b" />
			<path d="M157.6 33.3v4.9h8V57.9h5.6V38.2h8v-4.9z" fill="#1e1b4b" />
			<path
				d="M182.1 45.6c0 7.5 4 12.6 11.4 12.6 6.8 0 9.8-5 9.8-12.6h1.4l-1 3.8v8.5h5.6V47.1c0-1.9-1-3-3-3h-12.8v4.2h5.7c0 3.3-2.1 5-5.4 5-4 0-6-2.3-6-7.8s2.5-7.7 6.8-7.7c3.7 0 5.5 1.4 6.1 4.3h5.6c-.7-5.4-5.5-9.1-11.7-9.1-7.1 0-12.4 5.1-12.4 12.6z"
				fill="#6366f1" />
			<path d="M230.9 57.9v-4.9h-12v-5H229v-4.9h-10.2v-4.9h11.9v-4.9h-17.5V57.9h17.7z" fill="#6366f1" />
			<path d="M253.2 53h-1.6l-6.2-19.7H234.4V57.9h5.6V38.2h1.6l6.2 19.7H258.8V33.3h-5.6V53z" fill="#6366f1" />
			<path d="M279.3 33.3h-16.7v4.9h5.6v14.8h-5.6v4.9h16.7v-4.9h-5.6V38.2h5.6z" fill="#6366f1" />
			<path
				d="M282.4 48.7c0 6.1 3.8 9.5 11.1 9.5s11.1-3.4 11.1-9.5V33.3h-5.6v13c0 4.4-.4 7.1-5.5 7.1s-5.5-2.7-5.5-7.1v-13h-5.6v15.4z"
				fill="#6366f1" />
			<path
				d="M329.8 51.1c0-5.1-6.9-7.1-11.5-8.6-3.9-1.3-4.5-1.7-4.5-2.9 0-1.3 1.6-1.8 4.1-1.8 3 0 5.3.8 5.3 3.8h5.6c0-4.9-3.4-8.7-10.9-8.7-6.3 0-9.7 2.3-9.7 6.5 0 4.8 4.2 6.2 9.4 7.9 3.6 1.2 6.6 2 6.6 3.8 0 1.3-1.2 2.2-4.8 2.2-4.9 0-6.8-1.2-6.8-5h-5.6c0 6.2 3.3 9.8 12.2 9.8 7.6 0 10.6-2.9 10.6-7.1z"
				fill="#6366f1" />
		</svg>
		</a>
		<div class="header-right">
			<div style="position:relative;">
				<button onclick="var d=document.getElementById('globalMenu'),b=this;d.classList.toggle('open');b.classList.toggle('open');" style="background:linear-gradient(135deg,#eef2ff 0%,#e0e7ff 100%);border:none;box-shadow:0 10px 24px rgba(99,102,241,.18);font-family:'Inter',sans-serif;font-size:12px;font-weight:800;color:#4338ca;padding:8px 14px;border-radius:999px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px;">
					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
					Menú
				</button>
				<div id="globalMenu" style="position:absolute;top:110%;right:0;background:#fff;border:1px solid rgba(100,116,139,.13);border-radius:14px;box-shadow:0 20px 50px rgba(15,23,42,.12);padding:18px;width:480px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease;pointer-events:none;z-index:200;">
					<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;">
						<div>
							<h4 style="font-family:'Outfit',sans-serif;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(100,116,139,.13);">Talleres</h4>
							<a href="./presentaciones/taller_01_ia_productividad.html" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">Taller 1 - Introducción</a>
							<a href="./presentaciones/taller_02_agentes_ventas.html" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">Taller 2 - Agentes</a>
							<a href="./presentaciones/taller_03_datos_automatizacion.html" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">Taller 3 - Análisis de datos</a>
							<a href="./presentaciones/taller_04_futuro_ia.html" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">Taller 4 - Futuro</a>
						</div>
						<div>
							<h4 style="font-family:'Outfit',sans-serif;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(100,116,139,.13);">Guías</h4>
							<a href="./guias/guia_integraciones.html" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">Guía de Integraciones</a>
							<a href="./guias/guia_automatizacion_ia.html" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">Automatización con n8n</a>
							<a href="./guias/guia_gemini.html" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">Gemini en Workspace</a>
							<a href="./guias/guia_antigravity.html" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">Antigravity - Agentes</a>
						</div>
						<div>
							<h4 style="font-family:'Outfit',sans-serif;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(100,116,139,.13);">Material extra</h4>
							<a href="./presentaciones/n8n_ia_automatizacion.html" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">n8n y Automatización</a>
							<a href="./index.html" class="current" style="display:block;font-size:12px;color:#334155;text-decoration:none;padding:5px 8px;border-radius:6px;transition:all .12s;line-height:1.4;">← Portal de inicio</a>
						</div>
					</div>
				</div>
			</div>
			<div class="badge-programa">Apialan 2026</div>
		</div>
	</header>
	<script>
	document.addEventListener('click', function(e){
		var wrap = document.querySelector('#globalMenu');
		if(wrap && !wrap.parentElement.contains(e.target)){
			wrap.classList.remove('open');
			wrap.parentElement.querySelector('button').classList.remove('open');
		}
	});
	</script>
	<style>
	#globalMenu.open{opacity:1!important;visibility:visible!important;transform:translateY(0)!important;pointer-events:auto!important;}
	#globalMenu a:hover{background:rgba(79,70,229,.04);color:#6366f1!important;}
	#globalMenu a.current{font-weight:700;color:#6366f1!important;background:rgba(99,102,241,.06);} .hdr button.open{background:#6366f1!important;color:#fff!important;box-shadow:0 12px 28px rgba(99,102,241,.24)!important;}