/* CAPCA brand (Grafica CAPCA): #021623 #04345B #1C457F #EFDC2B #FFFFFF — Open Sans body, Poppins Medium titles */
		:root {
			--font-title: 'Poppins', sans-serif;
			--font-body: 'Open Sans', sans-serif;
			--bg-dark: #021623;
			--bg-elevated: #04345B;
			--surface: rgba(255,255,255,0.06);
			--surface-hover: rgba(255,255,255,0.11);
			--border: rgba(255,255,255,0.12);
			--border-strong: rgba(255,255,255,0.22);
			--accent: #1C457F;
			--accent-light: #2a5f9e;
			--accent-2: #EFDC2B;
			--accent-2-light: #f5e85c;
			--text: #ffffff;
			--text-secondary: rgba(255,255,255,0.78);
			--text-muted: rgba(255,255,255,0.52);
			/* Type scale (1.25) */
			--text-xs: 0.75rem;
			--text-sm: 0.875rem;
			--text-base: 1rem;
			--text-lg: 1.125rem;
			--text-xl: 1.25rem;
			--text-2xl: 1.5rem;
			--text-3xl: 2rem;
			--text-4xl: 2.5rem;
			--text-hero: clamp(1.75rem, 4vw, 2.25rem);
			/* Spacing scale (4px base) */
			--space-1: 0.25rem;
			--space-2: 0.5rem;
			--space-3: 0.75rem;
			--space-4: 1rem;
			--space-5: 1.25rem;
			--space-6: 1.5rem;
			--space-8: 2rem;
			--space-10: 2.5rem;
			--space-12: 3rem;
			--space-16: 4rem;
			--space-20: 5rem;
			--space-24: 6rem;
			/* Radius & shadow */
			--radius-sm: 6px;
			--radius-md: 12px;
			--radius-lg: 16px;
			--radius-xl: 20px;
			--radius-full: 9999px;
			--shadow-glow: 0 0 40px -10px rgba(28, 69, 127, 0.4);
			--shadow-card: 0 24px 48px -12px rgba(0, 0, 0, 0.4);
			/* Header strip: logo, menu, and fixed “Ingresar” share this vertical rhythm */
			--nav-bar-height: 3.75rem;
		}
		* { box-sizing: border-box; margin: 0; padding: 0; }
		html { scroll-behavior: smooth; }
		body {
			font-family: var(--font-body);
			font-weight: 400;
			background: var(--bg-dark);
			color: var(--text);
			font-size: var(--text-base);
			line-height: 1.6;
			letter-spacing: 0.01em;
			overflow-x: hidden;
		}

		/* Titles: Poppins Medium (500). All other copy: Open Sans Regular (400). */
		h2, h3,
		.sec-label,
		.tagline,
		.intro-slogan,
		.contact-modal-panel h2,
		.glass-card h3 {
			font-family: var(--font-title);
			font-weight: 500;
		}

		/* Animated SVG background layer — no scroll parallax, stays fixed */
		.bg-svg-wrap {
			position: fixed;
			inset: 0;
			z-index: 0;
			pointer-events: none;
			overflow: hidden;
		}
		.bg-svg-wrap svg {
			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		.bg-svg-wrap .bg-scroll-group {
			transform: none;
		}
		/* Blobs removed per request */
		.bg-blob { display: none; }
		/* Grid overlay animation */
		.bg-grid line {
			stroke-dasharray: 2 8;
			animation: gridDash 20s linear infinite;
		}
		@keyframes gridDash {
			to { stroke-dashoffset: -40; }
		}
		#main-wrap { position: relative; z-index: 2; }

		/* Fixed map layer: above bg-svg-wrap so map is visible; cropped by 2nd slide on scroll */
		#intro-fixed-bg {
			position: fixed;
			inset: 0;
			z-index: 1;
			overflow: hidden;
			pointer-events: none;
			transition: opacity 0.35s ease, visibility 0.35s ease;
			background-color: #021623;
		}
		/* bg1.png on its own layer so horizontal flip doesn’t mirror the map */
		#intro-fixed-bg::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 0;
			background-color: #021623;
			background-image: url(../bg1.png);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			transform: scaleX(-1);
			pointer-events: none;
		}
		body.past-intro #intro-fixed-bg {
			opacity: 0;
			visibility: hidden;
		}
		#intro-fixed-bg img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: right center;
			filter: invert(1);
			z-index: 1;
		}
		#intro-fixed-bg::after {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 2;
			background: linear-gradient(180deg, rgba(0,0,0,0.17) 0%, rgba(3,3,8,0.21) 40%, rgba(6,6,18,0.24) 70%, rgba(8,8,26,0.27) 100%);
			pointer-events: none;
		}
		/* Hero section: transparent so fixed map shows through */
		.sec-intro {
			position: relative;
			min-height: 100vh;
			opacity: 1;
			transform: none;
			background: transparent;
		}
		.sec-intro .reveal-item {
			opacity: 1;
			transform: none;
		}
		.sec-intro .hero-bg {
			display: none;
		}
		.sec-intro .intro-dots-wrap {
			position: absolute;
			inset: 0;
			z-index: 0;
			pointer-events: none;
		}
		.sec-intro .intro-dots-wrap canvas {
			display: block;
			width: 100%;
			height: 100%;
		}
		.sec-intro .sec-inner {
			position: relative;
			z-index: 1;
			/* Default intro copy = Open Sans Regular (.sec p has higher specificity than .sub alone) */
			font-family: var(--font-body);
			font-weight: 400;
		}
		/* Kill .sec p default margin-bottom in intro; spacing from .intro-slogan / .tagline / .sub */
		.sec-intro .sec-inner > p {
			margin-bottom: 0;
		}
		/* Hero lines are <p>: must beat .sec p (0,1,1) — use two classes + element (0,2,1) */
		.sec-intro .sec-inner > p.intro-slogan,
		.sec-intro .sec-inner > p.tagline {
			font-family: var(--font-title);
			font-weight: 500;
		}
		.sec-intro .sec-inner > p.sub {
			font-family: var(--font-body);
			font-weight: 400;
			font-style: normal;
		}
		/* Logo + slogan as one column, minimal gap (slogan directly under mark) */
		.intro-brand {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0;
			margin-bottom: 0;
		}
		/* Hero dots removed: intro uses Santiago map only */
		.hero-bg .hero-dots { display: none !important; }

		/* Problema: static brand wash + Nova-style Three.js particles in .problema-nova-wrap */
		.sec-problema {
			position: relative;
			overflow: hidden;
			background: linear-gradient(195deg, #032036 0%, #000000 100%);
		}
		/* Fade particles out under the headline so copy stays readable */
		.sec-problema .problema-nova-wrap {
			position: absolute;
			inset: 0;
			/* Keep the same slanted wash visible under transparent WebGL */
			background: linear-gradient(195deg, #032036 0%, #000000 100%);
			-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 22%, rgba(0, 0, 0, 0.85) 40%, #000 58%);
			mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 22%, rgba(0, 0, 0, 0.85) 40%, #000 58%);
			z-index: 0;
			pointer-events: none;
			overflow: hidden;
		}
		.sec-problema .sec-inner { position: relative; z-index: 1; }
		.sec-problema .problema-text-panel {
			background: rgba(0, 0, 0, 0.3);
			border: 2px solid rgba(255, 255, 255, 0.1);
			padding: var(--space-6) var(--space-8);
			box-sizing: border-box;
		}

		/* Tres pilares (#solucion): light gradient + three-center ring canvas (#solucion-arcs, not #modelo) */
		#solucion {
			position: relative;
			overflow: hidden;
			background: linear-gradient(165deg, #ffffff 0%, #f4f6f8 45%, #eef2f6 100%);
		}
		#solucion .solucion-bg-wrap {
			position: absolute;
			inset: 0;
			z-index: 0;
			pointer-events: none;
		}
		#solucion .solucion-bg-wrap canvas {
			display: block;
			width: 100%;
			height: 100%;
		}
		#solucion .sec-inner { position: relative; z-index: 1; }

		/* Tres productos: bg2 image base + mouse-reactive overlay */
		.sec-productos {
			position: relative;
			overflow: hidden;
			background-color: #021623;
			background-image: url(../bg2.png);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			animation: productosGradient 8s ease infinite;
		}
		.sec-productos::before {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background: radial-gradient(
				circle at var(--productos-mx, 50%) var(--productos-my, 50%),
				rgba(24, 164, 160, 0.24) 0%,
				rgba(11, 106, 174, 0.22) 22%,
				rgba(28, 69, 127, 0.18) 44%,
				rgba(4, 52, 91, 0.1) 62%,
				rgba(2, 22, 35, 0.03) 76%,
				rgba(0, 0, 0, 0) 90%
			);
		}
		.sec-productos .sec-inner { position: relative; z-index: 1; }
		@keyframes productosGradient {
			0% { background-position: 0% 50%; }
			50% { background-position: 100% 50%; }
			100% { background-position: 0% 50%; }
		}

		@keyframes secGradient {
			0% { background-position: 0% 50%; }
			50% { background-position: 100% 50%; }
			100% { background-position: 0% 50%; }
		}
		@keyframes secMorph {
			0% { border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
			100% { border-radius: 60% 40% 40% 60% / 30% 70% 30% 70%; }
		}
		@keyframes secSpin {
			to { transform: rotate(1turn); }
		}

		/* Section reveal animation */
		.sec {
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: var(--space-24) var(--space-8) var(--space-16);
			opacity: 0;
			transform: translateY(32px);
			transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
		}
		.sec.is-visible {
			opacity: 1;
			transform: translateY(0);
		}
		.sec .reveal-item {
			opacity: 0;
			transform: translateY(24px);
			transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
		}
		.sec.is-visible .reveal-item { opacity: 1; transform: translateY(0); }
		.sec.is-visible .reveal-item:nth-child(1) { transition-delay: 0.05s; }
		.sec.is-visible .reveal-item:nth-child(2) { transition-delay: 0.12s; }
		.sec.is-visible .reveal-item:nth-child(3) { transition-delay: 0.19s; }
		.sec.is-visible .reveal-item:nth-child(4) { transition-delay: 0.26s; }
		.sec.is-visible .reveal-item:nth-child(5) { transition-delay: 0.33s; }
		.sec.is-visible .reveal-item:nth-child(6) { transition-delay: 0.4s; }
		.sec.is-visible .reveal-item:nth-child(7) { transition-delay: 0.47s; }
		.sec.is-visible .reveal-item:nth-child(8) { transition-delay: 0.54s; }
		.sec.is-visible .reveal-item:nth-child(9) { transition-delay: 0.61s; }

		/* Solución: shell visible immediately so light BG isn’t hidden behind .sec { opacity: 0 } */
		#solucion.sec {
			opacity: 1;
			transform: translateY(0);
			transition: none;
		}

		.nav-bar {
			position: fixed;
			top: 0; left: 0; right: 0;
			z-index: 100;
			display: grid;
			grid-template-columns: minmax(6.5rem, 1fr) auto minmax(6.5rem, 1fr);
			align-items: center;
			column-gap: var(--space-4);
			min-height: var(--nav-bar-height);
			padding: 0 var(--space-8);
			box-sizing: border-box;
			background: #021523;
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(16px);
			border-bottom: 1px solid var(--border);
			transform: translateY(-100%);
			transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
		}
		.nav-bar.is-visible { transform: translateY(0); }
		.nav-bar .nav-brand {
			justify-self: start;
			display: flex;
			align-items: center;
			line-height: 0;
		}
		.nav-bar .logo-mini {
			display: block;
			height: 28px;
			width: auto;
			transition: transform 0.3s ease;
		}
		.nav-bar .logo-mini:hover { transform: scale(1.04); }
		.nav-links {
			grid-column: 2;
			justify-self: center;
			display: flex;
			align-items: center;
			gap: var(--space-8);
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.nav-links a {
			font-family: var(--font-body);
			color: var(--text-secondary);
			text-decoration: none;
			font-size: var(--text-sm);
			font-weight: 400;
			letter-spacing: 0.02em;
			position: relative;
			transition: color 0.2s ease;
		}
		.nav-links a::after {
			content: '';
			position: absolute;
			left: 0; bottom: -var(--space-1);
			width: 0;
			height: 2px;
			background: var(--accent-2);
			transition: width 0.3s ease;
		}
		.nav-links a:hover { color: var(--text); }
		.nav-links a:hover::after { width: 100%; }
		.nav-cta {
			font-family: var(--font-body);
			display: inline-block;
			padding: var(--space-2) var(--space-5);
			background: linear-gradient(135deg, var(--accent), var(--accent-light));
			color: #fff;
			text-decoration: none;
			font-weight: 400;
			font-size: var(--text-sm);
			border-radius: var(--radius-full);
			transition: transform 0.25s ease, box-shadow 0.25s ease;
		}
		.nav-cta:hover {
			transform: translateY(-2px);
			box-shadow: var(--shadow-glow);
		}

		.nav-login {
			font-family: var(--font-body);
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			padding: 0;
			color: var(--text-secondary);
			text-decoration: none;
			font-weight: 400;
			font-size: var(--text-sm);
			border-radius: 0;
			border: none;
			background: transparent;
			transition: color 0.2s ease, text-decoration-color 0.2s ease;
		}
		.nav-login:hover {
			color: var(--text);
			text-decoration: underline;
			text-decoration-color: rgba(255, 255, 255, 0.75);
			text-underline-offset: 4px;
		}

		/* Keep "Ingresar" visible even before the sliding nav bar appears; same vertical band as .nav-bar */
		.top-login-link {
			position: fixed;
			top: 0;
			right: var(--space-8);
			z-index: 120;
			height: var(--nav-bar-height);
			font-family: var(--font-body);
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			color: var(--text-secondary);
			text-decoration: none;
			font-weight: 400;
			font-size: var(--text-sm);
			border-radius: 0;
			border: none;
			background: transparent;
			transition: color 0.2s ease, text-decoration-color 0.2s ease;
		}
		.top-login-link:hover {
			color: var(--text);
			text-decoration: underline;
			text-decoration-color: rgba(255, 255, 255, 0.75);
			text-underline-offset: 4px;
		}

		.top-login-link.is-hidden {
			opacity: 0;
			pointer-events: none;
		}

		.sec-inner { max-width: 56rem; width: 100%; margin: 0 auto; text-align: center; }
		.sec-label {
			display: block;
			font-size: var(--text-xs);
			font-weight: 500;
			letter-spacing: 0.12em;
			text-transform: uppercase;
			color: var(--accent-2);
			margin-bottom: var(--space-2);
		}
		.sec-intro .logo-hero {
			display: block;
			height: 6.5rem;
			width: auto;
			margin: 0 auto 2em;
			animation: logoPulse 4s ease-in-out infinite;
		}
		@keyframes logoPulse {
			0%, 100% { opacity: 1; transform: scale(1); }
			50% { opacity: 0.94; transform: scale(1.02); }
		}
		.sec-intro .intro-slogan {
			font-size: 1.25rem;
			letter-spacing: 0.12em;
			text-transform: lowercase;
			color: #EFDC2B;
			/* Negative top: logo SVG has foot padding; +5px shifts line down vs previous */
			margin: calc(-0.5rem + 5px) auto var(--space-10);
			line-height: 1.2;
		}
		.sec-intro .tagline {
			font-size: var(--text-hero);
			line-height: 1.2;
			letter-spacing: -0.02em;
			color: var(--text);
			margin-bottom: var(--space-3);
			max-width: 28ch;
			margin-left: auto;
			margin-right: auto;
		}
		.sec-intro .sub {
			font-family: var(--font-body);
			font-weight: 400;
			font-style: normal;
			font-synthesis: none;
			font-size: 1.6875rem;
			color: var(--text-secondary);
			max-width: 42ch;
			margin: 0 auto var(--space-8);
			line-height: 1.65;
		}
		.btn {
			display: inline-block;
			padding: var(--space-3) var(--space-6);
			background: linear-gradient(135deg, var(--accent), var(--accent-light));
			color: #fff;
			text-decoration: none;
			font-weight: 400;
			font-size: var(--text-sm);
			border: none;
			border-radius: var(--radius-full);
			cursor: pointer;
			font-family: var(--font-body);
			letter-spacing: 0.02em;
			transition: transform 0.25s ease, box-shadow 0.25s ease;
		}
		.btn:hover {
			transform: translateY(-2px);
			box-shadow: var(--shadow-glow);
		}
		.btn-ghost {
			background: var(--surface);
			color: var(--text);
			border: 1px solid var(--border-strong);
		}
		.btn-ghost:hover {
			background: var(--surface-hover);
			border-color: rgba(28, 69, 127, 0.5);
			box-shadow: 0 4px 24px rgba(28, 69, 127, 0.18);
		}
		.btns { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
		.sec h2 {
			font-family: var(--font-title);
			font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
			font-weight: 500;
			line-height: 1.2;
			letter-spacing: -0.02em;
			margin-bottom: var(--space-4);
			color: var(--text);
		}
		.sec p {
			font-family: var(--font-body);
			font-weight: 400;
			font-size: 1.5rem;
			color: var(--text-secondary);
			margin-bottom: var(--space-6);
			line-height: 1.7;
		}
		.sec-problema .sec-inner { text-align: left; }
		#problema .sec-label {
			font-size: 1.5rem;
			color: #EFDC2B;
		}
		#problema h2 { font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl)); margin-bottom: var(--space-5); }
		#problema p {
			font-family: var(--font-body);
			font-weight: 400;
			font-style: normal;
			font-synthesis: none;
			font-size: 1.6875rem;
			line-height: 1.75;
		}
		#solucion .sec-label {
			font-size: 1.5rem;
			color: #1C457F;
		}
		#solucion h2 {
			font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
			margin-bottom: var(--space-6);
			color: #021623;
		}
		/* Ghost CTA readable on light #solucion background */
		#solucion .btn-ghost {
			color: #021623;
			border-color: rgba(2, 22, 35, 0.2);
			background: rgba(255, 255, 255, 0.65);
		}
		#solucion .btn-ghost:hover {
			color: #021623;
			background: #fff;
			border-color: rgba(28, 69, 127, 0.45);
		}
		/* Brand panel blue #04345B — cards + card-body area (single panel per .glass-card) */
		#solucion .glass-card {
			background: #04345B;
			border-color: rgba(255, 255, 255, 0.18);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
		}
		/* Card titles: brand yellow #EFDC2B — scope to .card-body > h3 so color wins over generic .glass-card h3 */
		#solucion .glass-card .card-body > h3 {
			font-weight: 500;
			font-size: var(--text-xl);
			margin-bottom: var(--space-3);
			color: #EFDC2B;
		}
		#solucion .glass-card:hover .card-body > h3 {
			color: #f5e85c;
		}
		/* Open Sans Regular — beats .sec p (same specificity, order) + keeps body copy off Poppins */
		#solucion .glass-card .card-body > p {
			font-family: var(--font-body);
			font-weight: 400;
			font-style: normal;
			font-synthesis: none;
			font-size: 0.984375rem;
			line-height: 1.65;
			color: rgba(255, 255, 255, 0.82);
			margin-bottom: 0;
		}

		.solucion-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: var(--space-6);
			margin: var(--space-8) 0;
		}
		.solucion-grid .glass-card:nth-child(3) {
			grid-column: 1 / -1;
			justify-self: center;
			max-width: calc(50% - var(--space-6) / 2);
		}
		@media (max-width: 640px) {
			.solucion-grid { grid-template-columns: 1fr; }
			.solucion-grid .glass-card:nth-child(3) { max-width: none; }
		}
		.glass-card {
			background: var(--surface);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
			padding: 0;
			text-align: left;
			overflow: hidden;
			transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.35s ease;
		}
		.glass-card:hover {
			transform: translateY(-6px);
			border-color: rgba(239, 220, 43, 0.35);
			box-shadow: var(--shadow-card);
		}
		.glass-card h3 {
			font-size: var(--text-lg);
			margin-bottom: var(--space-2);
			color: var(--accent-2);
			transition: color 0.25s ease;
		}
		.glass-card:hover h3 { color: var(--accent-2-light); }
		.glass-card .card-body { padding: var(--space-5); }
		.glass-card p { font-family: var(--font-body); font-weight: 400; font-size: 1.3125rem; margin-bottom: 0; color: var(--text-secondary); line-height: 1.6; }
		.glass-card .card-img {
			height: 160px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
		.sec-productos .sec-inner { text-align: left; }
		/* Product column: brand yellow */
		#productos .tbl tbody td:first-child {
			color: #EFDC2B;
		}
		.table-wrap {
			background: var(--surface);
			backdrop-filter: blur(12px);
			border: 1px solid var(--border);
			border-radius: var(--radius-lg);
			overflow: hidden;
			margin-bottom: var(--space-8);
		}
		@media (max-width: 768px) {
			.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
			.tbl { min-width: 480px; }
		}
		.tbl { font-family: var(--font-body); width: 100%; border-collapse: collapse; font-size: calc(var(--text-sm) * 1.5); }
		.tbl th, .tbl td {
			padding: var(--space-4) var(--space-5);
			text-align: left;
			border-bottom: 1px solid var(--border);
			transition: background 0.2s ease;
		}
		.tbl tbody tr { opacity: 0; transform: translateX(-12px); transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease; }
		.sec.is-visible .tbl tbody tr { opacity: 1; transform: translateX(0); }
		.sec.is-visible .tbl tbody tr:nth-child(1) { transition-delay: 0.1s; }
		.sec.is-visible .tbl tbody tr:nth-child(2) { transition-delay: 0.2s; }
		.sec.is-visible .tbl tbody tr:nth-child(3) { transition-delay: 0.3s; }
		.tbl tbody tr:hover td { background: var(--surface-hover); }
		.tbl th {
			font-family: var(--font-body);
			background: var(--bg-elevated);
			color: var(--text-muted);
			font-weight: 400;
			font-size: calc(var(--text-xs) * 1.5);
			text-transform: uppercase;
			letter-spacing: 0.08em;
		}
		.tbl tr:last-child td { border-bottom: none; }
		.tbl td:first-child { color: var(--accent-2); font-weight: 400; }

		.footer {
			padding: var(--space-8) var(--space-8);
			border-top: 1px solid var(--border);
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: var(--space-4);
			max-width: 56rem;
			margin: 0 auto;
		}
		.footer .footer-right { display: flex; align-items: center; gap: var(--space-6); }
		.footer .footer-logo { height: 42px; display: inline-block; opacity: 0.85; transition: opacity 0.25s ease; }
		.footer .footer-logo img { height: 100%; width: auto; display: block; filter: brightness(0) invert(1); }
		.footer .footer-logo:hover { opacity: 1; }
		.footer .footer-partner-logo {
			height: 42px;
			width: auto;
			max-width: 140px;
			display: block;
			object-fit: contain;
			opacity: 0.9;
		}
		.footer .copy { font-family: var(--font-body); font-weight: 400; color: var(--text-muted); font-size: var(--text-sm); }

		/* Mobile: logo fit + smaller text throughout */
		@media (max-width: 768px) {
			.sec-intro .intro-dots-wrap { opacity: 0.25; }
			.sec-intro .logo-hero { height: 3.25rem; margin: 0 auto 2em; }
			.sec-intro .intro-slogan { font-size: 0.9375rem; letter-spacing: 0.08em; margin: calc(-0.35rem + 5px) auto var(--space-8); }
			.sec-intro .tagline { font-family: var(--font-title); font-weight: 500; font-size: 1.25rem; }
			.sec-intro .sec-inner > p.sub,
			.sec-intro .sub { font-family: var(--font-body); font-weight: 400; font-size: 1.125rem; }
			.sec-label { font-size: 0.65rem; }
			.sec h2 { font-weight: 500; font-size: 1.35rem; }
			#problema .sec-label {
				font-size: 0.75rem;
				color: #EFDC2B !important;
			}
			#solucion .sec-label { font-size: 0.75rem; }
			#problema h2, #solucion h2 { font-size: 1.5rem; }
			.sec p { font-size: 1.125rem; }
			#problema p { font-size: 1.25rem; }
			#solucion .glass-card .card-body > h3 { font-weight: 500; font-size: 1rem; }
			#solucion .glass-card .card-body > p { font-size: 0.875rem; }
			.glass-card p { font-size: 1rem; }
			#productos h2, #modelo h2 { font-size: 1.35rem; }
			#modelo .sec-inner p { font-size: 1.125rem; }
			.btn { font-size: 0.8125rem; padding: var(--space-2) var(--space-4); }
			.nav-cta { font-size: 0.8125rem; }
			.tbl { font-size: 0.75rem; }
			.tbl th, .tbl td { padding: var(--space-2) var(--space-3); }
			.footer .copy { font-size: var(--text-xs); }
		}

		/* Last section (#modelo): concentric arcs BG from CodePen EagrdK, 15% opacity, scroll-driven */
		#modelo {
			position: relative;
			overflow: hidden;
			background-color: #021623;
			background-image: url(../bg3.svg);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
		#modelo .modelo-bg-wrap {
			position: absolute;
			inset: 0;
			z-index: 0;
			pointer-events: none;
		}
		#modelo .modelo-bg-wrap canvas {
			display: block;
			width: 100%;
			height: 100%;
		}
		#modelo .sec-inner { position: relative; z-index: 1; }
		#modelo p {
			font-family: var(--font-body);
			font-weight: 400;
			font-style: normal;
			font-synthesis: none;
		}
		/* Closing line: same emphasis as headings (white vs body secondary) */
		#modelo .sec-inner > p:nth-of-type(5) {
			color: #fff;
		}

		/* Primary CTA: brand yellow on dark section */
		#modelo .btns .btn {
			background: #EFDC2B;
			color: #021623;
			box-shadow: none;
		}
		#modelo .btns .btn:hover {
			background: #f5e85c;
			color: #021623;
			box-shadow: 0 8px 28px rgba(239, 220, 43, 0.35);
		}

		.contact-modal {
			position: fixed;
			inset: 0;
			z-index: 200;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding: var(--space-4);
			overflow-y: auto;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease, visibility 0.3s ease;
		}
		.contact-modal.is-open { opacity: 1; visibility: visible; }
		.contact-modal-overlay {
			position: absolute;
			inset: 0;
			background: rgba(0,0,0,0.6);
			backdrop-filter: blur(4px);
			cursor: pointer;
			touch-action: manipulation;
		}
		.contact-modal-panel {
			position: relative;
			box-sizing: border-box;
			background: linear-gradient(145deg, rgba(2, 22, 35, 0.96) 0%, rgba(4, 52, 91, 0.94) 40%, rgba(28, 69, 127, 0.92) 100%);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
			border: 1px solid rgba(239, 220, 43, 0.22);
			border-radius: var(--radius-xl);
			width: 100%;
			max-width: min(66rem, calc(100vw - 2 * var(--space-4)));
			padding: var(--space-5);
			overflow: visible;
			transform: scale(0.96);
			transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
			box-shadow: 0 0 100px 36px rgba(28, 69, 127, 0.2), 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(239, 220, 43, 0.08) inset;
		}
		.contact-modal.is-open .contact-modal-panel { transform: scale(1); }
		.contact-modal-close {
			position: absolute;
			top: var(--space-2);
			right: var(--space-2);
			background: none;
			border: none;
			color: var(--text-secondary);
			font-size: 2.25rem;
			cursor: pointer;
			line-height: 1;
			padding: var(--space-3);
			margin: calc(-1 * var(--space-3));
			transition: color 0.2s ease;
			z-index: 10;
			touch-action: manipulation;
		}
		.contact-modal-close::before {
			content: '';
			position: absolute;
			inset: -8px;
		}
		.contact-modal-close:hover { color: var(--accent-2); }
		.contact-modal-logo {
			display: block;
			width: 7.5rem;
			height: auto;
			/* Compensate internal SVG whitespace so visible logo aligns with text block */
			margin: 0 0 var(--space-3) -0.6rem;
		}
		.contact-modal-panel h2 {
			font-size: 1.6875rem;
			font-weight: 500;
			margin-bottom: var(--space-2);
		}
		.contact-modal-intro {
			font-family: var(--font-body);
			font-weight: 400;
			color: var(--text-secondary);
			margin-bottom: var(--space-3);
			font-size: 1.125rem;
			line-height: 1.45;
		}
		.contact-modal-body {
			display: block;
		}
		.contact-modal-body > form { min-width: 0; }
		.contact-modal-body .contact-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: var(--space-3) var(--space-4);
		}
		.contact-modal-body .contact-field { min-width: 0; }
		.contact-modal-body .col-12 { grid-column: 1 / -1; }
		@media (min-width: 768px) {
			.contact-modal-body .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
			.contact-modal-body .col-md-6.col-12 { grid-column: span 1; }
			.contact-modal-body .contact-field-message.col-12 { grid-column: 1 / -1; }
		}
		.contact-modal-body .floating-field {
			position: relative;
		}
		.contact-modal-body .floating-field label {
			position: absolute;
			left: 0;
			top: 1.65rem;
			transform: none;
			font-family: var(--font-body);
			font-size: 1.05rem;
			font-weight: 400;
			color: var(--text-secondary);
			opacity: 0.8;
			pointer-events: none;
			transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease, opacity 0.18s ease;
			background: transparent;
		}
		.contact-modal-body .floating-field-textarea label {
			top: 1.95rem;
		}
		.contact-modal-body input,
		.contact-modal-body textarea {
			width: 100%;
			padding: 1.65rem 0 0.75rem;
			background: transparent;
			border: none;
			background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1));
			background-repeat: no-repeat;
			background-size: 100% 1px;
			background-position: left bottom;
			border-radius: 0;
			color: var(--text);
			font-family: var(--font-body);
			font-weight: 400;
			font-size: 1.3125rem;
			margin-bottom: 0;
			transition: border-color 0.2s ease;
		}
		.contact-modal-body input { min-height: 4.1rem; }
		.contact-modal-body textarea {
			padding-top: 1.95rem;
		}
		.contact-modal-body .floating-field input:focus + label,
		.contact-modal-body .floating-field input:not(:placeholder-shown) + label,
		.contact-modal-body .floating-field textarea:focus + label,
		.contact-modal-body .floating-field textarea:not(:placeholder-shown) + label {
			top: 0.3rem;
			font-size: 0.8rem;
			color: #cbd7ea;
			opacity: 0.8;
		}
		.contact-modal-body input:focus,
		.contact-modal-body textarea:focus {
			outline: none;
			background-image: linear-gradient(to right, rgba(239, 220, 43, 1), rgba(239, 220, 43, 0.1));
		}
		.contact-modal-body textarea { min-height: 6.5rem; resize: vertical; }
		.contact-submit-btn {
			display: block;
			margin: var(--space-4) 0 var(--space-2) auto;
			padding-top: var(--space-3);
			padding-bottom: var(--space-3);
			background: #EFDC2B;
			color: #021623;
			box-shadow: none;
		}
		.contact-submit-btn:hover {
			background: #f5e85c;
			color: #021623;
		}
		.contact-modal-note {
			font-family: var(--font-body);
			font-weight: 400;
			margin-top: var(--space-2);
			font-size: 1.125rem;
			color: var(--text-muted);
		}
		@media (max-width: 768px) {
			.contact-modal { align-items: flex-start; padding: var(--space-3); overflow-y: auto; }
			.contact-modal-panel {
				width: 100%;
				max-width: calc(100vw - 2 * var(--space-3));
				overflow: visible;
				padding: var(--space-4);
				margin: var(--space-2) 0;
			}
			.contact-modal-panel h2 { font-weight: 500; font-size: 1.375rem; }
			.contact-modal-intro { font-size: 1rem; margin-bottom: var(--space-2); }
			.contact-modal-logo { width: 6.25rem; margin: 0 0 var(--space-2) -0.5rem; }
			.contact-modal-body label { font-size: 1rem; }
			.contact-modal-body input,
			.contact-modal-body textarea { font-size: 1rem; padding: var(--space-2); }
			.contact-modal-close {
				top: var(--space-1);
				right: var(--space-1);
				font-size: 1.75rem;
				padding: var(--space-3);
				margin: calc(-1 * var(--space-3));
				min-width: 48px;
				min-height: 48px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.contact-modal-close::before { inset: -12px; }
		}

		/* Pause section animations when off-screen (JS toggles .animations-paused) */
		.sec-intro.animations-paused .logo-hero { animation-play-state: paused; }
		.sec-productos.animations-paused { animation-play-state: paused; }

		@media (prefers-reduced-motion: reduce) {
			.bg-svg-wrap { transform: none; }
			.bg-svg-wrap .bg-scroll-group { transform: none; }
			.bg-grid line { animation: none; }
			.sec { opacity: 1; transform: none; transition: none; }
			.sec .reveal-item { opacity: 1; transform: none; transition: none; }
			.tbl tbody tr { opacity: 1; transform: none; transition: none; }
		}
		@media (max-width: 768px) { .nav-links { display: none; } }

		/* Intro subline: must stay Open Sans Regular — wins over any .sec p / title bleed (third-party tools, order bugs) */
		#intro.sec-intro .sec-inner .intro-brand > p.intro-slogan.reveal-item {
			color: #EFDC2B !important;
		}

		#intro.sec-intro .sec-inner > p.sub.reveal-item {
			font-family: "Open Sans", ui-sans-serif, sans-serif !important;
			font-weight: 400 !important;
			font-style: normal !important;
			font-synthesis: none;
		}

		#problema.sec-problema .problema-text-panel > p.reveal-item {
			font-family: "Open Sans", ui-sans-serif, sans-serif !important;
			font-weight: 400 !important;
			font-style: normal !important;
			font-synthesis: none;
		}

		#problema.sec-problema .problema-text-panel > span.sec-label.reveal-item,
		#problema .problema-text-panel span.sec-label {
			color: #EFDC2B !important;
		}

		#solucion .solucion-grid .glass-card .card-body > p {
			font-family: "Open Sans", ui-sans-serif, sans-serif !important;
			font-weight: 400 !important;
			font-style: normal !important;
			font-synthesis: none;
		}

		#productos .table-wrap .tbl tbody td:first-child {
			color: #EFDC2B !important;
		}

		#modelo .sec-inner > p.reveal-item {
			font-family: "Open Sans", ui-sans-serif, sans-serif !important;
			font-weight: 400 !important;
			font-style: normal !important;
			font-synthesis: none;
		}