/* Parallax Deception - landing de producto.
   Compromiso deliberado con un solo mundo visual (oscuro): es el tema
   propio de la aplicacion. Todo color se pinta explicito desde tokens,
   asi la pagina se sostiene sobre cualquier fondo del host.
   Dos hues con significado, no decorativos:
     cian  = lo real / verificado
     ambar = lo aparente / la ficcion desplegada */

:root {
  --ink:          #070b10;
  --ink-raise:    #0d141c;
  --ink-raise-2:  #111a24;
  --ink-line:     #1c2733;
  --ink-line-dim: #131c26;

  --text:       #e8eef4;
  --text-dim:   #94a6b5;
  --text-faint: #63727f;

  --real:        #22d3ee;
  --real-dim:    #12707f;
  --real-glow:   rgba(34, 211, 238, .13);
  --fiction:     #e0a33a;
  --alert:       #f85149;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wrap: 1180px;
  --rail: 172px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--real); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--real); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--font-display); margin: 0; }
h1, h2 { text-wrap: balance; }
h3 { text-wrap: pretty; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }

/* Riel de seccion: la etiqueta vive desplazada del contenido. */
.section { padding-block: clamp(66px, 8.5vw, 124px); }
.section > .wrap {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(24px, 4.5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) {
  .section > .wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rail { position: static; }
}
.rail { position: sticky; top: 82px; }
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--real);
}
.rail .note {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.75;
  color: var(--text-faint);
}
.section h2 {
  font-size: clamp(1.85rem, 3.1vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
  max-width: 24ch;
}
.section .lede { margin-top: 18px; font-size: 1.06rem; color: var(--text-dim); max-width: 64ch; }

/* Separador desfasado: dos hairlines corridas entre si. */
.rule { position: relative; height: 1px; background: var(--ink-line); }
.rule::after {
  content: "";
  position: absolute;
  left: clamp(40px, 12vw, 200px);
  right: 0;
  top: 3px;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 163, 58, .34), transparent 72%);
}

/* Barra superior */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(7, 11, 16, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line-dim);
}
.topbar > .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: .96rem; letter-spacing: -.01em; }
.brand-name span { color: var(--text-faint); font-weight: 600; }
.topnav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.topnav a { font-size: .84rem; color: var(--text-dim); font-weight: 500; }
.topnav a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 860px) { .topnav .hide-sm { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 19px;
  border: 1px solid var(--ink-line);
  background: var(--ink-raise);
  color: var(--text);
  font-family: var(--font-body); font-size: .89rem; font-weight: 500;
  border-radius: 3px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.btn:hover { text-decoration: none; border-color: var(--real-dim); background: var(--ink-raise-2); }
.btn.solid { background: var(--real); border-color: var(--real); color: #04222a; font-weight: 600; }
.btn.solid:hover { background: #55e2f6; border-color: #55e2f6; color: #04222a; }
.btn.small { padding: 8px 15px; font-size: .82rem; }

/* Heroe */
.hero { position: relative; padding-block: clamp(52px, 7vw, 96px) clamp(38px, 5vw, 64px); overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: -45% 42% 26% -32%;
  background: radial-gradient(closest-side, var(--real-glow), transparent 78%);
  pointer-events: none;
}
.hero > .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  gap: clamp(30px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero > .wrap { grid-template-columns: minmax(0, 1fr); }
  .hero-figure {
  /* Estaba como style="margin:0" en el HTML; movido aca para que la CSP
     pueda prescindir de 'unsafe-inline' en style-src. */
  margin: 0; max-width: 470px; }
}
.hero h1 {
  margin-top: 20px;
  font-size: clamp(2.45rem, 5.4vw, 4.3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .99;
  max-width: 15ch;
}
/* La palabra que carga el concepto: capa solida y su "posicion
   aparente" desplazada detras, igual que el isotipo. */
.shift { position: relative; display: inline-block; isolation: isolate; color: var(--real); }
.shift::before {
  content: attr(data-ghost);
  position: absolute;
  left: 9px; top: 7px;
  color: var(--fiction);
  opacity: .4;
  z-index: -1;
  pointer-events: none;
}
.hero .lede { margin-top: 24px; font-size: 1.14rem; line-height: 1.6; color: var(--text-dim); max-width: 54ch; }
.hero .lede strong { color: var(--text); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-figure { position: relative; }
.parallax-svg { width: 100%; height: auto; display: block; }
.parallax-svg .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  fill: var(--text-faint);
}
.parallax-svg .lbl.real { fill: var(--real); }
.parallax-svg .lbl.fic { fill: var(--fiction); }
#apparent { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.figcap {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .69rem;
  line-height: 1.8;
  color: var(--text-faint);
  max-width: 46ch;
}

.proof { border-top: 1px solid var(--ink-line-dim); border-bottom: 1px solid var(--ink-line-dim); background: linear-gradient(180deg, rgba(13, 20, 28, .72), transparent); }
.proof > .wrap {
  display: flex; flex-wrap: wrap;
  gap: 10px clamp(20px, 4vw, 42px);
  padding-block: 20px;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--text-faint);
}
.proof b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Tarjetas y grillas */
.grid { display: grid; gap: 1px; background: var(--ink-line-dim); border: 1px solid var(--ink-line-dim); margin-top: 34px; }
.grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid.g3, .grid.g2 { grid-template-columns: minmax(0, 1fr); } }
.cell { background: var(--ink); padding: clamp(22px, 2.6vw, 30px); }
.cell h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.008em; margin-bottom: 10px; }
.cell p { color: var(--text-dim); font-size: .94rem; }
.cell .kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.cell.neg h3 { color: var(--text-faint); }
.cell.neg h3::before { content: "\2014\00a0"; color: var(--alert); }

.statement {
  margin-top: 34px;
  border-left: 2px solid var(--real);
  padding: 4px 0 4px 22px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.42rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.015em;
  max-width: 54ch;
}
.statement em { font-style: normal; color: var(--real); }

/* Pasos numerados: secuencia real de la metodologia. */
.steps { margin-top: 34px; }
.step {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 20px;
  padding: 21px 0;
  border-top: 1px solid var(--ink-line-dim);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--ink-line-dim); }
