/* Zenith para la web — la capa que pone northlanestudio.dev en el sistema de
   la familia. Se carga DESPUES de northlane.css y del CSS propio de cada
   pagina, y antes de account.css no importa (solo toca tokens que comparte).

   Idea: el sitio se lee limpio y grande. Titulares enormes y centrados,
   mucho aire, una sola columna de lectura, tarjetas grandes de tono (sin
   lineas), barra de navegacion fina y de vidrio. Y la firma de Zenith: luz
   sobre grafito, el sol calido como unico color, el cielo segun la hora.

   Requiere /zenith/zenith.css antes (copia de zenith/ via sync.js). */

/* --- tokens: northlane -> zenith ------------------------------------------ */

:root {
  --t1: var(--zn-t1);
  --t2: var(--zn-t2);
  --t3: var(--zn-t3);
  --bg: var(--zn-ink-1);
  --bg-elev: var(--zn-ink-2);
  --bg-deep: var(--zn-ink-0);
  /* Indicadores en blanco (2026-10-14): el sol queda para el sol. */
  --live: var(--zn-live);
  --ok: var(--zn-live);
  --hairline: var(--zn-live);

  --radius-sm: var(--zn-radius);
  --radius: var(--zn-radius-lg);
  --radius-lg: var(--zn-radius-xl);

  --font-main: var(--zn-font);
  --font-mono: var(--zn-mono);
  --ease: var(--zn-ease);
  --ease-in-out: var(--zn-ease-in-out);
  --dur-1: var(--zn-dur-1);
  --dur-2: var(--zn-dur-2);
  --dur-3: var(--zn-dur-3);
  --dur-4: var(--zn-dur-4);

  --nav-h: 52px;
  --maxw: 1080px;
  --sec-pad: 160px;
}

body { font-family: var(--zn-font); letter-spacing: -0.011em; background: var(--zn-ink-1); }
::selection { background: var(--zn-live); color: var(--zn-ink-0); }

/* --- fondo: fuera la grilla de planos, entra el cielo ---------------------- */

.site-grid, .site-rails, .cm { display: none !important; }
.site-bg { background: var(--zn-ink-1); }
.zn-sky { z-index: -1; }
/* el sol en el cenit, arriba a la derecha de la primera pantalla */
.site-bg::before {
  content: '';
  position: absolute;
  top: -260px; right: -160px;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--zn-sun) 16%, transparent), transparent 62%);
}
/* el progreso de lectura: una linea de 1px en el borde de abajo de la barra
   de navegacion (no pegada al borde de la ventana), grafito claro y con el
   sol solo en la punta, que es "donde estas ahora". */
.scroll-progress {
  top: var(--nav-h); height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--zn-t1) 22%, transparent) 70%, var(--zn-live));
  box-shadow: none;
}

/* --- navegacion: fina y de vidrio ------------------------ */

.nav {
  background: color-mix(in srgb, var(--zn-ink-1) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0 !important;
}
.nav.scrolled, html.menu-open .nav { background: color-mix(in srgb, var(--zn-ink-1) 80%, transparent); }
.brand { font-size: var(--zn-fs-lg); font-weight: 600; }
.brand img { width: 24px; height: 24px; }
.nav-links a {
  font-family: var(--zn-font); font-size: var(--zn-fs-base);
  letter-spacing: 0; color: var(--zn-t2);
  background: none !important; padding: 7px 11px;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--zn-t1); }
.mobile-panel { background: var(--zn-ink-1); }
.mobile-panel a:not(.btn) { border-bottom: 0; padding: 14px 0; font-size: var(--zn-fs-2xl); }
.mobile-panel a span { display: none; }

/* --- botones: pildoras ------------------------------------------------------- */

