/* SSCG — base del sitio de la marca (sscg.tech).
   Colores y letras del manual de marca de las apps (SG/marca/manual-marca-apps.html):
   negro puro, tinta #F2F2F2, verde de ejercicio como acento. Archivo para el texto del sitio;
   JetBrains Mono solo adentro de las pantallas de las apps ([data-ui]). */

/* La letra de los nombres en las apps: el mismo archivo que usa Lapso (Archivo Condensed Black) */
@font-face { font-family: "Archivo Lapso"; src: url("fuentes/ArchivoCondensed-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
:root {
  /* Marca SSCG (manual en claude.ai/artifact/RH31hTDQnHi6wR9MMngkj3): carbón, tinta, amarillo y celeste. */
  --bg: #0d1117;            /* fondo / carbón */
  --surface: #161b22;       /* fondo-elevado */
  --surface-2: #1f2630;
  --line: #30363d;
  --ink: #f0f6fc;           /* tinta */
  --muted: #9da7b3;         /* tinta-suave */
  --faint: #6e7681;
  --brand: #facc15;         /* amarillo: acción principal, visor y barra del logo */
  --on-brand: #0d1117;
  --link: #22d3ee;          /* celeste: signos < >, enlaces y foco */

  /* Colores de las pantallas de Lapso (solo adentro de [data-ui]) */
  --accent: #c8ff00;
  --accent-ink: #000;
  --rest: #00e5ff;
  --yellow: #ffea00;
  --orange: #ff8a00;
  --red: #ff3b3b;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --app-font: "Archivo Lapso", "Archivo", "Helvetica Neue", Arial, sans-serif;   /* letra de las apps, solo en sus pantallas */

  --m: clamp(16px, 2.4vw, 32px);
  --gap: clamp(120px, 14vw, 220px);

  /* cinco tamaños */
  --t-display: clamp(34px, 4.6vw, 72px);
  --t-statement: clamp(22px, 2.2vw, 32px);
  --t-lead: clamp(18px, 1.4vw, 21px);
  --t-body: 17px;
  --t-small: 14px;

  --r-s: 6px;
  --r-m: 12px;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.7, 0, .2, 1);
  --t-press: 120ms;
  --t-hover: 180ms;
}
/* Las pantallas de las apps usan su propia letra */
[data-ui], .ip, .aw, .vis, .glyph, .hero__name { --font: var(--app-font); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--brand); color: var(--on-brand); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— Barra de arriba ——— */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 56px; padding: 0 var(--m);
  display: flex; align-items: center; gap: 28px;
  background: var(--bg);
  font-size: var(--t-small);
  transition: transform 300ms var(--ease-out);
}
.bar.is-hidden { transform: translateY(-100%); }
.bar__mark { margin-right: auto; display: flex; align-items: center; }
.bar__mark img { width: 120px; height: auto; display: block; }
.bar__links { display: flex; gap: 28px; }
.bar a.link { text-decoration: none; color: var(--muted); transition: color var(--t-hover) ease; }
.bar a.link:hover, .bar a.link[aria-current] { color: var(--ink); }
.lang { background: none; border: 0; padding: 6px 2px; cursor: pointer; color: var(--muted); font-size: var(--t-small); }
.lang b { color: var(--ink); font-weight: 700; }
.lang:hover { color: var(--ink); }
@media (max-width: 860px) { .bar__links { display: none; } .bar { gap: 16px; } }

/* ——— Botones ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--r-s);
  background: var(--brand); color: var(--on-brand);
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(.96); }
.btn--small { min-height: 36px; padding: 0 16px; font-size: 15px; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #fde047; }
  .btn--ghost:hover { background: var(--surface); }
}
.tlink { color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .22em; text-decoration-thickness: .08em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.tlink:hover { text-decoration-color: currentColor; }

/* ——— Entradas al hacer scroll (el contenido se ve igual sin script) ——— */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-in] { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  html.js [data-in].is-in { opacity: 1; transform: none; }
}

/* Firma de las apps: "una app de <sscg/>" */
.sig { font-family: var(--mono); font-weight: 700; color: var(--ink); white-space: nowrap; }
.sig .lt { color: var(--link); } .sig .sl { color: var(--brand); }