/* ============================================================
   Base — tipografía, layout, capítulos, utilidades
   ============================================================ */

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-base);
  overflow-x: hidden;
}

/* ---- CONTAINER ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---- SECCIONES / CAPÍTULOS ----
   El ritmo de Trionn: alterna oscuro y claro.
   Oscuro = cockpit (producto). Claro = editorial (relato).
   Los capítulos claros son "sheets": hojas redondeadas que
   flotan sobre el negro, como cartas apoyadas en la mesa.   */
.section {
  position: relative;
  padding-block: var(--section-gap);
}

.chapter--dark {
  background: var(--c-bg);
  color: var(--c-text);
}

.sheet {
  position: relative;
  background: linear-gradient(0deg, var(--c-light-bot) 0%, var(--c-light-top) 55%);
  color: var(--c-light-text);
  border-radius: var(--sheet-r);
  margin-inline: var(--sheet-gap);
  overflow: clip;
}

.sheet .section__eyebrow { color: var(--c-light-dim); }
.sheet .lead { color: var(--c-light-muted); }
.sheet .u-text-dim { color: var(--c-light-dim); }

/* ---- TIPOGRAFÍA ---- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;          /* nunca bold: el peso lo da el tamaño */
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); letter-spacing: var(--ls-base); }

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
  max-width: 46ch;
  letter-spacing: var(--ls-base);
}

.mono, .u-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* texto contorneado, para las palabras gigantes */
.txt-outline {
  -webkit-text-stroke: 1.5px currentColor;
  color: transparent !important;
}

.u-italic { font-style: italic; }
.u-text-dim { color: var(--c-text-dim); }
.u-text-muted { color: var(--c-text-muted); }
.u-text-accent { color: var(--c-accent); }
.u-up { color: var(--c-up); }
.u-down { color: var(--c-down); }

/* ---- SECTION HEAD ---- */
.section__head {
  margin-bottom: var(--sp-8);
  max-width: 64ch;
  overflow: visible;
  padding-left: 0.05em;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__head--center .lead { margin-inline: auto; }

.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: var(--sp-5);
}
.section__eyebrow::before {
  content: '';
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section__head h2 { margin-bottom: var(--sp-4); }

/* ---- REVEALS ----
   Cada línea vive en una máscara y sube desde abajo (SplitText).
   Sin JS, todo queda visible: la web degrada a estática legible.

   text-wrap normal a propósito: `balance` (del reset) rompe la
   medición de líneas de SplitText y deja una palabra por línea. */
[data-split], [data-chars], [data-words-scrub] { text-wrap: normal; }

[data-split], [data-chars] { visibility: hidden; }
[data-split].is-ready, [data-chars].is-ready { visibility: visible; }

.chapter--dark .lead,
.chapter--dark .stack-card__desc,
.chapter--dark .footer__brand p { line-height: 1.45; }

/* imágenes con reveal de cortina */
[data-clip] {
  overflow: hidden;
  display: block;
}
[data-clip] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- GRID MARKERS ---- */
.grid-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0.35;
  pointer-events: none;
  color: var(--c-text-dim);
}
.grid-marker::before,
.grid-marker::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.grid-marker::before { inset: 50% 0 auto 0; height: 1px; transform: translateY(-50%); }
.grid-marker::after  { inset: 0 50% 0 auto; width: 1px; transform: translateX(50%); }

/* ---- BADGE CIRCULAR GIRATORIO ---- */
.spin-badge {
  position: absolute;
  width: clamp(90px, 10vw, 140px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.8;
}
.spin-badge svg {
  width: 100%;
  height: 100%;
  animation: spin 16s linear infinite;
}
.spin-badge text {
  font-family: var(--font-mono);
  font-size: 8.2px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--c-text-dim);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
  background: var(--c-line-strong);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-text-dim); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (max-width: 700px) {
  .u-hide-mobile { display: none !important; }
}