.btn { height: 44px; padding: 0 22px; border-radius: 999px; font-size: var(--zn-fs-lg); font-weight: 500; }
.btn-sm { height: 30px; padding: 0 14px; font-size: var(--zn-fs-base); }
.btn-primary { background: var(--zn-t1); color: var(--zn-ink-0); }
.btn-primary:hover { transform: none; background: #ffffff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--zn-live) 22%, transparent); }
.btn-ghost { border: 0; background: var(--zn-ink-3); }
.btn-ghost:hover { background: color-mix(in srgb, var(--zn-ink-3) 60%, #3a3a3a); }

/* --- estados: el sol marca lo vivo ----------------------------------------- */

.status { font-family: var(--zn-font); font-size: var(--zn-fs-base); letter-spacing: 0; text-transform: none; }
.status.is-live i, .badge .dot, .tl.is-now .tl-node {
  background: radial-gradient(circle at 40% 35%, var(--zn-sun-core), var(--zn-sun));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zn-sun) 18%, transparent), 0 0 10px var(--zn-sun-glow);
  border: 0;
}
.plat { font-family: var(--zn-font); font-size: var(--zn-fs-base); letter-spacing: 0; }
.plat.is-on::before { background: var(--zn-live); box-shadow: 0 0 8px var(--zn-live-glow); }
.tl-tag { color: var(--zn-live); border-color: color-mix(in srgb, var(--zn-live) 40%, transparent); }
.tile { border: 0; background: var(--zn-ink-3); border-radius: var(--zn-radius); }

/* --- secciones: centradas, con aire, sin lineas ------------------------------ */

section + section::before,
section + section > .wrap::before,
section + section > .wrap::after { display: none !important; }

.sec-head { margin: 0 auto 72px; max-width: 820px; text-align: center; }
.sec-label {
  justify-content: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--zn-font); font-size: var(--zn-fs-lg); font-weight: 600;
  letter-spacing: -0.01em; text-transform: none; color: var(--zn-t2);
}
.sec-num, .sec-rule { display: none; }
/* el sol en lugar del numero de seccion */
.sec-label::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 35%, var(--zn-sun-core), var(--zn-sun));
  box-shadow: 0 0 10px var(--zn-sun-glow);
}
.sec-title { display: block; }
.sec-title h2 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  font-weight: 700; line-height: 1.05; letter-spacing: var(--zn-track-title);
}
.sec-title p {
  max-width: 60ch; margin: 22px auto 0;
  font-size: 19px; line-height: 1.5; color: var(--zn-t2);
}

/* --- hero ------------------------------------------------------------------- */

.hero { padding-top: calc(var(--nav-h) + 120px); text-align: center; }
.hero-copy { max-width: 920px; margin: 0 auto; }
.badge {
  border: 0; border-radius: 999px; background: var(--zn-ink-2);
  font-family: var(--zn-font); font-size: var(--zn-fs-md); letter-spacing: 0; padding: 7px 14px;
}
.hero-title {
  margin: 26px 0 26px;
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 1.0; letter-spacing: -0.045em;
}
.hero-title .dim {
  background: var(--zn-silver);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.hero-sub .lede { max-width: 52ch; font-size: 21px; line-height: 1.45; color: var(--zn-t2); }
.hero-actions { justify-content: center; }
.hero .frame { margin-top: 88px; text-align: left; }

/* metricas: cifras grandes, centradas, sin reglas */
.metrics { margin-top: 112px; border-top: 0; text-align: center; gap: 24px; }
.metric, .metric:first-child { padding: 0; border: 0 !important; }
.metric dt { font-family: var(--zn-font); font-size: var(--zn-fs-md); letter-spacing: 0; text-transform: none; color: var(--zn-t2); }
.metric-n { font-size: clamp(2.8rem, 5vw, 4rem); font-weight: 700; }
.metric-d { margin: 0 auto; font-size: 14px; color: var(--zn-t3); }

/* --- tarjetas: tono y espacio, no bordes --------------------------------------- */

.principles {
  gap: 16px; border: 0; background: none; overflow: visible; border-radius: 0;
}
.principle, .principle:first-child {
  border: 0 !important;
  border-radius: var(--zn-radius-xl);
  background: var(--zn-ink-2);
  padding: 32px 30px 36px;
}
.principle::before { display: none; }
.principle:hover { background: var(--zn-ink-3); }
.pr-n { display: none; }
.pr-top { margin-bottom: 28px; }
.principle h3 { font-size: 19px; font-weight: 600; }
.principle p { font-size: 15px; line-height: 1.55; }

.craft { border-top: 0; display: grid; gap: 12px; }
.craft-row {
  border-bottom: 0; border-radius: var(--zn-radius-xl);
  background: var(--zn-ink-2); padding: 28px 30px;
}
.craft-row:hover { background: var(--zn-ink-3); }
.craft-n { font-family: var(--zn-font); color: var(--zn-t3); }

.timeline::before { background: var(--zn-ink-3); }
.tl-node { border-color: var(--zn-ink-3); }
.tl-when { font-family: var(--zn-font); letter-spacing: 0; text-transform: none; font-size: var(--zn-fs-md); }

.contact {
  border: 0; border-radius: var(--zn-radius-xl);
  background: var(--zn-ink-2); padding: 72px;
}
.contact::before { display: none; }
.contact h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: var(--zn-track-title); }
.contact-list { border: 0; background: var(--zn-ink-1); border-radius: var(--zn-radius-lg); }
.contact-list > div { border-top-color: var(--zn-ink-2); }
.contact-list dt { font-family: var(--zn-font); font-size: var(--zn-fs-sm); letter-spacing: 0; text-transform: none; }

