:root {
	color-scheme: light;
	--ink: #16211d;
	--muted: #667872;
	--paper: #f5f4ec;
	--panel: #ffffff;
	--line: #dde4dc;
	--mint: #15986f;
	--blue: #286fe3;
	--gold: #d5a92f;
	--clay: #bd6149;
	--violet: #6557c8;
	--sky: #dfeefe;
	--leaf: #e6f4eb;
	--warm: #fff5d9;
	--soft: #edf3ee;
	--dark: #151f1b;
	--shadow: 0 18px 42px rgba(22, 33, 29, 0.11);
	--shadow-soft: 0 10px 28px rgba(22, 33, 29, 0.08);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	animation: pageEnter 520ms var(--ease-out) both;
}

body::selection {
	background: #cdeedf;
}

a {
	color: inherit;
	text-decoration: none;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 22px;
	padding: 12px clamp(18px, 4vw, 58px);
	background: rgba(245, 244, 236, 0.88);
	border-bottom: 1px solid rgba(221, 228, 220, 0.86);
	backdrop-filter: blur(18px);
	transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 260ms var(--ease-out);
}

.site-header.is-scrolled {
	background: rgba(245, 244, 236, 0.94);
	border-bottom-color: rgba(22, 33, 29, 0.1);
	box-shadow: 0 12px 30px rgba(22, 33, 29, 0.08);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-width: 174px;
	font-weight: 950;
	transition: transform 180ms var(--ease-snap);
}

.brand:hover {
	transform: translateY(-1px);
}

.brand > span:last-child {
	display: grid;
	gap: 1px;
}

.brand small {
	color: var(--muted);
	font-size: 11px;
	font-weight: 850;
	text-transform: uppercase;
}

.brand-mark {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: #063f39;
	border: 1px solid rgba(255, 255, 255, 0.78);
	border-radius: 8px;
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	transition: transform 420ms var(--ease-snap), box-shadow 220ms ease;
}

.brand-mark img {
	display: block;
	width: 78%;
	height: 78%;
	object-fit: contain;
	border-radius: 6px;
}

.brand:hover .brand-mark {
	transform: rotate(-5deg) scale(1.04);
	box-shadow: 0 14px 32px rgba(22, 33, 29, 0.16);
}

.nav {
	display: flex;
	justify-content: center;
	gap: 6px;
}

.nav a {
	position: relative;
	padding: 10px 11px;
	border-radius: 7px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 850;
	transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-snap);
}

.nav a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
	background: currentColor;
	border-radius: 999px;
	opacity: 0;
	transform: scaleX(0.4);
	transform-origin: center;
	transition: opacity 180ms ease, transform 180ms var(--ease-snap);
}

body[data-page="inicio"] .nav a[data-nav="inicio"],
body[data-page="empresa"] .nav a[data-nav="empresa"],
body[data-page="plataforma"] .nav a[data-nav="plataforma"],
body[data-page="datos"] .nav a[data-nav="datos"],
body[data-page="planes"] .nav a[data-nav="planes"],
body[data-page="contacto"] .nav a[data-nav="contacto"],
.nav a:hover {
	background: white;
	color: var(--ink);
	box-shadow: var(--shadow-soft);
}

.nav a:hover {
	transform: translateY(-1px);
}

body[data-page="inicio"] .nav a[data-nav="inicio"]::after,
body[data-page="empresa"] .nav a[data-nav="empresa"]::after,
body[data-page="plataforma"] .nav a[data-nav="plataforma"]::after,
body[data-page="datos"] .nav a[data-nav="datos"]::after,
body[data-page="planes"] .nav a[data-nav="planes"]::after,
body[data-page="contacto"] .nav a[data-nav="contacto"]::after,
.nav a:hover::after {
	opacity: 0.6;
	transform: scaleX(1);
}

.header-action,
.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 43px;
	padding: 0 18px;
	border: 1px solid var(--ink);
	border-radius: 8px;
	font-weight: 950;
	white-space: nowrap;
	overflow: hidden;
	transition: transform 180ms var(--ease-snap), box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
}

.header-action::before,
.button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent);
	transform: translateX(-125%);
	transition: transform 520ms var(--ease-out);
}

.header-action:hover,
.button:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
}

.header-action:hover::before,
.button:hover::before {
	transform: translateX(125%);
}

.header-action:active,
.button:active {
	transform: translateY(0) scale(0.98);
}

.header-action,
.button.secondary {
	background: rgba(255, 255, 255, 0.78);
	color: var(--ink);
}