.step-n { font-family: var(--font-mono); font-size: .82rem; font-weight: 500; color: var(--real); font-variant-numeric: tabular-nums; padding-top: 3px; }
.step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 5px; }
.step p { color: var(--text-dim); font-size: .93rem; max-width: 72ch; }
@media (max-width: 620px) { .step { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; } }

.cycle {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: .77rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cycle span { border: 1px solid var(--ink-line); padding: 7px 13px; color: var(--text); border-radius: 2px; }
.cycle i { color: var(--real); font-style: normal; }

/* Listas de capacidades */
.feat { display: grid; gap: 28px 34px; margin-top: 34px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .feat { grid-template-columns: minmax(0, 1fr); } }
.feat h3 {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fiction);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-line-dim);
  margin-bottom: 14px;
}
.feat li { position: relative; padding-left: 18px; margin-bottom: 11px; font-size: .93rem; color: var(--text-dim); }
.feat li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--real-dim); }
.feat li b { color: var(--text); font-weight: 600; }

/* Codigo */
pre {
  margin: 24px 0 0;
  background: var(--ink-raise);
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  padding: 20px 22px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .81rem;
  line-height: 1.72;
  color: var(--text-dim);
}
pre .k { color: var(--real); }
pre .s { color: var(--fiction); }
pre .c { color: var(--text-faint); font-style: italic; }
pre .p { color: var(--text); }
pre.cmd { color: var(--text); }
code { font-family: var(--font-mono); font-size: .88em; color: var(--text); }
.caption { margin-top: 12px; font-size: .85rem; color: var(--text-faint); max-width: 62ch; }

/* Superficies desplegables */
.surfaces { margin-top: 32px; border-top: 1px solid var(--ink-line-dim); }
.surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1.45fr);
  gap: 6px 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-line-dim);
  align-items: baseline;
}
.surface strong { font-weight: 600; font-size: .97rem; }
.surface .tag { font-family: var(--font-mono); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fiction); }
.surface p { color: var(--text-dim); font-size: .9rem; }
@media (max-width: 780px) { .surface { grid-template-columns: minmax(0, 1fr); } }

/* Limites declarados */
.limits { margin-top: 32px; display: grid; gap: 12px; }
.limit {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px;
  background: var(--ink-raise);
  border: 1px solid var(--ink-line-dim);
  border-radius: 3px;
}
.limit-mark { color: var(--fiction); font-family: var(--font-mono); font-size: .95rem; line-height: 1.55; }
.limit b { display: block; font-weight: 600; margin-bottom: 3px; }
.limit p { color: var(--text-dim); font-size: .91rem; }

/* Cierre */
.closer { border-top: 1px solid var(--ink-line-dim); background: linear-gradient(180deg, var(--ink-raise), var(--ink)); }
.closer > .wrap { padding-block: clamp(64px, 8vw, 104px); display: grid; gap: 26px; justify-items: start; }
.closer h2 { font-size: clamp(2rem, 4vw, 3.05rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.03; max-width: 18ch; }
.closer p { color: var(--text-dim); max-width: 58ch; font-size: 1.04rem; }
.closer .hero-actions { margin-top: 0; }

footer { border-top: 1px solid var(--ink-line-dim); }
footer > .wrap {
  padding-block: 30px 46px;
  display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: baseline;
  font-size: .83rem; color: var(--text-faint);
}
footer .push { margin-left: auto; }

/* Entrada orquestada, una sola vez, al cargar. */
.rise { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.22, .61, .36, 1) forwards; }
.rise.d1 { animation-delay: .07s; }
.rise.d2 { animation-delay: .14s; }
.rise.d3 { animation-delay: .22s; }
.rise.d4 { animation-delay: .3s; }
@keyframes rise { to { opacity: 1; transform: none; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; opacity: 1; transform: none; }
  #apparent { transition: none; }
}

/* Selector de idioma. Un enlace, no un control con estado: las dos versiones
   son documentos distintos, y eso es lo que hace que las dos sean indexables
   y que la pagina funcione sin JavaScript. El idioma de destino se nombra en
   su propio idioma ("English" en la version espanola), que es la convencion
   que evita el problema de tener que saber el idioma que todavia no elegiste. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .55rem;
  border: 1px solid var(--ink-line);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-decoration: none;
}

.lang-switch:hover {
  border-color: var(--real-dim);
  color: var(--real);
}

.lang-switch svg { flex: none; opacity: .8; }