/* --- pie: chico y ordenado, con la firma ----------------------------------- */

.footer { background: var(--zn-ink-0); border-top: 0; padding: 56px 0 28px; font-size: var(--zn-fs-base); }
.footer-col h4 { font-family: var(--zn-font); font-size: var(--zn-fs-base); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--zn-t1); }
.footer-col a, .footer-col .is-soon { font-size: var(--zn-fs-base); font-family: var(--zn-font); }
.footer-bottom { border-top: 1px solid var(--zn-ink-2); font-family: var(--zn-font); font-size: var(--zn-fs-base); letter-spacing: 0; }
.zn-sign {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--zn-mono); font-size: var(--zn-fs-xs);
  letter-spacing: var(--zn-track-label); text-transform: uppercase; color: var(--zn-t3);
}

/* --- aparicion: mas lenta y mas suave ------------------------ */

.js .reveal { transform: translateY(28px); }
.reveal { transition-duration: 0.9s; }

@media (max-width: 920px) {
  :root { --sec-pad: 120px; }
  .contact { padding: 48px 32px; }
}
@media (max-width: 720px) {
  :root { --sec-pad: 96px; }
  .hero { padding-top: calc(var(--nav-h) + 64px); }
  .hero-sub .lede, .sec-title p { font-size: 17px; }
  .principles { gap: 12px; }
  .principle:nth-child(n+2) { border-top: 0 !important; }
  .metrics { margin-top: 72px; row-gap: 40px; }
  .contact { padding: 32px 22px; }
}

/* =========================================================================
   Tablas y paneles de pagina: mismo criterio (tono, aire, sin lineas)
   ========================================================================= */