.header-action.secondary-action {
	border-color: rgba(21, 152, 111, 0.42);
	background: #e7f5ef;
	color: #137e5d;
}

.button.primary {
	background: var(--ink);
	color: white;
}

.hero {
	position: relative;
	min-height: calc(100vh - 62px);
	display: grid;
	align-items: center;
	overflow: hidden;
	background: #eef4ef;
	border-bottom: 1px solid var(--line);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(245, 244, 236, 0.99) 0%, rgba(245, 244, 236, 0.94) 39%, rgba(245, 244, 236, 0.62) 63%, rgba(245, 244, 236, 0.14) 100%),
		linear-gradient(180deg, rgba(245, 244, 236, 0) 74%, rgba(245, 244, 236, 0.9) 100%);
}

.hero-scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero-copy {
	position: relative;
	z-index: 2;
	width: min(760px, calc(100% - 36px));
	margin-left: clamp(18px, 6vw, 86px);
	padding: 56px 0 92px;
	animation: heroCopyEnter 680ms var(--ease-out) 80ms both;
}

.eyebrow,
.tag {
	margin: 0 0 10px;
	color: var(--mint);
	font-size: 12px;
	font-weight: 950;
	letter-spacing: 0;
	text-transform: uppercase;
}

h1,
h2,
p {
	margin-top: 0;
}

h1 {
	margin-bottom: 18px;
	font-size: clamp(52px, 8vw, 106px);
	line-height: 0.92;
	letter-spacing: 0;
}

h2 {
	margin-bottom: 14px;
	font-size: clamp(27px, 3.8vw, 48px);
	line-height: 1.04;
	letter-spacing: 0;
}

.hero-copy p:not(.eyebrow),
.page-hero p:not(.eyebrow),
.section-copy p,
article p,
.highlight-list span,
.data-table span,
.product-strip span,
.fact-panel span,
.contact-card p {
	color: var(--muted);
	font-size: 17px;
	line-height: 1.62;
}

.hero-copy p:not(.eyebrow) {
	max-width: 650px;
	color: #2c443d;
	font-size: clamp(19px, 2vw, 24px);
}

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

.notice-band {
	display: grid;
	grid-template-columns: minmax(165px, 0.24fr) minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 18px clamp(18px, 5vw, 76px);
	background: var(--warm);
	border-bottom: 1px solid #dfc878;
	color: var(--ink);
	animation: slideUpSoft 560ms var(--ease-out) 180ms both;
}

.notice-band strong {
	font-size: 18px;
}

.notice-band span {
	color: #6a5924;
	font-weight: 750;
	line-height: 1.45;
}

.stats-band {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border-bottom: 1px solid var(--line);
}

.stats-band div {
	position: relative;
	padding: 26px clamp(18px, 4vw, 42px);
	background: white;
	overflow: hidden;
	transition: transform 220ms var(--ease-snap), box-shadow 220ms ease;
}

.stats-band div:hover {
	z-index: 2;
	transform: translateY(-4px);
	box-shadow: var(--shadow-soft);
}

.stats-band div::after {
	content: "";
	position: absolute;
	right: 18px;
	bottom: 14px;
	width: 42px;
	height: 42px;
	background: var(--leaf);
	border-radius: 8px;
	opacity: 0.72;
	transform: rotate(8deg);
}

.stats-band strong {
	position: relative;
	z-index: 1;
	display: block;
	font-size: 31px;
	line-height: 1;
}

.stats-band span {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 7px;
	color: var(--muted);
	font-size: 14px;
	font-weight: 850;
}

.section,
.page-hero {
	padding: clamp(58px, 8vw, 104px) clamp(18px, 5vw, 76px);
}

.page-hero {
	position: relative;
	min-height: 430px;
	display: grid;
	align-content: center;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(237, 245, 239, 0.94), rgba(255, 246, 216, 0.9) 58%, rgba(223, 238, 254, 0.95)),
		radial-gradient(circle at 88% 22%, rgba(21, 152, 111, 0.18), transparent 28%);
	border-bottom: 1px solid var(--line);
	animation: pageHeroEnter 620ms var(--ease-out) both;
}

.page-hero::after {
	content: "";
	position: absolute;
	right: clamp(20px, 7vw, 110px);
	bottom: -56px;
	width: min(34vw, 430px);
	aspect-ratio: 1;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.12)),
		linear-gradient(45deg, transparent 48%, rgba(22, 33, 29, 0.12) 49%, rgba(22, 33, 29, 0.12) 51%, transparent 52%);
	border: 1px solid rgba(22, 33, 29, 0.1);
	border-radius: 8px;
	transform: rotate(14deg);
}

