:root {
				--navy: #0f172a;
				/* Azul oscuro institucional */
				--blue: #3763f4;
				/* Azul original Compraygana */
				--teal: #3763f4;
				/* Sustituimos teal por azul de marca */
				--sky: #a2f200;
				/* Verde lima Compraygana como acento */
				--slate: #334155;
				/* Texto principal */
				--muted: #7383a6;
				/* Gris original Compraygana */
				--line: #dce3eb;
				/* Separadores */
				--soft: #f8fafc;
				/* Fondo neutro */
				--soft2: #eafcfa;
				/* Gris claro original Compraygana */
				--white: #ffffff;
				--radius: 22px;
				--shadow: 0 16px 45px rgba(15, 23, 42, .08);
			}

			* {
				box-sizing: border-box
			}

			html {
				scroll-behavior: smooth
			}

			body {
				margin: 0;
				font-family: Inter, "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
				color: var(--slate);
				background: #fff;
				line-height: 1.55
			}

			img {
				max-width: 100%;
				display: block
			}

			a {
				color: inherit
			}

			.container {
				width: min(1120px, calc(100% - 40px));
				margin-inline: auto
			}

			.section {
				padding: 84px 0
			}

			.section.soft {
				background: var(--soft)
			}

			.eyebrow {
				display: inline-flex;
				align-items: center;
				gap: 8px;
				font-size: .78rem;
				font-weight: 800;
				letter-spacing: .12em;
				text-transform: uppercase;
				color: var(--teal);
				margin-bottom: 14px
			}

			.eyebrow::before {
				content: "";
				width: 22px;
				height: 3px;
				border-radius: 999px;
				background: var(--teal)
			}

			h1,
			h2,
			h3 {
				color: var(--navy);
				line-height: 1.08;
				margin: 0
			}

			h1 {
				font-size: clamp(2.35rem, 5.4vw, 4.8rem);
				letter-spacing: -.045em;
				max-width: 900px
			}

			h2 {
				font-size: clamp(1.9rem, 3.2vw, 3.1rem);
				letter-spacing: -.035em;
				max-width: 780px
			}

			h3 {
				font-size: 1.15rem;
				letter-spacing: -.02em
			}

			p {
				margin: 0
			}

			.lead {
				font-size: clamp(1.05rem, 1.7vw, 1.28rem);
				color: #475569;
				max-width: 760px;
				margin-top: 24px
			}

			.site-header {
				position: sticky;
				top: 0;
				z-index: 30;
				background: rgba(255, 255, 255, .92);
				backdrop-filter: blur(14px);
				border-bottom: 1px solid rgba(226, 232, 240, .85)
			}

			.nav {
				min-height: 74px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 26px
			}

			.logo {
				display: flex;
				align-items: center;
				text-decoration: none
			}

			.logo img {
				height: 42px;
				width: auto
			}

			.nav-links {
				display: flex;
				align-items: center;
				gap: 24px;
				font-size: .92rem;
				font-weight: 650
			}

			.nav-links a:not(.btn) {
				text-decoration: none;
				color: #475569
			}

			.nav-links a:hover {
				color: var(--navy)
			}

			.btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 9px;
				border: 1px solid transparent;
				border-radius: 999px;
				padding: 13px 20px;
				font-weight: 800;
				text-decoration: none;
				transition: .18s ease;
				cursor: pointer;
				font-size: .95rem
			}

			.btn-primary {
				background: var(--navy);
				color: #fff
			}

			.btn-primary:hover {
				transform: translateY(-1px);
				background: #172554
			}

			.btn-secondary {
				background: #fff;
				border-color: var(--line);
				color: var(--navy)
			}

			.btn-secondary:hover {
				border-color: #cbd5e1;
				background: var(--soft)
			}

			.btn-teal {
				background: var(--teal);
				color: #fff
			}

			.btn-teal:hover {
				transform: translateY(-1px);
				background: #244bd8
			}

			.hero {
				padding: 78px 0 48px;
				overflow: hidden;
				background:
					radial-gradient(circle at 86% 12%, rgba(55, 99, 244, .12), transparent 28%),
					radial-gradient(circle at 72% 82%, rgba(162, 242, 0, .10), transparent 28%),
					linear-gradient(180deg, #fff 0%, #f8fafc 100%);
			}

			.hero-grid {
				display: grid;
				grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
				align-items: center;
				gap: 48px
			}

			.hero .accent {
				color: var(--teal)
			}

			.hero-actions {
				display: flex;
				flex-wrap: wrap;
				gap: 12px;
				margin-top: 30px
			}

			.hero-note {
				margin-top: 16px;
				color: var(--muted);
				font-size: .86rem
			}

			.hero-card {
				position: relative;
				background: var(--navy);
				color: white;
				border-radius: 30px;
				padding: 30px;
				box-shadow: 0 28px 70px rgba(15, 23, 42, .18);
				overflow: hidden
			}

			.hero-card::before {
				content: "";
				position: absolute;
				inset: auto -80px -90px auto;
				width: 240px;
				height: 240px;
				border-radius: 50%;
				background: rgba(56, 189, 248, .16)
			}

			.hero-card .label {
				font-size: .78rem;
				letter-spacing: .09em;
				text-transform: uppercase;
				color: #93c5fd;
				font-weight: 800
			}

			.hero-card .big {
				font-size: 2.8rem;
				font-weight: 900;
				letter-spacing: -.05em;
				margin: 12px 0 2px
			}

			.hero-card .caption {
				color: #cbd5e1;
				font-size: .9rem
			}

			.hero-card hr {
				border: 0;
				border-top: 1px solid rgba(255, 255, 255, .12);
				margin: 24px 0
			}

			.hero-mini {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 18px
			}

			.hero-mini strong {
				display: block;
				font-size: 1.45rem;
				color: white
			}

			.hero-mini span {
				font-size: .78rem;
				color: #cbd5e1
			}

			.stats {
				padding: 22px 0 58px;
				background: #fbfdff
			}

			.stats-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				border: 1px solid var(--line);
				border-radius: 22px;
				overflow: hidden;
				background: white;
				box-shadow: var(--shadow)
			}

			.stat {
				padding: 23px 25px
			}

			.stat+.stat {
				border-left: 1px solid var(--line)
			}

			.stat strong {
				display: block;
				color: var(--navy);
				font-size: 1.55rem;
				letter-spacing: -.03em
			}

			.stat span {
				display: block;
				color: var(--muted);
				font-size: .82rem;
				margin-top: 4px
			}

			.section-head {
				display: flex;
				justify-content: space-between;
				gap: 40px;
				align-items: end;
				margin-bottom: 38px
			}

			.section-head p {
				max-width: 520px;
				color: var(--muted)
			}

			.cards {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 22px
			}

			.card {
				border: 1px solid var(--line);
				border-radius: var(--radius);
				padding: 30px;
				background: white;
				box-shadow: 0 10px 30px rgba(15, 23, 42, .04)
			}

			.card .icon {
				width: 48px;
				height: 48px;
				border-radius: 14px;
				display: grid;
				place-items: center;
				background: #f3f8ff;
				color: var(--blue);
				font-size: 1.3rem;
				font-weight: 900;
				margin-bottom: 20px
			}

			.card p {
				color: var(--muted);
				margin-top: 12px
			}

			.tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8px;
				margin-top: 20px
			}

			.tag {
				font-size: .76rem;
				padding: 7px 10px;
				border-radius: 999px;
				background: var(--soft2);
				color: #475569;
				font-weight: 700
			}

			.case {
				display: grid;
				grid-template-columns: .95fr 1.05fr;
				gap: 30px;
				align-items: stretch
			}

			.case-main {
				border-radius: 28px;
				background: linear-gradient(145deg, var(--blue), var(--navy));
				padding: 34px;
				color: white;
				box-shadow: var(--shadow)
			}

			.case-main .eyebrow {
				color: var(--sky);
			}

			.case-main .eyebrow::before {
				background: var(--sky);
			}

			.case-main h2 {
				color: white
			}

			.case-main p {
				margin-top: 18px;
				color: #dbeafe
			}

			.case-main .case-number {
				font-size: clamp(3rem, 6vw, 5.4rem);
				font-weight: 900;
				letter-spacing: -.055em;
				line-height: .95;
				margin-top: 30px;
				color: white
			}

			.case-main .case-label {
				color: #bfdbfe;
				margin-top: 10px
			}

			.case-side {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 18px
			}

			.metric {
				border: 1px solid var(--line);
				border-radius: 20px;
				padding: 25px;
				background: white;
				display: flex;
				flex-direction: column;
				justify-content: center;
				min-height: 165px
			}

			.metric strong {
				font-size: 2rem;
				color: var(--navy);
				letter-spacing: -.04em
			}

			.metric span {
				font-size: .85rem;
				color: var(--muted);
				margin-top: 8px
			}

			.metric.highlight {
				background: #f7ffe8;
				border-color: #dfffa3;
			}

			.metric.highlight strong {
				color: var(--blue);
			}

			.steps {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 18px
			}

			.step {
				position: relative;
				padding: 26px;
				border-radius: 20px;
				background: white;
				border: 1px solid var(--line)
			}

			.step-number {
				width: 34px;
				height: 34px;
				border-radius: 50%;
				background: var(--navy);
				color: white;
				display: grid;
				place-items: center;
				font-size: .82rem;
				font-weight: 900;
				margin-bottom: 18px
			}

			.step p {
				margin-top: 9px;
				color: var(--muted);
				font-size: .9rem
			}

			.benefits {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 18px
			}

			.benefit {
				padding: 24px 0;
				border-top: 2px solid var(--line)
			}

			.benefit:first-child {
				border-top-color: var(--teal)
			}

			.benefit h3 {
				margin-bottom: 8px
			}

			.benefit p {
				font-size: .9rem;
				color: var(--muted)
			}

			.cta {
				padding: 70px 0
			}

			.cta-box {
				border-radius: 30px;
				padding: 46px;
				background: var(--navy);
				color: white;
				display: grid;
				grid-template-columns: 1fr auto;
				gap: 36px;
				align-items: center;
				overflow: hidden;
				position: relative
			}

			.cta-box::after {
				content: "";
				position: absolute;
				right: -100px;
				top: -120px;
				width: 300px;
				height: 300px;
				border-radius: 50%;
				background: rgba(56, 189, 248, .13)
			}

			.cta-box h2 {
				color: white;
				max-width: 690px
			}

			.cta-box p {
				color: #cbd5e1;
				margin-top: 14px;
				max-width: 700px
			}

			.cta-actions {
				display: flex;
				flex-direction: column;
				gap: 10px;
				position: relative;
				z-index: 2
			}

			footer {
				padding: 30px 0;
				border-top: 1px solid var(--line)
			}

			.footer-grid {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 22px
			}

			footer p {
				font-size: .82rem;
				color: var(--muted)
			}

			footer a {
				text-decoration: none
			}

			@media (max-width:900px) {
				.nav-links a:not(.btn) {
					display: none
				}

				.hero-grid,
				.case,
				.cta-box {
					grid-template-columns: 1fr
				}

				.hero-card {
					max-width: 620px
				}

				.stats-grid {
					grid-template-columns: 1fr 1fr
				}

				.stat:nth-child(3) {
					border-left: 0;
					border-top: 1px solid var(--line)
				}

				.stat:nth-child(4) {
					border-top: 1px solid var(--line)
				}

				.cards,
				.steps,
				.benefits {
					grid-template-columns: 1fr
				}

				.section-head {
					display: block
				}

				.section-head p {
					margin-top: 14px
				}

				.cta-actions {
					flex-direction: row;
					flex-wrap: wrap
				}
			}

			@media (max-width:560px) {
				.container {
					width: min(100% - 28px, 1120px)
				}

				.section {
					padding: 62px 0
				}

				.hero {
					padding-top: 48px
				}

				.logo img {
					height: 34px
				}

				.nav {
					min-height: 64px
				}

				.nav .btn {
					padding: 10px 14px;
					font-size: .84rem
				}

				.stats-grid,
				.case-side {
					grid-template-columns: 1fr
				}

				.stat+.stat {
					border-left: 0;
					border-top: 1px solid var(--line)
				}

				.hero-card,
				.card,
				.case-main,
				.cta-box {
					padding: 24px
				}

				.cta-actions {
					display: grid
				}

				.footer-grid {
					display: block
				}

				footer p+p {
					margin-top: 8px
				}
			}