/* registro de proyectos (home) */
.index { border: 0; background: var(--zn-ink-2); border-radius: var(--zn-radius-xl); box-shadow: var(--zn-shadow-3); }
.index-bar { border-bottom: 0; background: none; height: 52px; padding: 0 24px; font-family: var(--zn-font); font-size: var(--zn-fs-base); letter-spacing: 0; }
.ix-row { border-top: 0; margin: 0 10px; padding: 0 18px; border-radius: var(--zn-radius-lg); }
.ix-head { font-family: var(--zn-font); font-size: var(--zn-fs-sm); letter-spacing: 0; text-transform: none; }
.ix-id, .nl-id { font-family: var(--zn-font); font-size: var(--zn-fs-base); letter-spacing: 0; }
.ix-prod small { font-family: var(--zn-font); font-size: var(--zn-fs-base); letter-spacing: 0; text-transform: none; }
.ix-row.is-live { background: var(--zn-ink-3); }
a.ix-row:hover { background: color-mix(in srgb, var(--zn-ink-3) 70%, #333); }
.index-foot { border-top: 0; background: none; padding: 16px 28px 20px; font-family: var(--zn-font); font-size: var(--zn-fs-base); letter-spacing: 0; }

.work-card, .bench-card, .fields {
  border: 0 !important; border-radius: var(--zn-radius-xl); background: var(--zn-ink-2);
}
.work-card::before { display: none; }
.wc-main h3 span { font-family: var(--zn-font); font-size: var(--zn-fs-md); letter-spacing: 0; text-transform: none; }
.fields .field { border: 0 !important; }

/* Free vs Pro (Solaris) */
.compare { border: 0; border-radius: var(--zn-radius-xl); background: var(--zn-ink-2); padding: 10px; }
.compare-head { border-bottom: 0; background: none; padding: 16px 20px 10px; }
.compare-col-label { font-family: var(--zn-font); font-size: var(--zn-fs-md); font-weight: 600; letter-spacing: 0; text-transform: none; }
.compare-group {
  margin-top: 14px; padding: 10px 20px 6px; border: 0; background: none;
  font-family: var(--zn-font); font-size: var(--zn-fs-lg); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--zn-t1);
}
.compare-row { border-top: 0; border-radius: var(--zn-radius); padding: 11px 20px; }
.compare-row:hover { background: var(--zn-ink-3); }
.compare-row > span:first-child { font-size: 14px; }
.compare-row .part { font-family: var(--zn-font); font-size: var(--zn-fs-base); letter-spacing: 0; }

.price-card, .sync-block {
  border: 0; border-radius: var(--zn-radius-xl); background: var(--zn-ink-2);
}
.price-card::before, .sync-block::before { display: none; }
.price-tag, .sync-block-tag, .pro-unlocks-title, .price-note, .plan-per {
  font-family: var(--zn-font) !important; letter-spacing: 0 !important; text-transform: none !important;
}
.price-tag, .sync-block-tag { border: 0; background: var(--zn-ink-3); border-radius: 999px; padding: 4px 10px; font-size: var(--zn-fs-base); }
.pro-unlocks-title { font-size: var(--zn-fs-md); font-weight: 600; color: var(--zn-t1); }
.pro-plans .plan { border: 0; border-radius: var(--zn-radius-lg); background: var(--zn-ink-3); }
.pro-plans .plan-badge {
  background: var(--zn-live); color: var(--zn-ink-0); border-radius: 999px;
  font-family: var(--zn-font); letter-spacing: 0; text-transform: none; font-size: var(--zn-fs-sm);
}
.price-points .icon, .sync-block-points .icon { stroke: var(--zn-live); }
.sync-side { border-left: 0; padding-left: 0; }

/* temas (Solaris) */
.theme-swatches {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  border: 0; background: none; overflow: visible;
}
.theme-swatch, .theme-swatches .theme-swatch {
  border: 0 !important; border-radius: var(--zn-radius-lg);
  background: var(--zn-ink-2); padding: 20px;
}
.theme-swatch:hover { background: var(--zn-ink-3); }
.theme-swatch.active { background: var(--zn-ink-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zn-live) 55%, transparent); }
.theme-swatch.active::before { display: none; }
.theme-swatch span { font-family: var(--zn-font); font-size: var(--zn-fs-md); letter-spacing: 0; }
.theme-swatch small { display: block; margin-top: 3px; font-size: var(--zn-fs-base); color: var(--zn-t3); }
.swatch-dots i { border-radius: 50%; }
.theme-preview { border: 0; border-radius: var(--zn-radius-xl); box-shadow: var(--zn-shadow-3); }
.theme-preview .tp-title { font-family: var(--zn-font); letter-spacing: 0; text-transform: none; font-size: var(--zn-fs-md); }
.theme-preview .tp-cover { border-radius: var(--zn-radius); }

/* =========================================================================
   Piezas para contar Zenith en la web
   ========================================================================= */