.page-hero.compact {
	min-height: 360px;
}

.page-hero.dark {
	background:
		linear-gradient(135deg, #151f1b, #25362f 56%, #17264b),
		var(--dark);
	color: white;
}

.page-hero.dark .eyebrow {
	color: var(--gold);
}

.page-hero.dark p:not(.eyebrow) {
	color: rgba(255, 255, 255, 0.72);
}

.page-hero h1,
.page-hero p {
	position: relative;
	z-index: 1;
	max-width: 850px;
}

.intro-grid,
.split {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}

.section-copy {
	max-width: 760px;
}

.section-copy.wide {
	max-width: 980px;
	margin-bottom: 34px;
}

.soft-section {
	background: var(--soft);
	border-block: 1px solid var(--line);
}

.highlight-list {
	display: grid;
	gap: 14px;
}

.highlight-list a,
.fact-panel,
.flow-list,
.check-panel,
.spoiler-card,
.data-table,
.contact-card,
.cards-4 article,
.feature-grid article,
.plans article,
.timeline article,
.value-grid article,
.demo-panel,
.metric-card,
.control-panel {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow);
	transition: transform 220ms var(--ease-snap), border-color 220ms ease, box-shadow 220ms ease;
}

.highlight-list a {
	display: grid;
	gap: 7px;
	padding: 22px;
	transition: transform 160ms ease, border-color 160ms ease;
}

.highlight-list a:hover,
.feature-grid article:hover,
.value-grid article:hover,
.plans article:hover,
.cards-4 article:hover,
.timeline article:hover,
.contact-card:hover,
.metric-card:hover {
	border-color: rgba(21, 152, 111, 0.45);
	transform: translateY(-3px);
	box-shadow: 0 20px 48px rgba(22, 33, 29, 0.14);
}

.highlight-list strong,
.fact-panel strong,
.data-table strong,
.product-strip strong,
.contact-card strong {
	font-size: 20px;
}

.cards-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.cards-4 article,
.feature-grid article,
.plans article,
.contact-card,
.spoiler-card,
.timeline article,
.value-grid article,
.demo-panel,
.metric-card,
.control-panel {
	padding: 24px;
}

.cards-4 h2,
.feature-grid h2,
.plans h2,
.contact-card h2 {
	font-size: 25px;
}

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

.feature-grid.dense article {
	min-height: 240px;
}

.feature-grid article,
.value-grid article,
.plans article,
.timeline article,
.cards-4 article {
	position: relative;
	overflow: hidden;
}

.feature-grid article::after,
.value-grid article::after,
.plans article::after,
.cards-4 article::after {
	content: "";
	position: absolute;
	right: -26px;
	bottom: -26px;
	width: 86px;
	height: 86px;
	background: var(--leaf);
	border-radius: 8px;
	transform: rotate(10deg);
	opacity: 0.62;
}

.feature-grid article span {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 22px;
	background: #e7f5ef;
	border-radius: 8px;
	color: var(--mint);
	font-size: 13px;
	font-weight: 950;
}

.demo-panel {
	display: grid;
	gap: 18px;
	background: #111a17;
	color: white;
}

.demo-panel h2,
.demo-panel p {
	margin: 0;
}

.demo-panel p {
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.58;
}

.demo-screen {
	display: grid;
	gap: 12px;
	padding: 16px;
	background: #eef3ee;
	border-radius: 8px;
	color: var(--ink);
}

.demo-topbar,
.demo-row,
.demo-footer {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
}

.demo-dot {
	width: 10px;
	height: 10px;
	background: var(--mint);
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(21, 152, 111, 0.14);
	animation: pulseDot 1800ms ease-in-out infinite;
}

.demo-pill {
	padding: 7px 9px;
	background: white;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 900;
}

.demo-row {
	grid-template-columns: 42px 1fr auto;
	padding: 12px;
	background: white;
	border: 1px solid var(--line);
	border-radius: 8px;
	transition: transform 180ms var(--ease-snap), border-color 180ms ease;
}

.demo-row:hover {
	border-color: rgba(40, 111, 227, 0.28);
	transform: translateX(4px);
}

.demo-cube {
	width: 42px;
	height: 42px;
	background: linear-gradient(135deg, var(--mint), var(--blue));
	border-radius: 8px;
	box-shadow: inset -10px -10px 0 rgba(0, 0, 0, 0.12);
}

.demo-row strong,
.demo-row span {
	display: block;
}

.demo-row span,
.demo-footer {
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
}

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

