/* konex-landing - plain CSS, no build step.
   Custom properties first so a restyle is a few values, not a find-replace. */
:root {
	--bg: #f8fafc;
	--surface: #ffffff;
	--text: #0f172a;
	--muted: #475569;
	--border: #e2e8f0;
	--accent: #2563eb;
	--radius: 8px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0f172a;
		--surface: #1e293b;
		--text: #e2e8f0;
		--muted: #94a3b8;
		--border: #334155;
		--accent: #60a5fa;
	}
}

*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.container { max-width: 48rem; margin: 0 auto; padding: 3rem 1.5rem; }

.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
.page-header h1 { margin: 0; font-size: 1.875rem; letter-spacing: -0.02em; }

.button {
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--radius);
	background: var(--text);
	color: var(--bg);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}
.button:hover { opacity: 0.85; }

.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
}
.panel h2 { margin: 0; font-size: 1.25rem; }
.panel p { margin: 0.5rem 0 0; color: var(--muted); }

/* --- blog ---------------------------------------------------------------- */
.blog-lede { color: var(--muted); margin: 0 0 2rem; }
.blog-list { display: grid; gap: 1.5rem; }
.blog-list h2 { margin: 0; font-size: 1.25rem; }
.blog-list h2 a { color: inherit; text-decoration: none; }
.blog-list h2 a:hover { text-decoration: underline; }
.blog-meta { color: var(--muted); font-size: 0.875rem; display: flex; gap: 0.75rem; }
.blog-cover { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 0.5rem; margin-bottom: 1rem; }
.blog-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; font-size: 0.875rem; }
.blog-body { margin-top: 2rem; line-height: 1.7; }
.blog-body img { max-width: 100%; height: auto; }
.blog-byline { display: flex; gap: 1rem; align-items: center; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border, #e2e8f0); }
.blog-avatar { width: 3rem; height: 3rem; border-radius: 9999px; object-fit: cover; }

/* --- under construction (temporary) ---------------------------------------- */
.construccion {
	--k-accent: #2563eb;
	--k-accent-deep: #1e40af;
	--k-ink: #0f172a;
	/* one screen, never scrolls: the section is exactly the viewport and everything inside
	   (text + phone) shrinks to fit it */
	position: relative;
	box-sizing: border-box;
	width: 100%; max-width: 74rem; margin: 0 auto;
	height: 100vh; height: 100dvh;
	padding: clamp(0.75rem, 2.5vh, 1.75rem) clamp(1rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	justify-items: center;
	align-items: center;
	gap: clamp(0.5rem, 2.2vh, 1.6rem);
	text-align: center;
}
html:has(.construccion), body:has(.construccion) { height: 100%; overflow: hidden; }
body:has(.construccion) .container { max-width: none; margin: 0; padding: 0; }
.construccion-logo {
	display: block; height: auto;
	/* sized by width and height so it shrinks with short and narrow screens */
	width: clamp(4.5rem, min(26vw, 17vh), 12rem);
	margin: 0 auto clamp(0.3rem, 1.2vh, 0.9rem);
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
.construccion h1 { margin: clamp(0.35rem, 1.2vh, 1rem) 0 clamp(0.35rem, 1.2vh, 0.75rem); font-size: clamp(1.45rem, min(6vw, 5.6vh), 3.25rem); line-height: 1.1; letter-spacing: -0.03em; }
.construccion-copy p { margin: 0 auto; max-width: 30rem; color: var(--muted); font-size: clamp(0.85rem, min(3.6vw, 2.4vh), 1.1rem); }
@media (min-width: 52rem) {
	.construccion { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); text-align: left; }
	.construccion-logo { margin-left: 0; width: clamp(5rem, min(14vw, 20vh), 12rem); }
	.construccion-copy p { margin: 0; }
	.construccion h1 { font-size: clamp(1.8rem, min(4.2vw, 7vh), 3.25rem); }
	.construccion-copy p { font-size: clamp(0.95rem, min(1.6vw, 2.6vh), 1.1rem); }
}

/* phone */
/* The phone is a real mockup photo (static/img/mockup-phone.webp: phone.png, mirrored,
   screen cut out). The app layout is warped into its screen with a homography
   (matrix3d) computed from the screen's four corners. Design size of the layout:
   278 x 608 px; the mockup box is 493 x 561 px, scaled with --k. */
.mock-wrap {
	/* --kw: what the width allows, --kh: what the height allows; the phone uses the smaller */
	--kw: 0.5; --kh: 0.38;
	--k: min(var(--kw), var(--kh));
	position: relative; z-index: 1;
	width: calc(493px * var(--k)); height: calc(561px * var(--k));
}
/* stacked layout (phone under the text): width caps, then height caps */
@media (min-width: 20rem) { .mock-wrap { --kw: 0.52; } }
@media (min-width: 22rem) { .mock-wrap { --kw: 0.62; } }
@media (min-width: 23rem) { .mock-wrap { --kw: 0.68; } }
@media (min-width: 25rem) { .mock-wrap { --kw: 0.72; } }
@media (min-width: 34rem) { .mock-wrap { --kw: 1.1; } }
@media (min-height: 540px) { .mock-wrap { --kh: 0.46; } }
@media (min-height: 620px) { .mock-wrap { --kh: 0.56; } }
@media (min-height: 700px) { .mock-wrap { --kh: 0.68; } }
@media (min-height: 780px) { .mock-wrap { --kh: 0.8; } }
@media (min-height: 860px) { .mock-wrap { --kh: 0.95; } }
@media (min-height: 1000px) { .mock-wrap { --kh: 1.15; } }
/* two columns (phone beside the text): the whole height is for the phone */
@media (min-width: 52rem) {
	.mock-wrap { --kw: 0.8; --kh: 0.45; }
}
@media (min-width: 64rem) { .mock-wrap { --kw: 1.05; } }
@media (min-width: 75rem) { .mock-wrap { --kw: 1.3; } }
@media (min-width: 52rem) and (min-height: 460px) { .mock-wrap { --kh: 0.55; } }
@media (min-width: 52rem) and (min-height: 540px) { .mock-wrap { --kh: 0.66; } }
@media (min-width: 52rem) and (min-height: 620px) { .mock-wrap { --kh: 0.8; } }
@media (min-width: 52rem) and (min-height: 700px) { .mock-wrap { --kh: 0.95; } }
@media (min-width: 52rem) and (min-height: 800px) { .mock-wrap { --kh: 1.1; } }
@media (min-width: 52rem) and (min-height: 900px) { .mock-wrap { --kh: 1.3; } }
.mock { position: absolute; left: 0; top: 0; width: 493px; height: 561px; transform: scale(var(--k)); transform-origin: 0 0; }
.mock-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
/* the layout is clipped by the exact shape of the phone's screen (mockup-phone-hole.webp),
   so it fills the whole glass up to the bezel, rounded corners included */
.mock-clip {
	position: absolute; inset: 0; z-index: 2;
	-webkit-mask: url("/static/img/mockup-phone-hole.webp") 0 0 / 100% 100% no-repeat;
	mask: url("/static/img/mockup-phone-hole.webp") 0 0 / 100% 100% no-repeat;
}
.mock-screen {
	position: absolute; left: 0; top: 0; width: 278px; height: 608px;
	transform-origin: 0 0; transform: matrix3d(0.774320,0.190308,0,-0.00019698,-0.417974,0.741867,0,-0.00005569,0,0,1,0,246.3307,0.9126,0,1);
	font-size: 16px;
	display: flex; flex-direction: column;
	overflow: hidden;
	background: #fff;
	color: var(--k-ink);
	text-align: left;
}
/* shadows made for the dirt background: a soft cast shadow shaped like the phone, thrown
   down and to the right, and a tight dark contact shadow under its lowest corner. Both
   multiply the dirt colour. */
.mock-shadow {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url("/static/img/mockup-phone-shadow.webp") 0 0 / 100% 100% no-repeat;
	opacity: 0.8; mix-blend-mode: multiply; filter: blur(16px);
	transform: translate(64px, 30px);
}
.mock-contact {
	position: absolute; left: 130px; top: 539px; width: 170px; height: 24px; z-index: 0; pointer-events: none;
	background: radial-gradient(ellipse, #120703, rgba(18, 7, 3, 0) 70%); opacity: 0.85; mix-blend-mode: multiply; filter: blur(4px);
	transform: rotate(-8deg);
}
.mock svg { display: block; fill: none; }
.app-status { display: flex; justify-content: space-between; padding: 1.7em 3em 0; font-size: 0.7em; font-weight: 700; color: var(--k-ink); position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
.app-status-dots { display: flex; gap: 2px; align-items: flex-end; }
.app-status-dots i { width: 3px; background: var(--k-ink); border-radius: 1px; }
.app-status-dots i:nth-child(1) { height: 4px; }
.app-status-dots i:nth-child(2) { height: 7px; }
.app-status-dots i:nth-child(3) { height: 10px; }

.app-banner {
	padding: 2.9em 1.1em 1.2em;
	background: #fff;
	color: var(--k-ink);
	border-bottom: 1px solid #e2e8f0;
	display: grid; gap: 0.1em;
}
.app-brand { font-size: 1.75em; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--k-accent-deep); }
.app-tagline { font-size: 0.72em; color: #64748b; }
.app-search {
	margin-top: 0.7em; display: flex; align-items: center; gap: 0.5em;
	padding: 0.5em 0.75em; border-radius: 0.8em;
	background: rgba(255, 255, 255, 0.95); color: #64748b; font-size: 0.72em;
}
.app-search svg { width: 0.95em; height: 0.95em; }

.app-list { list-style: none; margin: 0; padding: 1em 0.8em; display: grid; gap: 0.8em; flex: 1; align-content: start; }
.app-row {
	display: grid; grid-template-columns: auto 1fr auto; min-height: 4.6em; gap: 0.6em; align-items: center;
	padding: 0.85em 0.7em; border-radius: 1em; background: #fff; border: 1px solid #e2e8f0;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
	opacity: 0; animation: row-in 0.6s ease forwards;
}
.app-row:nth-child(2) { animation-delay: 0.15s; }
.app-row:nth-child(3) { animation-delay: 0.3s; }
.app-avatar { width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; color: #fff; overflow: hidden; }
.app-avatar svg { width: 1.5em; height: 1.5em; fill: currentColor; align-self: end; }
.a1, .a2, .a3 { background: #8b5cf6; }
.app-info { display: grid; gap: 0.05em; min-width: 0; }
.app-info strong { font-size: 0.78em; }
.app-machine { font-size: 0.7em; color: #475569; }
.app-status-tag { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.64em; font-weight: 600; color: #15803d; }
.app-status-tag i { width: 0.4em; height: 0.4em; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.app-tile { --tile: #eff6ff; width: 2.9em; height: 2.9em; border-radius: 0.8em; background: var(--tile); color: var(--k-accent-deep); display: grid; place-items: center; }
.app-tile svg { width: 2.1em; height: 2.1em; }

.app-tabs { display: flex; justify-content: space-around; padding: 0.65em 1.4em 1.35em; background: #fff; border-top: 1px solid #e2e8f0; }
.app-tabs span { color: #94a3b8; }
.app-tabs .on { color: var(--k-accent-deep); }
.app-tabs svg { width: 1.2em; height: 1.2em; }
.app-tabs svg [stroke] { stroke: currentColor; }
.app-tabs span svg { fill: currentColor; }

.app-stats { margin-top: 0.8em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.app-stats span { display: grid; padding: 0.4em 0.2em; border-radius: 0.7em; background: #eff6ff; color: #475569; font-size: 0.6em; text-align: center; }
.app-stats b { font-size: 1.58em; line-height: 1.2; color: var(--k-accent-deep); }
.app-status-tag.use { color: #1d4ed8; }
.app-status-tag.use i { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22); }
.app-add {
	margin: 0 0.8em 0.8em; padding: 0.65em; border-radius: 0.9em; text-align: center;
	background: var(--k-ink); color: #fff; font-size: 0.75em; font-weight: 700;
}
.app-add span { display: inline-block; margin-right: 0.25em; color: #93c5fd; font-size: 1.27em; line-height: 1; }

/* page: dirt background */
body:has(.construccion) {
	overflow-x: clip;
	--bg: #3b2415; --surface: #ffffff; --text: #ffffff; --muted: #f1e6dc; --border: #e2e8f0;
	/* dirt photo (static/img/tierra.webp); the dark veil is the gradient in the Próximamente block at the end */
	background: url("/static/img/tierra.webp") center / cover no-repeat #3b2415;
	color: #fff;
}
.construccion-copy { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 3px 22px rgba(0, 0, 0, 0.6); }
.construccion-copy p { color: #fff; }
.construccion-copy { position: relative; z-index: 1; }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.app-row { animation: none; opacity: 1; }
}

/* ===== Konex · Próximamente (mobile-first) ===== */
.construccion-copy{--kx-amber:#F5A623;--kx-ink:#14110B;--kx-text:#D4D7DD;--kx-muted:#9CA3AF;
  width:100%;max-width:36rem;font-family:Barlow,system-ui,sans-serif;text-align:left}
body:has(.construccion){background-image:
  linear-gradient(180deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.78) 55%,rgba(8,8,10,.55) 100%),
  url("/static/img/tierra.webp")}
/* The page scrolls (the viewport scrolls, not the body) whenever the content is taller than the
   screen: always on mobile, and on short laptop screens. On a tall desktop the section is exactly
   one screen (min-height). overflow-x stays clipped so the phone never adds a sideways scroll. */
html:has(.construccion),body:has(.construccion){height:auto}
html:has(.construccion){overflow-y:auto}
body:has(.construccion){overflow-x:clip;overflow-y:visible}
.construccion{height:auto;min-height:100dvh}
/* Clip sideways overflow on the full-width <main>, not on .construccion: that section is narrower than the
   window on wide screens (max-width 74rem), and clipping there cut the phone's cast shadow in a hard line. */
body:has(.construccion) .container{overflow-x:clip}
@media (max-width:51.99rem){
  .construccion{padding:2rem 1.25rem 2.5rem;gap:2rem;align-content:start}
}
.construccion-copy .construccion-logo{width:88px;height:auto;margin:0}
.kx-eyebrow{display:flex;align-items:center;gap:10px;margin:22px 0 12px;color:var(--kx-amber);
  font:500 11.5px/1 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.kx-eyebrow::before{content:"";width:22px;height:2px;background:var(--kx-amber)}
.construccion-copy h1{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;
  font-size:clamp(2.6rem,12.5vw,3.4rem);line-height:.92;text-transform:uppercase;letter-spacing:0;
  color:#fff;margin:0 0 16px;text-align:left}
.construccion-copy h1 span{display:block;color:rgba(255,255,255,.55)}
.construccion-copy .kx-sub{color:var(--kx-text);font-size:17px;line-height:1.5;margin:0 0 24px;max-width:30em;text-align:left}
.kx-feat{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 26px;padding:0;list-style:none}
.kx-feat li{display:grid;grid-template-columns:2.25rem 1fr;column-gap:4px;border-top:1px solid rgba(255,255,255,.18);padding:12px 0}
.kx-feat li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.kx-feat small{grid-row:span 2;color:var(--kx-amber);font:500 12px/1.6 'JetBrains Mono',monospace}
.kx-feat b{color:#fff;font-weight:600;font-size:16px;line-height:1.3}
.kx-feat span{color:var(--kx-muted);font-size:15px;line-height:1.4}
.kx-form{display:flex;flex-direction:column;gap:8px;max-width:470px}
.kx-form input{width:100%;box-sizing:border-box;background:rgba(10,12,18,.75);border:1px solid rgba(255,255,255,.28);
  border-radius:4px;outline:0;color:#fff;font:400 16px Barlow,system-ui;padding:15px 16px}
.kx-form input:focus{border-color:var(--kx-amber)}
.kx-form input::placeholder{color:#7C828D}
.kx-form button{border:0;border-radius:4px;background:var(--kx-amber);color:var(--kx-ink);
  font:600 16px Barlow,system-ui;padding:15px 22px;cursor:pointer}
.kx-form button:hover{background:#FFB938}
.kx-form button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.construccion-copy .kx-note{color:#A3A9B3;font-size:13.5px;margin:12px 0 0;text-align:left}
@media (min-width:26rem){
  .kx-form{flex-direction:row;gap:0;border:1px solid rgba(255,255,255,.28);border-radius:4px;background:rgba(10,12,18,.75)}
  .kx-form:focus-within{border-color:var(--kx-amber)}
  .kx-form input{border:0;background:transparent;flex:1;min-width:0}
  .kx-form button{border-radius:0 3px 3px 0;white-space:nowrap}
}
@media (min-width:52rem){
  body:has(.construccion){background-image:
    linear-gradient(90deg,rgba(8,8,10,.9) 0%,rgba(8,8,10,.72) 48%,rgba(8,8,10,.3) 100%),
    url("/static/img/tierra.webp")}
  .construccion-copy{max-width:580px}
  .construccion-copy .construccion-logo{width:120px}
  .kx-eyebrow{font-size:13px;margin:28px 0 14px}
  .kx-eyebrow::before{width:28px}
  .construccion-copy h1{font-size:clamp(3.25rem,6.2vw,5.25rem);margin-bottom:22px}
  .construccion-copy .kx-sub{font-size:19px;margin-bottom:32px}
  .kx-feat{grid-template-columns:repeat(3,1fr);gap:16px;max-width:470px;margin-bottom:34px}
  .kx-feat li{display:block;padding:14px 0 0}
  .kx-feat li:last-child{border-bottom:0}
  .kx-feat small,.kx-feat b{display:block;margin-bottom:6px}
  .kx-feat b{font-size:17px}
  .construccion-copy .kx-note{font-size:14px}
}
/* just above 52rem the phone is wider than its column and leans left over the copy: keep the copy clear of it */
@media (min-width:52rem) and (max-width:63.99rem){
  .construccion-copy{padding-right:1.5rem}
}
@keyframes kx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.mock-wrap{animation:kx-float 5s ease-in-out infinite;will-change:transform}
@media (prefers-reduced-motion:reduce){.mock-wrap{animation:none}}

/* waitlist feedback (after the submit) */
.construccion-copy .kx-done{margin:0;max-width:470px;color:var(--kx-amber);font:600 18px/1.4 Barlow,system-ui,sans-serif;text-align:left}
.construccion-copy .kx-error{margin:10px 0 0;max-width:470px;color:#FF9C94;font-size:14px;text-align:left}
.construccion-copy .kx-error[hidden]{display:none}
/* honeypot: out of sight and out of the tab order; only bots fill it in */
.kx-form .kx-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}