.zn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.zn-card {
  display: flex; flex-direction: column;
  min-height: 300px; padding: 30px;
  border-radius: var(--zn-radius-xl); background: var(--zn-ink-2);
  overflow: hidden;
}
.zn-card.wide { grid-column: span 2; }
.zn-card h3 { margin-top: auto; padding-top: 28px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.zn-card p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--zn-t2); }
.zn-card .zn-label {
  font-family: var(--zn-mono); font-size: var(--zn-fs-xs);
  letter-spacing: var(--zn-track-label); text-transform: uppercase; color: var(--zn-t3);
}

/* muestras dentro de las tarjetas */
.zn-inks { display: flex; gap: 10px; margin-top: 22px; }
.zn-inks i { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.zn-big-sun {
  width: 64px; height: 64px; margin-top: 18px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--zn-sun-core), var(--zn-sun));
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--zn-sun) 12%, transparent), 0 0 60px var(--zn-sun-glow);
}
.zn-skies { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; }
.zn-skies span {
  height: 88px; padding: 10px; border-radius: var(--zn-radius-lg);
  display: flex; align-items: flex-end;
  font-size: var(--zn-fs-base); color: var(--zn-t2);
}
.zn-skies .dawn { background: linear-gradient(180deg, rgba(255, 170, 120, 0.28), var(--zn-ink-1)); }
.zn-skies .day { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), var(--zn-ink-1)); }
.zn-skies .dusk { background: linear-gradient(180deg, rgba(255, 150, 70, 0.3), var(--zn-ink-1)); }
.zn-skies .night { background: linear-gradient(180deg, rgba(70, 90, 170, 0.34), var(--zn-ink-1)); }
html[data-zn-time='dawn'] .zn-skies .dawn,
html[data-zn-time='day'] .zn-skies .day,
html[data-zn-time='dusk'] .zn-skies .dusk,
html[data-zn-time='night'] .zn-skies .night { color: var(--zn-t1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zn-live) 60%, transparent); }
.zn-type {
  margin-top: 10px; font-size: 96px; font-weight: 600; line-height: 1; letter-spacing: -0.05em;
  background: var(--zn-silver); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zn-plate { width: 112px; height: 112px; margin-top: 14px; border-radius: var(--zn-radius-icon); box-shadow: var(--zn-shadow-2); }
.zn-releases { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.zn-releases span { padding: 6px 12px; border-radius: 999px; background: var(--zn-ink-3); font-size: var(--zn-fs-md); color: var(--zn-t3); }
.zn-releases span.is-now { color: var(--zn-ink-0); background: var(--zn-live); font-weight: 600; }

/* tres puntos debajo de los temas (Solaris) */
.zn-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.zn-points > div { padding: 26px; border-radius: var(--zn-radius-xl); background: var(--zn-ink-2); }
.zn-points h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 17px; font-weight: 600; }
.zn-points p { font-size: 14px; line-height: 1.55; color: var(--zn-t2); }

@media (max-width: 920px) {
  .zn-cards, .zn-points { grid-template-columns: minmax(0, 1fr); }
  .zn-card.wide { grid-column: auto; }
  .zn-card { min-height: 0; }
  .ix-row { margin: 0 6px; }
}

/* --- correcciones 2026-10-13 ----------------------------------------------- */

/* En los paneles de dos columnas (Download, Say hello) el texto va alineado a
   la izquierda: la etiqueta tambien, no centrada sobre la nada. */
.contact .sec-label { justify-content: flex-start; margin-bottom: 18px; }

/* Lo que quedaba en mono pasa a Geist; el mono queda solo para .zn-label y
   la firma (usan --zn-mono directo). */
:root { --font-mono: var(--zn-font); }
.pill {
  border: 0; border-radius: 999px; background: var(--zn-ink-3);
  font-size: var(--zn-fs-base); letter-spacing: 0; padding: 6px 12px;
}
.pill .dot { background: var(--zn-live); box-shadow: 0 0 8px var(--zn-live-glow); }
.download-panel .contact-copy > .release-note,
.download-panel .contact-copy > .smartscreen-note,
.platform-list dd { font-size: var(--zn-fs-md); letter-spacing: 0; }