.metric-rack {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.metric-card strong {
	display: block;
	font-size: 34px;
	line-height: 1;
}

.metric-card span {
	display: block;
	margin-top: 9px;
	color: var(--muted);
	font-weight: 800;
	line-height: 1.4;
}

.control-panel {
	display: grid;
	gap: 14px;
}

.control-row {
	display: grid;
	grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
}

.control-row:last-child {
	border-bottom: 0;
}

.control-row strong {
	font-size: 15px;
}

.control-bar {
	height: 12px;
	background: #e8eee8;
	border-radius: 999px;
	overflow: hidden;
}

.control-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--mint), var(--blue));
	border-radius: inherit;
	transform-origin: left;
	transition: transform 900ms var(--ease-out);
}

.reveal:not(.is-visible) .control-bar span {
	transform: scaleX(0.08);
}

.fact-panel,
.flow-list,
.check-panel,
.data-table {
	overflow: hidden;
}

.fact-panel div,
.data-table div,
.flow-list div,
.check-panel div {
	display: grid;
	grid-template-columns: minmax(170px, 0.38fr) minmax(0, 1fr);
	gap: 18px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--line);
}

.fact-panel div:last-child,
.data-table div:last-child,
.flow-list div:last-child,
.check-panel div:last-child {
	border-bottom: 0;
}

.flow-list strong {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--ink);
	border-radius: 8px;
	color: white;
	font-size: 16px;
}

.check-panel strong {
	font-size: 19px;
}

.product-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--ink);
	color: white;
}

.product-strip div {
	display: grid;
	gap: 6px;
	padding: 25px;
	background: #202b26;
}

.product-strip span {
	color: rgba(255, 255, 255, 0.68);
}

.data-table {
	padding: 0;
}

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

.plans article {
	display: flex;
	min-height: 370px;
	flex-direction: column;
}

.plans article.featured {
	background: var(--warm);
	border-color: #c3a139;
	transform: translateY(-12px);
}

.plans article.featured:hover {
	transform: translateY(-15px);
}

.plans ul {
	display: grid;
	gap: 10px;
	margin: auto 0 0;
	padding-left: 19px;
	color: var(--muted);
}

.timeline {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.timeline article {
	min-height: 260px;
}

.timeline article > span {
	display: inline-flex;
	margin-bottom: 18px;
	padding: 8px 10px;
	background: var(--ink);
	border-radius: 999px;
	color: white;
	font-size: 12px;
	font-weight: 950;
	text-transform: uppercase;
}

.value-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.value-grid article {
	min-height: 230px;
}

.roadmap-public {
	background: white;
}

.founder-section {
	background: white;
	border-top: 1px solid var(--line);
}

.spoiler-card {
	align-self: stretch;
	background: #202b26;
	color: white;
}

.spoiler-card .tag {
	color: var(--gold);
}

.spoiler-card p {
	color: rgba(255, 255, 255, 0.72);
}

.teaser {
	background:
		linear-gradient(135deg, rgba(21, 31, 27, 0.96), rgba(21, 31, 27, 0.92)),
		linear-gradient(90deg, var(--mint), var(--blue));
	color: white;
}

.teaser .eyebrow {
	color: var(--gold);
}

.teaser p {
	max-width: 880px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 18px;
	line-height: 1.65;
}

.teaser .button.primary {
	border-color: white;
	background: white;
	color: var(--ink);
}

.contact-layout {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.contact-form-section {
	display: grid;
	grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
	gap: clamp(32px, 6vw, 88px);
	align-items: start;
}

.contact-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	padding: clamp(24px, 4vw, 42px);
	border: 1px solid var(--line);
	background: linear-gradient(145deg, rgba(18,36,31,.96), rgba(9,23,20,.96));
	box-shadow: var(--shadow);
}

.form-field { display: grid; gap: 8px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label,
.form-consent { color: var(--ink); font-weight: 850; }
.form-field input,
.form-field select,
.form-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid #31453f;
	border-radius: 2px;
	background: #07110f;
	color: var(--ink);
	font: inherit;
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--mint); outline: 3px solid rgba(205,255,85,.14); }
.form-field small,
.form-submit small { color: var(--muted); line-height: 1.45; }
.form-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.form-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--mint); }
.form-consent a { color: var(--mint); }
.form-submit { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-submit button:disabled { cursor: wait; opacity: .65; }
.form-status { margin: 0; padding: 12px 14px; border: 1px solid var(--mint); color: var(--mint); }
.form-status.is-error { border-color: #ff8a78; color: #ffb4a8; }
.form-honey { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 24px clamp(18px, 5vw, 76px);
	background: #101714;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 14px;
	max-width: 620px;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.76);
	text-decoration: none;
}

.footer-links a:hover {
	color: white;
}

.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.page-exit .site-header,
.page-exit main,
.page-exit .footer {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 180ms ease, transform 180ms ease;
}

@keyframes pageEnter {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes heroCopyEnter {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pageHeroEnter {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUpSoft {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulseDot {
	0%,
	100% {
		box-shadow: 0 0 0 5px rgba(21, 152, 111, 0.14);
	}
	50% {
		box-shadow: 0 0 0 9px rgba(21, 152, 111, 0.06);
	}
}

.footer span:first-child {
	color: white;
	font-weight: 950;
}

.footer .legal-note {
	max-width: 620px;
	color: rgba(255, 255, 255, 0.54);
	font-size: 12px;
	line-height: 1.45;
	text-align: right;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto;
		transition: none !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 1080px) {
	.metric-rack,
	.cards-4,
	.value-grid,
	.timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.site-header {
		grid-template-columns: 1fr auto;
	}

	.nav {
		grid-column: 1 / -1;
		justify-content: flex-start;
		overflow-x: auto;
		padding-bottom: 3px;
	}

	.stats-band,
	.feature-grid,
	.product-strip,
	.plans,
	.contact-layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.intro-grid,
	.split,
	.contact-form-section {
		grid-template-columns: 1fr;
	}

	.plans article.featured {
		transform: none;
	}
}

@media (max-width: 660px) {
	.site-header {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.header-action,
	.button {
		width: 100%;
	}

	.header-actions {
		display: grid;
		width: 100%;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nav {
		gap: 5px;
	}

	.contact-form { grid-template-columns: 1fr; padding: 22px 18px; }
	.form-field-wide { grid-column: auto; }

	.notice-band,
	.control-row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.hero {
		min-height: auto;
	}

	.hero::before {
		background: rgba(245, 244, 236, 0.92);
	}

	.hero-copy {
		padding: 52px 0 70px;
	}

	.actions,
	.stats-band,
	.feature-grid,
	.product-strip,
	.plans,
	.contact-layout,
	.metric-rack,
	.cards-4,
	.timeline,
	.value-grid {
		grid-template-columns: 1fr;
	}

	.stats-band,
	.product-strip {
		display: grid;
	}

	.fact-panel div,
	.data-table div,
	.flow-list div,
	.check-panel div,
	.demo-row,
	.demo-topbar,
	.demo-footer {
		grid-template-columns: 1fr;
		gap: 7px;
	}

	.page-hero::after {
		opacity: 0.35;
	}

	.footer {
		align-items: flex-start;
		flex-direction: column;
	}

	.footer .legal-note {
		max-width: none;
		text-align: left;
	}
}

/* 2026 visual refresh: editorial classroom / digital laboratory */
:root {
	color-scheme: dark;
	--ink: #f4f7f2;
	--muted: #a8b6af;
	--paper: #07110f;
	--panel: #0d1b18;
	--line: rgba(205, 255, 85, 0.18);
	--mint: #cdff55;
	--blue: #67d5ff;
	--gold: #ffce55;
	--clay: #ff7657;
	--violet: #a891ff;
	--sky: #0d2530;
	--leaf: #162c22;
	--warm: #2b230d;
	--soft: #091714;
	--dark: #030908;
	--shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
	--shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.3);
	font-family: "Arial Narrow", "Roboto Condensed", Inter, ui-sans-serif, system-ui, sans-serif;
}

body {
	background:
		radial-gradient(circle at 10% 4%, rgba(103, 213, 255, 0.08), transparent 24rem),
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		var(--paper);
	background-size: auto, 42px 42px, 42px 42px, auto;
}

.site-header {
	padding-block: 15px;
	background: rgba(3, 9, 8, 0.82);
	border-color: rgba(205, 255, 85, 0.16);
	backdrop-filter: blur(22px) saturate(1.25);
}

.site-header.is-scrolled { background: rgba(3, 9, 8, 0.94); border-bottom-color: rgba(205, 255, 85, 0.28); }
.brand { letter-spacing: .02em; }
.brand small { color: var(--mint); letter-spacing: .16em; }
.brand-mark { background: var(--mint); border: 0; border-radius: 3px; box-shadow: 5px 5px 0 rgba(103, 213, 255, 0.28); }
.brand-mark img { width: 84%; height: 84%; border-radius: 2px; }

.nav { gap: 2px; }
.nav a { border-radius: 2px; color: #a8b6af; letter-spacing: .04em; text-transform: uppercase; }
body[data-page="inicio"] .nav a[data-nav="inicio"],
body[data-page="empresa"] .nav a[data-nav="empresa"],
body[data-page="plataforma"] .nav a[data-nav="plataforma"],
body[data-page="datos"] .nav a[data-nav="datos"],
body[data-page="planes"] .nav a[data-nav="planes"],
body[data-page="contacto"] .nav a[data-nav="contacto"],
.nav a:hover { background: var(--mint); color: #07110f; box-shadow: none; }

.header-action, .button { min-height: 46px; border-radius: 2px; letter-spacing: .04em; text-transform: uppercase; }
.header-action, .button.secondary { background: transparent; border-color: rgba(244,247,242,.34); color: var(--ink); }
.header-action.secondary-action { background: var(--mint); border-color: var(--mint); color: #07110f; }
.button.primary { background: var(--mint); border-color: var(--mint); color: #07110f; }
.header-action:hover, .button:hover { box-shadow: 6px 6px 0 var(--blue); transform: translate(-2px, -2px); }

.hero {
	min-height: calc(100vh - 76px);
	background:
		radial-gradient(circle at 76% 42%, rgba(103,213,255,.16), transparent 22%),
		linear-gradient(115deg, #07110f 0 48%, rgba(7,17,15,.78) 68%, rgba(7,17,15,.25)),
		#07110f;
	border-color: var(--line);
}
.hero::before { background: linear-gradient(90deg, #07110f 0 38%, rgba(7,17,15,.78) 58%, transparent 100%); }
.hero-copy { max-width: 850px; }
h1, h2 { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 400; letter-spacing: .015em; text-transform: uppercase; }
h1 { font-size: clamp(72px, 12vw, 170px); line-height: .78; text-shadow: 7px 7px 0 rgba(103,213,255,.18); }
body[data-page="inicio"] .hero h1 { max-width: 780px; font-size: clamp(48px, 6.4vw, 92px); line-height: .9; }
h2 { font-size: clamp(34px, 4.8vw, 64px); line-height: .94; }
.page-hero h1 { max-width: 980px; font-size: clamp(48px, 7vw, 92px); line-height: .88; }
.cards-4 h2,
.feature-grid h2,
.plans h2,
.contact-card h2,
.timeline h2,
.value-grid h2,
.metric-card h2 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; }
.section-copy h2,
.demo-panel h2,
.spoiler-card h2,
.teaser h2 { font-size: clamp(32px, 4vw, 52px); line-height: .98; }
.eyebrow, .tag { color: var(--mint); letter-spacing: .18em; }
.hero-copy p:not(.eyebrow) { color: #cad4cf; }

.notice-band { background: var(--mint); border: 0; color: #07110f; }
.notice-band span { color: #26340d; }
.stats-band { background: var(--line); border-color: var(--line); }
.stats-band div { background: #091714; }
.stats-band div::after { background: transparent; border: 1px solid var(--blue); border-radius: 0; }
.stats-band strong { color: var(--mint); font-family: Impact, sans-serif; font-size: 40px; font-weight: 400; }

.section, .page-hero { padding-block: clamp(76px, 10vw, 138px); }
.page-hero { min-height: 520px; background: linear-gradient(125deg, #091714 0 58%, #102a30); border-color: var(--line); }
.page-hero::after { border-radius: 0; border-color: var(--mint); background: repeating-linear-gradient(45deg, transparent 0 16px, rgba(205,255,85,.09) 16px 17px); }
.page-hero.dark { background: linear-gradient(125deg, #030908, #0b211b 62%, #102a30); }
.page-hero p:not(.eyebrow), .section-copy p, article p, .highlight-list span, .data-table span, .product-strip span, .fact-panel span, .contact-card p { color: var(--muted); }
.soft-section, .founder-section, .roadmap-public { background: rgba(9, 23, 20, .88); border-color: var(--line); }

.highlight-list a, .fact-panel, .flow-list, .check-panel, .spoiler-card, .data-table, .contact-card, .cards-4 article, .feature-grid article, .plans article, .timeline article, .value-grid article, .demo-panel, .metric-card, .control-panel {
	background: linear-gradient(145deg, rgba(18,36,31,.96), rgba(9,23,20,.96));
	border-color: var(--line);
	border-radius: 2px;
	box-shadow: var(--shadow);
}
.highlight-list a:hover, .feature-grid article:hover, .value-grid article:hover, .plans article:hover, .cards-4 article:hover, .timeline article:hover, .contact-card:hover, .metric-card:hover { border-color: var(--mint); box-shadow: 8px 8px 0 rgba(205,255,85,.16); transform: translate(-3px,-3px); }
.feature-grid article::after, .value-grid article::after, .plans article::after, .cards-4 article::after { background: transparent; border: 1px solid var(--blue); border-radius: 0; }
.feature-grid article span { background: var(--mint); border-radius: 1px; color: #07110f; }
.demo-panel, .spoiler-card { background: #030908; }
.demo-screen { background: #07110f; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); }
.demo-row, .demo-pill { background: #0d1b18; border-color: var(--line); border-radius: 2px; }
.demo-cube { border-radius: 1px; background: linear-gradient(135deg, var(--mint), var(--blue)); }
.control-bar { background: #182521; }
.control-bar span { background: linear-gradient(90deg, var(--mint), var(--blue)); }
.product-strip { background: var(--mint); }
.product-strip div { background: #07110f; }
.plans article.featured { background: #20270d; border-color: var(--mint); }
.timeline article > span, .flow-list strong { background: var(--mint); border-radius: 1px; color: #07110f; }
.teaser { background: linear-gradient(120deg, #0b211b, #07110f 56%, #102a30); border-block: 1px solid var(--line); }
.teaser .button.primary { background: var(--mint); border-color: var(--mint); color: #07110f; }
.footer { background: #020605; border-top: 1px solid var(--line); }
.footer-links a:hover { color: var(--mint); }

/* Empresa: small structural refinement */
body[data-page="empresa"] .page-hero {
	min-height: 440px;
	grid-template-columns: minmax(0, 1fr) minmax(220px, .32fr);
	column-gap: clamp(28px, 6vw, 90px);
}

body[data-page="empresa"] .company-hero-copy {
	grid-column: 1;
}

body[data-page="empresa"] .company-hero-mark {
	position: relative;
	z-index: 1;
	display: grid;
	grid-column: 2;
	grid-row: 1;
	width: min(250px, 22vw);
	aspect-ratio: 1;
	place-items: center;
	justify-self: end;
	border: 1px solid var(--mint);
	color: var(--mint);
	transform: rotate(4deg);
}

body[data-page="empresa"] .company-hero-mark span {
	font-family: Impact, sans-serif;
	font-size: clamp(54px, 7vw, 96px);
	letter-spacing: .04em;
}

body[data-page="empresa"] .company-hero-mark i {
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(103, 213, 255, .5);
	transform: rotate(-8deg);
}

body[data-page="empresa"] .cards-4 {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

body[data-page="empresa"] .cards-4 article {
	grid-column: span 6;
	min-height: 210px;
}

body[data-page="empresa"] .cards-4 article:first-child,
body[data-page="empresa"] .cards-4 article:last-child {
	grid-column: span 7;
}

body[data-page="empresa"] .cards-4 article:nth-child(2),
body[data-page="empresa"] .cards-4 article:nth-child(3) {
	grid-column: span 5;
}

body[data-page="empresa"] .section.split {
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
	align-items: center;
}

body[data-page="empresa"] .value-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-page="empresa"] .value-grid article {
	min-height: 190px;
}

@media (max-width: 660px) {
	.hero::before { background: rgba(7,17,15,.88); }
	h1 { font-size: clamp(66px, 24vw, 108px); }
	body[data-page="inicio"] .hero h1 { font-size: clamp(42px, 12vw, 60px); line-height: .94; }
	.page-hero h1 { font-size: clamp(42px, 14vw, 64px); }
	.site-header { background: rgba(3,9,8,.96); }
	body[data-page="empresa"] .page-hero,
	body[data-page="empresa"] .cards-4,
	body[data-page="empresa"] .section.split,
	body[data-page="empresa"] .value-grid { grid-template-columns: 1fr; }
	body[data-page="empresa"] .cards-4 article,
	body[data-page="empresa"] .cards-4 article:first-child,
	body[data-page="empresa"] .cards-4 article:last-child,
	body[data-page="empresa"] .cards-4 article:nth-child(2),
	body[data-page="empresa"] .cards-4 article:nth-child(3) { grid-column: auto; }
	body[data-page="empresa"] .company-hero-mark { display: none; }
	}

/* Mobile navigation and touch ergonomics. */
.nav-toggle { display: none; }

@media (max-width: 980px) {
	.site-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
	.nav-toggle {
		display: inline-flex; align-items: center; justify-content: center; gap: 9px;
		min-height: 46px; padding: 0 14px; border: 1px solid rgba(205,255,85,.55);
		border-radius: 3px; background: rgba(255,255,255,.07); color: #fff;
		font: inherit; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
	}
	.nav-toggle > span:first-child,
	.nav-toggle > span:first-child::before,
	.nav-toggle > span:first-child::after {
		display: block; width: 18px; height: 2px; background: currentColor; content: "";
		transition: transform 180ms ease, opacity 180ms ease;
	}
	.nav-toggle > span:first-child { position: relative; }
	.nav-toggle > span:first-child::before { position: absolute; transform: translateY(-6px); }
	.nav-toggle > span:first-child::after { position: absolute; transform: translateY(6px); }
	.nav-open .nav-toggle > span:first-child { background: transparent; }
	.nav-open .nav-toggle > span:first-child::before { transform: rotate(45deg); }
	.nav-open .nav-toggle > span:first-child::after { transform: rotate(-45deg); }
	.site-header .nav {
		display: none; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 4px; padding-top: 8px; overflow: visible; border-top: 1px solid rgba(255,255,255,.12);
	}
	.site-header.nav-open .nav { display: grid; }
	.site-header .nav a { display: grid; min-height: 44px; place-items: center; text-align: center; }
	.site-header .header-actions { display: none; grid-column: 1 / -1; }
	.site-header.nav-open .header-actions { display: grid; }
}

@media (max-width: 660px) {
	.site-header { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; }
	.site-header .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.brand { min-width: 0; }
	.brand small { display: none; }
	.hero-copy, .section, .page-hero, .notice-band, .stats-band { padding-inline: 18px; }
	.actions { gap: 10px; }
	.footer-links { gap: 8px 14px; }
}

@media (max-width: 380px) {
	.nav-toggle-label { display: none; }
	.site-header .header-actions { grid-template-columns: 1fr; }
	.page-hero h1 { overflow-wrap: anywhere; }
}

@media (hover: none) and (pointer: coarse) {
	a, button, input, select, textarea { -webkit-tap-highlight-color: rgba(205,255,85,.2); }
	.nav a, .footer-links a { min-height: 44px; }
	.header-action:hover, .button:hover { transform: none; box-shadow: none; }
}

/* 2026-09 rounded campus system: shared geometry for the complete public site. */
:root {
	--radius-xs: 8px;
	--radius-sm: 12px;
	--radius-md: 18px;
	--radius-lg: 26px;
}

.brand-mark,
.brand-mark img { border-radius: var(--radius-sm); }

.nav a,
.header-action,
.button,
.nav-toggle { border-radius: var(--radius-sm); }

.feature-grid article,
.value-grid article,
.plans article,
.cards-4 article,
.contact-card,
.contact-form-section,
.fact-panel,
.check-panel,
.metric-card,
.product-strip,
.legal-note,
.spoiler-card,
.control-panel,
.roadmap-public article,
.timeline article,
.flow-list li { border-radius: var(--radius-md); }

.feature-grid article::after,
.value-grid article::after,
.plans article::after,
.cards-4 article::after,
.stats-band div::after { border-radius: var(--radius-sm); }

.feature-grid article span,
.timeline article > span,
.flow-list strong,
.tag,
.demo-dot { border-radius: var(--radius-xs); }

.demo-screen,
.demo-panel { border-radius: var(--radius-lg); }

.demo-row,
.demo-pill,
.demo-cube,
.data-table,
.data-table > div,
.control-row,
.form-status { border-radius: var(--radius-sm); }

.form-field input,
.form-field select,
.form-field textarea { border-radius: var(--radius-sm); }

.status-monitor [data-health-overall]::before {
	content: "";
	display: inline-block;
	width: .72rem;
	height: .72rem;
	margin-right: .55rem;
	border-radius: 50%;
	background: #d5a92f;
	box-shadow: 0 0 0 4px rgba(213,169,47,.14);
}

.status-monitor[data-health-state="ok"] [data-health-overall]::before { background: #15986f; box-shadow: 0 0 0 4px rgba(21,152,111,.14); }
.status-monitor[data-health-state="degraded"] [data-health-overall]::before,
.status-monitor[data-health-state="stale"] [data-health-overall]::before { background: #d5a92f; }
.status-monitor[data-health-state="down"] [data-health-overall]::before { background: #bd6149; box-shadow: 0 0 0 4px rgba(189,97,73,.14); }

.status-refresh {
	font: inherit;
	font-weight: 700;
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: var(--radius-xs);
	padding: .35rem .65rem;
	cursor: pointer;
}

.status-refresh:disabled { cursor: wait; opacity: .55; }

.notice-band { border-radius: 0 0 var(--radius-md) var(--radius-md); }

.page-hero::after { border-radius: var(--radius-lg); }

@media (max-width: 980px) {
	.site-header .nav { border-radius: 0 0 var(--radius-md) var(--radius-md); }
}