@charset "UTF-8";

/* Propuesta 02 — el archivo se convierte en conocimiento accesible.
   El estado por defecto de este CSS es la composición final y legible:
   app.js y GSAP solo añaden el recorrido, nunca ocultan contenido de base. */

@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-Variable.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --porcelain: #f5f7f5;
  --ink: #122522;
  --petrol: #174f48;
  --pale: #dce7e2;
  --muted: #566762;
  --white: #fff;

  --line: rgba(18, 37, 34, .14);
  --line-strong: rgba(18, 37, 34, .3);
  --petrol-wash: #e8f0ec;
  --on-dark: #e9f0ec;
  --on-dark-muted: #a9bdb6;
  --dark-line: rgba(233, 240, 236, .2);
  --dark-accent: #8cc0b3;

  --font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(20px, 4vw, 56px);
  --header-h: 72px;
  --section: clamp(76px, 10vw, 148px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --paper-shadow: 0 1px 0 rgba(18, 37, 34, .06), 0 14px 30px -18px rgba(18, 37, 34, .35);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font: 380 16px/1.62 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
a, button, summary, input, textarea { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--pale); }

:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 { text-wrap: balance; color: var(--ink); }

h1 {
  font-size: clamp(2.4rem, 4.7vw, 4.75rem);
  font-weight: 580;
  line-height: 1.02;
  letter-spacing: -.045em;
}

h2 {
  font-size: clamp(2rem, 3.9vw, 3.5rem);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -.038em;
}

h3 {
  font-size: 1.15rem;
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: -.015em;
}

p { color: var(--muted); text-wrap: pretty; }
p + p { margin-top: 1em; }

.wrap {
  width: min(1320px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--white);
  padding: 12px 16px;
  border-radius: 8px;
}
.skip:focus { top: 10px; }

[hidden] { display: none !important; }

/* ---------- Botones y enlaces ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border: 1px solid var(--petrol);
  border-radius: 999px;
  background: var(--petrol);
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.button:hover { background: var(--ink); border-color: var(--ink); }
.button:active { transform: translateY(1px); }
.button.small { min-height: 42px; padding: 9px 18px; font-size: 13px; }
.button:disabled {
  background: #5b7d77;
  border-color: #5b7d77;
  color: var(--white);
  cursor: not-allowed;
  transform: none;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--petrol);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-thickness .15s, text-underline-offset .2s var(--ease);
}
.text-link:hover { text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Cabecera ---------- */

.preview-note {
  padding: 7px var(--gutter);
  background: var(--pale);
  color: var(--petrol);
  font-size: 12px;
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--porcelain);
  border-bottom: 1px solid var(--line);
}

.nav-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.03em;
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-mark rect { fill: var(--white); stroke: var(--ink); stroke-width: 1.4; }
.brand-mark .brand-core { fill: var(--petrol); stroke: var(--petrol); }

.header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.motion-toggle,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.motion-toggle:hover,
.menu-toggle:hover { background: var(--white); border-color: var(--ink); }

.motion-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}
.motion-icon::before,
.motion-icon::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 3px;
  height: 10px;
  border-radius: 1px;
  background: var(--petrol);
}
.motion-icon::before { left: 3px; }
.motion-icon::after { right: 3px; }
.motion-toggle[data-state="paused"] .motion-icon::before {
  left: 3px;
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent var(--petrol);
}
.motion-toggle[data-state="paused"] .motion-icon::after { display: none; }

.menu-toggle { display: none; padding-left: 12px; }
.menu-icon {
  position: relative;
  width: 14px;
  height: 10px;
  border-block: 1.5px solid currentColor;
}
.menu-icon::after {
  content: "";
  position: absolute;
  inset: 3px 0 auto;
  height: 1.5px;
  background: currentColor;
}

#navigation {
  display: flex;
  align-items: center;
  gap: 22px;
}
#navigation a:not(.button) {
  font-size: 13.5px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-block: 4px;
  transition: background-size .25s var(--ease);
}
#navigation a:not(.button):hover { background-size: 100% 1px; }

/* ---------- Hero y escena: sustituidos en V4 por src/v4.css ---------- */

/* ---------- Solución y secuencia ---------- */

.solution { padding-block: var(--section) calc(var(--section) * .7); }

.solution-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.statement {
  font-size: clamp(2.3rem, 5.4vw, 5rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.solution-problems > p { max-width: 34em; }
.problem-list { margin-top: 22px; list-style: none; border-top: 1px solid var(--line); }
.problem-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
}

.sequence {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 88px);
  margin-top: clamp(56px, 8vw, 112px);
}

.sequence-visual {
  position: sticky;
  top: calc(var(--header-h) + 3vh);
  align-self: start;
}

.seq-scene {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc((100svh - var(--header-h) - 80px) * 600 / 520));
  aspect-ratio: 600 / 520;
  border-radius: 28px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seq-caption { margin-top: 10px; font-size: 12.5px; }

.seq-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.seq-perimeter-fill { fill: var(--petrol-wash); }
.seq-perimeter { fill: none; stroke: var(--petrol); stroke-opacity: .5; stroke-width: 1.5; }
.seq-link { fill: none; stroke: var(--petrol); stroke-opacity: .45; stroke-width: 1.5; }
.seq-perm { fill: none; stroke: var(--ink); stroke-opacity: .35; stroke-width: 1.5; stroke-dasharray: 4 5; }
.seq-gate { fill: var(--white); stroke: var(--petrol); stroke-width: 1.5; }
.seq-query-path,
.seq-answer-path { fill: none; stroke: var(--petrol); stroke-width: 2; }

.seq-doc {
  position: absolute;
  left: calc(var(--x) * 1cqw);
  top: calc(var(--y) * 1cqw);
  width: 9.33cqw;
  height: 12cqw;
  padding: 1.1cqw;
  border: 1px solid var(--line-strong);
  border-radius: .9cqw;
  background: var(--white);
}
.seq-doc.n {
  border-style: dashed;
  background: transparent;
  opacity: .55;
}
.seq-doc.a { box-shadow: var(--paper-shadow); }
.seq-doc b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: max(18px, 3.4cqw);
  height: max(18px, 3.4cqw);
  border-radius: .7cqw;
  background: var(--pale);
  color: var(--petrol);
  font-size: max(10px, 1.8cqw);
  font-weight: 600;
}
.seq-hl {
  position: absolute;
  inset: -1px;
  border: 2px solid var(--petrol);
  border-radius: inherit;
  background: rgba(23, 79, 72, .08);
  opacity: 0;
}
.seq-doc.is-hit .seq-hl { opacity: 1; }

.n1 { --x: 2;     --y: 10; }
.n2 { --x: 2;     --y: 26.67; }
.n3 { --x: 12.67; --y: 26.67; }
.n4 { --x: 12.67; --y: 43.33; }
.n5 { --x: 2;     --y: 60; }
.a1 { --x: 28.33; --y: 10; }
.a2 { --x: 40.67; --y: 10; }
.a3 { --x: 53;    --y: 10; }

.seq-label {
  position: absolute;
  color: var(--muted);
  font-size: max(10px, 1.75cqw);
  line-height: 1.2;
}
.seq-label-archive { left: 2cqw; top: 74.67cqw; max-width: 22cqw; }
.seq-label-docs { left: 28.33cqw; top: 23.4cqw; color: var(--petrol); }
.seq-label-perimeter { left: 28.33cqw; top: 77.67cqw; color: var(--petrol); }

.seq-core {
  position: absolute;
  left: 35.67cqw;
  top: 40cqw;
  width: 21.33cqw;
  height: 21.33cqw;
  display: grid;
  place-items: center;
  padding: 1.5cqw;
  border-radius: 2.8cqw;
  background: var(--petrol);
  color: var(--white);
  text-align: center;
}
.seq-core b { font-size: max(10px, 2cqw); font-weight: 560; line-height: 1.2; }

.seq-user {
  position: absolute;
  left: 70.67cqw;
  top: var(--y);
  width: 29.33cqw;
  display: grid;
  justify-items: center;
  text-align: center;
}
.u1 { --y: 12cqw; }
.u2 { --y: 53.67cqw; }
.u3 { --y: 70.33cqw; }
.seq-avatar {
  width: 5.33cqw;
  height: 5.33cqw;
  min-width: 16px;
  min-height: 16px;
  margin-bottom: .6cqw;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 .7cqw var(--white), 0 0 0 calc(.7cqw + 1px) var(--line-strong);
}
.seq-user b { font-size: max(10px, 1.9cqw); font-weight: 560; line-height: 1.2; }
.seq-user small { color: var(--muted); font-size: max(9.5px, 1.7cqw); line-height: 1.3; }

.seq-query {
  position: absolute;
  left: 71.67cqw;
  top: 25cqw;
  width: 27.33cqw;
  min-height: 7.33cqw;
  display: grid;
  align-items: center;
  padding: .8cqw 1.6cqw;
  border-radius: 1.6cqw 1.6cqw 1.6cqw .4cqw;
  background: var(--ink);
  color: var(--white);
  font-size: max(9.5px, 1.75cqw);
  line-height: 1.25;
}

.seq-answer {
  position: absolute;
  left: 70.67cqw;
  top: 35.33cqw;
  width: 28.33cqw;
  min-height: 14.33cqw;
  padding: 1.4cqw 1.8cqw;
  border: 1.5px solid var(--petrol);
  border-radius: 1.6cqw;
  background: var(--white);
  box-shadow: var(--paper-shadow);
}
.seq-answer b { display: block; color: var(--petrol); font-size: max(10px, 1.8cqw); font-weight: 560; }
.seq-answer i {
  display: block;
  height: .6cqw;
  margin-top: 1cqw;
  border-radius: 1px;
  background: rgba(18, 37, 34, .12);
}
.seq-answer i + i { width: 70%; }
.seq-answer small { display: block; margin-top: 1.2cqw; color: var(--ink); font-size: max(9.5px, 1.6cqw); font-weight: 500; }

.sequence-steps { list-style: none; counter-reset: step; }
.seq-step {
  position: relative;
  padding: 26px 0 26px 30px;
  border-left: 1px solid var(--line);
}
.seq-step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 34px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--porcelain);
  box-shadow: inset 0 0 0 1.5px var(--petrol);
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.seq-step h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); letter-spacing: -.025em; }
.seq-step p { max-width: 30em; margin-top: 10px; }

/* Solo cuando la secuencia está animada: más recorrido y paso activo. */
.sequence.is-live .seq-step {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sequence.is-live .seq-step h3 { color: var(--muted); transition: color .3s var(--ease); }
.sequence.is-live .seq-step.is-active h3 { color: var(--ink); }
.sequence.is-live .seq-step.is-active::before { background: var(--petrol); transform: scale(1.35); }
.sequence.is-live .seq-step::before { top: calc(50% - 4px); }

.limits {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(32px, 5vw, 80px);
  margin-top: clamp(56px, 8vw, 104px);
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.limits h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); letter-spacing: -.025em; }
.limits ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  list-style: none;
}
.limits li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

/* ---------- Ejemplo explorable ---------- */

.example {
  padding-block: var(--section);
  background: var(--pale);
}
.example-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.example-intro { position: sticky; top: calc(var(--header-h) + 32px); }
.example-intro > p { max-width: 24em; margin-top: 20px; }

.explore { margin-top: 34px; }
.explore-title { color: var(--ink); font-size: 14px; font-weight: 500; }
.explore-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.explore-button {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--petrol);
  border-radius: 999px;
  background: transparent;
  color: var(--petrol);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.explore-button:hover { background: rgba(23, 79, 72, .08); }
.explore-button[aria-pressed="true"] { background: var(--petrol); color: var(--white); }
.explore-note {
  min-height: 5em;
  max-width: 24em;
  margin-top: 16px;
  color: var(--ink);
  font-size: 14px;
}

.example-figure { position: relative; }
.example-label {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}
.example-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}

.ex-answer {
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 30px 60px -40px rgba(18, 37, 34, .5);
}
.ex-question { padding: 24px 28px; border-bottom: 1px solid var(--line); }
.ex-question p {
  margin-top: 6px;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 450;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.ex-tag { color: var(--petrol); font-size: 13px; font-weight: 500; }
.ex-reply { padding: 22px 28px 18px; }
.ex-reply > p { margin-top: 6px; font-size: 15px; }
.ex-reply ol { margin: 12px 0 18px; padding-left: 22px; color: var(--ink); font-size: 15px; }
.ex-reply li + li { margin-top: 6px; }

.source-ref {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--petrol);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.source-ref:hover { border-color: var(--petrol); }
.doc-glyph {
  position: relative;
  width: 13px;
  height: 16px;
  flex: none;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.doc-glyph::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 4px;
  height: 5px;
  border-block: 1.5px solid currentColor;
}

.ex-reply details { margin-top: 8px; }
.ex-reply summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ex-reply details p { padding-bottom: 6px; font-size: 14px; }
.review-note {
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}

.ex-sources { display: grid; gap: 12px; }
.ex-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--ink);
  font-size: 13.5px;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ex-avatar {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
}
.ex-perimeter {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid rgba(23, 79, 72, .35);
  border-radius: 18px;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.ex-perimeter-label { color: var(--petrol); font-size: 13px; font-weight: 500; }
.ex-doc {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .35s var(--ease);
}
.ex-doc-title { color: var(--ink); font-size: 14.5px; font-weight: 560; }
.ex-doc-meta { margin-top: 2px; font-size: 12.5px; }
.ex-lines { display: block; margin-top: 10px; }
.ex-lines i {
  display: block;
  height: 5px;
  margin-top: 7px;
  border-radius: 1px;
  background: rgba(18, 37, 34, .1);
}
.ex-lines i + i { width: 76%; }
.ex-fragment {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--petrol-wash);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.45;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.ex-doc-locked {
  border-style: dashed;
  border-color: var(--line-strong);
  background: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(18, 37, 34, .045) 7px 8px), var(--white);
}

.ex-connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ex-connector path {
  fill: none;
  stroke: var(--petrol);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
}

/* Estados de la exploración (data-layer en la figura). */
.example-figure[data-layer="documentos"] .ex-perimeter {
  border-color: var(--petrol);
  background: rgba(255, 255, 255, .45);
}
.example-figure[data-layer="documentos"] .ex-perimeter .ex-doc {
  transform: translateY(-3px);
  box-shadow: var(--paper-shadow);
}
.example-figure[data-layer="documentos"] .ex-doc-locked,
.example-figure[data-layer="fuentes"] .ex-doc-proc,
.example-figure[data-layer="fuentes"] .ex-doc-locked { opacity: .45; }

.example-figure[data-layer="permisos"] .ex-user {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--petrol);
}
.example-figure[data-layer="permisos"] .ex-doc-locked {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.example-figure[data-layer="permisos"] .ex-doc-locked .ex-doc-meta { color: var(--ink); }
.example-figure[data-layer="permisos"] .ex-perimeter { border-color: var(--petrol); }

.example-figure[data-layer="fuentes"] .ex-fragment {
  background: var(--petrol);
  color: var(--white);
}
.example-figure[data-layer="fuentes"] .source-ref {
  border-color: var(--petrol);
  background: var(--petrol-wash);
  box-shadow: 0 0 0 3px rgba(23, 79, 72, .15);
}
.example-figure[data-layer="fuentes"] .ex-doc-manual {
  transform: translateY(-3px);
  box-shadow: var(--paper-shadow);
}
.example-figure[data-layer="fuentes"] .ex-connector path { opacity: 1; }

/* ---------- Proceso ---------- */

.process { padding-block: var(--section); }
.process-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.process-head p { max-width: 30em; }

.process-track { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.process-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 2px;
  background: var(--line);
}
.process-rail-fill {
  position: absolute;
  inset: 0;
  background: var(--petrol);
  transform-origin: left center;
}
.process-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
  list-style: none;
}
.phase-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--petrol);
  border-radius: 50%;
  background: var(--porcelain);
  color: var(--petrol);
  font-size: 15px;
  font-weight: 600;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.phase.is-reached .phase-num { background: var(--petrol); color: var(--white); }
.phase h3 {
  margin-top: 22px;
  font-size: clamp(1rem, 1.12vw, 1.25rem);
  letter-spacing: -.02em;
  hyphens: auto;
}
.phase p { margin-top: 8px; font-size: 14.5px; }
.phase .phase-gate {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--petrol);
  color: var(--petrol);
  font-weight: 500;
}
.section-note {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

/* ---------- Privacidad (sección oscura) ---------- */

.privacy {
  padding-block: var(--section);
  background: var(--ink);
  color: var(--on-dark);
}
.privacy h2,
.privacy h3 { color: var(--on-dark); }
.privacy p { color: var(--on-dark-muted); }
.privacy :focus-visible { outline-color: var(--dark-accent); }

.privacy-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.privacy-head h2 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
.privacy-head p { max-width: 30em; }

.privacy-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(48px, 6vw, 80px);
  align-items: start;
}
.privacy-map { position: sticky; top: calc(var(--header-h) + 32px); }
.privacy-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.privacy-map figcaption { margin-top: 12px; color: var(--on-dark-muted); font-size: 13px; }
.pm-office { fill: rgba(233, 240, 236, .04); stroke: var(--on-dark); stroke-opacity: .55; stroke-width: 1.5; }
.pm-perms { fill: rgba(140, 192, 179, .08); stroke: var(--dark-accent); stroke-width: 1.5; }
.pm-core { fill: var(--petrol); stroke: var(--dark-accent); stroke-width: 1.5; }
.pm-doc { fill: var(--on-dark); }
.pm-user { fill: var(--dark-accent); }
.pm-user.muted { fill: none; stroke: var(--on-dark-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.pm-access { fill: none; stroke: var(--dark-accent); stroke-width: 1.5; }
.pm-support,
.pm-external { fill: none; stroke: var(--on-dark-muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
.pm-gate { fill: var(--ink); stroke: var(--dark-accent); stroke-width: 1.5; }
.pm-valve { fill: var(--ink); stroke: var(--dark-accent); stroke-width: 1.5; }
.privacy-map text { fill: var(--on-dark); font-family: var(--font); font-size: 17px; font-weight: 560; }
.privacy-map text.pm-sub { fill: var(--on-dark-muted); font-size: 14.5px; font-weight: 400; }

.privacy-zones article { padding: 24px 0; border-top: 1px solid var(--dark-line); }
.privacy-zones article:first-child { padding-top: 0; border-top: 0; }
.privacy-zones h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); letter-spacing: -.02em; }
.privacy-zones p { margin-top: 8px; font-size: 15px; }
.privacy-zones ul { margin-top: 12px; list-style: none; }
.privacy-zones li {
  position: relative;
  padding: 4px 0 4px 20px;
  color: var(--on-dark);
  font-size: 14.5px;
}
.privacy-zones li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--dark-accent);
  border-radius: 2px;
}
.privacy .privacy-limit {
  max-width: 54em;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 20px 24px;
  border: 1px solid var(--dark-line);
  border-radius: 16px;
  color: var(--on-dark);
  font-size: 15px;
}

/* ---------- Servicios ---------- */

.services { padding-block: var(--section); }
.services-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.services-head p { max-width: 28em; margin-top: 20px; }
.services-head .text-link { margin-top: 14px; }
.service-list { border-top: 1px solid var(--ink); }
.service-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.service-list dt {
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.service-list dd { color: var(--muted); font-size: 15px; }

/* ---------- Nosotros ---------- */

.about { padding-block: calc(var(--section) * .8); border-block: 1px solid var(--line); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
}
.about-grid h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.about-lead {
  color: var(--ink);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: -.02em;
}
.about-copy p:not(.about-lead) { max-width: 38em; margin-top: 20px; }

/* ---------- Preguntas frecuentes ---------- */

.faq { padding-block: var(--section); }
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.faq-head { position: sticky; top: calc(var(--header-h) + 32px); }
.faq-head p { max-width: 26em; margin-top: 20px; }
.faqs details { border-top: 1px solid var(--line); }
.faqs details:last-child { border-bottom: 1px solid var(--line); }
.faqs summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 16px 0;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 480;
  list-style: none;
  cursor: pointer;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background:
    linear-gradient(var(--petrol), var(--petrol)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--petrol), var(--petrol)) center / 1.5px 14px no-repeat;
  transition: transform .3s var(--ease);
}
.faqs details[open] summary::after { transform: rotate(45deg); }
.faqs summary:hover { color: var(--petrol); }
.faqs details p { max-width: 40em; padding: 0 40px 22px 0; font-size: 15px; }

/* ---------- Contacto ---------- */

.contact { padding-block: var(--section); background: var(--pale); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
}
.contact-copy h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); }
.contact-copy > p { max-width: 26em; margin-top: 20px; }
.contact-copy .contact-location { margin-top: 32px; color: var(--ink); font-size: 14px; }

#contact-form {
  padding: clamp(20px, 3vw, 36px);
  border-radius: 24px;
  background: var(--porcelain);
}
.form-status {
  margin-bottom: 22px;
  padding: 14px 16px;
  border: 1px solid rgba(23, 79, 72, .35);
  border-radius: 12px;
  background: var(--white);
  color: var(--petrol);
  font-size: 14px;
}
.form-status b { display: block; font-weight: 600; }
.form-status span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
label { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14px; font-weight: 500; }
label span { color: var(--muted); font-weight: 380; }
input,
textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}
input:disabled,
textarea:disabled { background: #eef2f0; cursor: not-allowed; }
textarea { resize: vertical; }
.sensitive-note { margin-top: 18px; color: var(--ink); font-size: 13.5px; }
.privacy-info { margin-top: 10px; font-size: 13px; line-height: 1.55; }

/* ---------- Pie ---------- */

.footer { padding-block: 48px 28px; }
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 36px;
}
.footer-top p { color: var(--ink); font-size: 15px; line-height: 1.5; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer-bottom nav a { text-underline-offset: 4px; }

/* ---------- Páginas legales ---------- */

.legal-page { max-width: 780px; padding-block: 64px 96px; }
.legal-kicker { color: var(--petrol); font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.legal-page h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 24px; }
.legal-page h2 { margin: 34px 0 12px; font-size: 1.25rem; letter-spacing: -.02em; }
.legal-page p,
.legal-page li { font-size: 15.5px; }
.legal-page ul { padding-left: 1.2em; color: var(--muted); }
.legal-warning {
  margin-bottom: 28px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--pale);
}
.legal-warning p { color: var(--ink); }
.legal-header .nav-wrap { justify-content: space-between; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .has-js .menu-toggle { display: inline-flex; }
  .header-tools { margin-left: auto; margin-right: 0; }
  #navigation {
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding-bottom: 12px;
  }
  .has-js #navigation { display: none; }
  .has-js #navigation.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 18px;
  }
  .has-js #navigation.open a:not(.button) {
    display: flex;
    align-items: center;
    min-height: 46px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
    background: none;
  }
  .has-js #navigation.open .button { margin-top: 14px; }
}

@media (max-width: 900px) {
  .hero-grid,
  .solution-intro,
  .sequence,
  .example-grid,
  .process-head,
  .privacy-head,
  .privacy-grid,
  .services-grid,
  .about-grid,
  .faq-grid,
  .contact-grid,
  .limits { grid-template-columns: minmax(0, 1fr); }

  .hero-grid { min-height: 0; }
  .archive { margin-right: 0; }
  .archive-scene { width: 100%; max-width: 620px; margin-inline: auto; }
  .archive figcaption { margin-inline: auto 0; }
  .hero-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sequence-visual { position: relative; top: auto; }
  .seq-scene { max-height: none; }
  .sequence.is-live .seq-step { min-height: 0; display: block; }
  .sequence.is-live .seq-step::before { top: 34px; }

  .example-intro,
  .privacy-map,
  .faq-head { position: relative; top: auto; }
  .explore-note { min-height: 0; }
  .example-body { grid-template-columns: minmax(0, 1fr); }

  .privacy-map { max-width: 560px; }
}

/* Proceso: seis columnas solo cuando caben; si no, raíl vertical. */
@media (max-width: 1199px) {
  .process-track { max-width: 760px; }
  .process-rail { left: 19px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .process-rail-fill { transform-origin: center top; }
  .process-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .phase { position: relative; padding: 0 0 30px 64px; }
  .phase-num { position: absolute; left: 0; top: -6px; }
  .phase h3 { margin-top: 0; font-size: 1.2rem; }
}

@media (max-width: 600px) {
  :root { --header-h: 64px; }
  .motion-extra,
  .menu-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .nav-wrap { column-gap: 12px; }
  .brand { font-size: 14px; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .header-tools { gap: 6px; }
  .motion-toggle { padding: 6px 12px 6px 9px; gap: 6px; }
  .menu-toggle { width: 42px; justify-content: center; padding: 0; }
  .statement { font-size: clamp(2rem, 9.4vw, 2.6rem); }
  .privacy-head h2 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .hero-actions .button { width: 100%; }
  .limits ul { grid-template-columns: minmax(0, 1fr); }
  .field-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .service-list > div { grid-template-columns: minmax(0, 1fr); }
  .faqs details p { padding-right: 0; }
  .footer-top { flex-wrap: wrap; }
  .ex-question,
  .ex-reply { padding-inline: 20px; }
  .review-note { padding-inline: 20px; }
}

/* ---------- Movimiento reducido o pausado ---------- */

html.motion-off { scroll-behavior: auto; }
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* V3 · cristal y venta B2B. Se combina con la base durante el build. */
:root{--porcelain:#f5f7fa;--ink:#172329;--petrol:#174f48;--muted:#52616b;--pale:#e7edf0;--petrol-wash:#edf3f4;--glass:rgba(255,255,255,.76);--glass-border:rgba(255,255,255,.94);--section:clamp(64px,7vw,105px);--header-h:84px}
body{background:radial-gradient(ellipse at 85% 14%,#dcebe8 0,transparent 34%),radial-gradient(ellipse at 10% 48%,#e7edf7 0,transparent 32%),#f5f7fa;background-attachment:fixed}
.header{top:12px;width:min(1380px,calc(100% - 32px));margin:12px auto 0;border:1px solid var(--glass-border);border-radius:32px;background:rgba(255,255,255,.78);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:0 8px 34px #243b4410,0 1px 0 #ffffff inset}
.nav-wrap{width:calc(100% - 40px);min-height:76px;gap:10px 12px}.brand{font-size:14px}.header-tools{margin-right:auto;gap:6px}#navigation{gap:3px}#navigation>a:not(.button){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 11px;border-radius:999px;background:transparent;font-size:12px;text-decoration:none;transition:background .2s,box-shadow .2s}#navigation>a:not(.button):hover{background:#ffffff;box-shadow:0 4px 14px #17232910}
.button,.text-link,.motion-toggle,.menu-toggle,.explore-button,.source-ref{border-radius:999px!important;min-height:44px;min-width:44px;border:1px solid rgba(23,35,41,.13);box-shadow:0 1px 0 #ffffffbb inset,0 4px 16px #213b4110;backdrop-filter:blur(14px) saturate(145%);-webkit-backdrop-filter:blur(14px) saturate(145%);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease);position:relative}
.button{background:linear-gradient(165deg,#2b6960,#174f48);color:white;border-color:#174f48;box-shadow:0 1px 0 #ffffff40 inset,0 8px 20px #174f4826;padding:15px 23px;font-size:14px}.button.small{min-height:44px}.button:hover{background:#205d54;box-shadow:0 2px 0 #ffffff40 inset,0 12px 25px #174f4833;transform:translateY(-2px)}.button:active,.explore-button:active,.motion-toggle:active,.menu-toggle:active{transform:scale(.97)}.button.ghost,.text-link,.motion-toggle,.menu-toggle,.explore-button{background:rgba(255,255,255,.7);color:var(--ink);border-color:#ffffff;text-decoration:none;padding:11px 20px}.button.ghost:hover,.text-link:hover,.motion-toggle:hover,.menu-toggle:hover,.explore-button:hover{background:#ffffff;box-shadow:0 8px 25px #243b4418;transform:translateY(-2px)}.motion-toggle,.menu-toggle{padding:9px 12px;font-size:11px}.button:disabled{background:#617a77;box-shadow:none;transform:none}.explore-button[aria-pressed=true]{background:var(--petrol);color:white;border-color:var(--petrol)}.source-ref{background:#edf3f0;padding:10px 16px;align-self:flex-start;font-size:12px}.source-ref:hover{background:#dcebe4}.source-ref .doc-glyph{flex-shrink:0}
.hero{padding-top:24px;overflow:clip}.hero-grid{grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);gap:24px;min-height:690px;padding-top:46px;padding-bottom:35px;align-items:center}.hero h1{font-size:clamp(40px,4.65vw,70px);line-height:1.08;letter-spacing:-.048em;max-width:11.5ch}.hero .intro{font-size:18px;line-height:1.7;max-width:43ch;margin-top:25px}.hero-actions{gap:12px;margin-top:28px}.hero-uses{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:24px;padding:0}.hero-uses li{font-size:11px;color:#52616b;padding:6px 12px;border:1px solid #cdd9db;border-radius:999px;background:#ffffff70}.archive{min-width:0;margin:0}.archive figcaption{font-size:11px;text-align:center;margin-top:12px}.archive-scene{isolation:isolate}.scene-glass{position:absolute;inset:7% 5% 16%;z-index:-1;border-radius:40px;background:linear-gradient(130deg,#ffffffa0,#ffffff38);border:1px solid #ffffff;box-shadow:0 20px 55px #203d4512,0 2px 0 #ffffff inset;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);overflow:hidden}.glint{display:block;position:absolute;inset:-100% -90%;background:linear-gradient(115deg,transparent 39%,#ffffff95 49%,transparent 59%);transform:translateX(-25%)}.perimeter-fill{fill:#e3eeec66}.perimeter{stroke:#749c9570}.core-halo{stroke:#a5c5bd}.sheet{border-radius:14px;background:#ffffffd9;border-color:#ffffff;box-shadow:0 2px 0 #ffffff inset,0 14px 28px #23413e14}.doc b{overflow-wrap:anywhere;hyphens:auto}.core{border-radius:30px;background:linear-gradient(160deg,#40786f,#174f48);box-shadow:0 2px 0 #ffffff60 inset,0 18px 30px #174f4833}.answer-card{border-radius:22px;background:#ffffffcf;border:1px solid #ffffff;box-shadow:0 2px 0 #fff inset,0 20px 36px #243b4420;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.sheet-far{background:#ffffff82}
.solution{padding-block:70px 80px}.solution-stage{max-width:1160px;margin:auto}.solution-head{display:grid;grid-template-columns:1.1fr .8fr;gap:70px;align-items:center;margin-bottom:34px}.solution-head p{font-size:17px;max-width:40ch}.statement{max-width:18ch;font-size:clamp(32px,3.6vw,49px)}.benefits{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.benefit{background:#ffffffa6;border:1px solid #ffffff;border-radius:28px;padding:30px;box-shadow:0 1px 0 #ffffff inset,0 10px 35px #1c39420a;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);position:relative;overflow:hidden}.benefit h3{font-size:25px;font-weight:500;margin:12px 0}.benefit p{font-size:14px;line-height:1.8}.benefit-icon{display:block;width:46px;height:46px;border-radius:16px;border:1px solid #abc6bd;background:linear-gradient(145deg,#f5faf8,#d9ebe5);position:relative}.benefit-icon:before{content:'';position:absolute;inset:13px;border:2px solid var(--petrol);border-radius:5px}.benefit:nth-child(2) .benefit-icon:before{inset:14px 12px;border-width:2px 0;box-shadow:0 5px 0 -3px var(--petrol)}.benefit:nth-child(3) .benefit-icon:before{inset:12px 17px;transform:rotate(40deg);border-radius:2px}.limits{margin-top:28px;border:0;background:transparent;padding:0}.limits summary,.phases summary,.budget summary{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:12px 21px;background:#ffffffa8;border:1px solid #ffffff;border-radius:999px;box-shadow:0 5px 20px #243b440c;font-size:13px;cursor:pointer;list-style:none}.limits summary:after,.phases summary:after,.budget summary:after{content:'+';font-size:20px;line-height:1}.limits[open] summary:after,.phases[open] summary:after,.budget[open] summary:after{content:'−'}.limits summary::-webkit-details-marker,.phases summary::-webkit-details-marker,.budget summary::-webkit-details-marker{display:none}.limits ul{display:block;padding:20px 20px 0 36px;list-style:disc}.limits li{font-size:13px;line-height:1.9}
.example{background:transparent;padding-block:65px 85px}.example-grid{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:55px;align-items:center}.example-intro h2{font-size:clamp(32px,3.3vw,46px);line-height:1.1}.example-intro>p{font-size:16px}.example-figure{border-radius:32px;border:1px solid #ffffff;background:#ffffffa8;box-shadow:0 25px 65px #263f4512,0 2px 0 #ffffff inset;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden}.example-label{font-size:10px;line-height:1.7;padding:18px 26px;background:#ffffff75}.example-body{background:transparent}.ex-question{background:#e4efeb8c}.ex-doc{border-radius:16px;background:#ffffffc9}.ex-perimeter{border-radius:22px;background:#edf4f1aa}.ex-doc-locked{background:#eff2f4a8}.explore-buttons{gap:9px;flex-wrap:wrap}.explore-button{font-size:12px;padding:10px 16px}.explore-title{font-size:13px}.explore-note{font-size:12px;line-height:1.8}.ex-reply,.ex-sources{min-width:0}.ex-fragment{font-size:12px}.ex-connector{pointer-events:none}
.process{padding-block:70px 80px}.process-head{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center;margin-bottom:32px}.process-head h2{max-width:20ch;font-size:clamp(32px,3.5vw,48px)}.process-head p{font-size:17px}.process-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;list-style:none;margin:25px 0 30px}.process-steps li{padding:25px;border-radius:24px;border:1px solid #fff;background:#ffffff66}.step-num{display:inline-flex;width:35px;height:35px;align-items:center;justify-content:center;border-radius:50%;background:#dcebe5;color:var(--petrol);font-size:13px}.process-steps h3{font-size:21px;margin-top:16px}.process-steps p{font-size:14px;margin-top:8px}.phases{margin-top:26px}.phases .process-list{margin-top:25px}.phases .phase{padding:24px;border-radius:20px;background:#ffffff85}.phases .phase-num{display:none}.phases .section-note{padding-top:20px}
.privacy{margin:0 20px;padding-block:70px;border-radius:40px;background:linear-gradient(135deg,#213c40,#122c2e);box-shadow:0 25px 70px #1723291a;color:#f4f8f7;overflow:clip;position:relative}.privacy-head{display:block;max-width:730px;margin-bottom:35px}.privacy-head h2{color:#f4f8f7;font-size:clamp(34px,4.2vw,58px)}.privacy-head p{margin-top:20px;color:#c0d5cf;font-size:18px}.privacy .privacy-zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.privacy-zones article{border:1px solid #ffffff24;border-radius:24px;background:#ffffff0c;padding:28px;box-shadow:0 1px 0 #ffffff18 inset}.privacy-zones h3{font-size:20px;color:white}.privacy-zones p{font-size:14px;color:#c4d6d1;margin-top:12px}.privacy .privacy-limit{background:transparent;border:0;padding:0;max-width:1000px;font-size:12px;color:#bbd0ca;margin-top:26px}
.services{padding-block:80px 55px}.services-grid{grid-template-columns:1fr 1fr;gap:70px;align-items:center}.services-head h2{font-size:clamp(32px,3.7vw,50px)}.services-head p{font-size:16px}.budget .service-list{margin-top:22px}.budget-note{font-size:13px;margin-top:20px}.about{padding-block:45px 60px;border:0}.about-grid{gap:60px}.about h2{font-size:32px}.about-lead{font-size:17px!important;line-height:1.75}.about-copy p+p{font-size:14px}.faq{padding-block:60px 80px}.faq-grid{gap:60px}.faq-head h2{font-size:clamp(32px,3.2vw,44px)}.faq-head p{font-size:15px}.faqs details{background:#ffffff85;border:1px solid #ffffff;border-radius:25px;margin-bottom:9px;padding:0 24px;box-shadow:0 3px 18px #213b4106}.faqs details:last-child{border:1px solid #ffffff}.faqs summary{font-size:14px;padding:17px 0;min-height:60px}.faqs p{font-size:13px}.contact{margin:0 20px 25px;border-radius:38px;background:linear-gradient(145deg,#e4edeac4,#eef1f8);padding-block:70px;box-shadow:0 1px 0 #ffffff inset;border:1px solid #ffffff}.contact-grid{gap:70px}.contact h2{font-size:clamp(34px,4.5vw,62px)}.contact-copy>p{font-size:17px}.contact form{padding:26px;border-radius:28px;background:#ffffff85;border:1px solid #fff;box-shadow:0 15px 50px #243b440a}.form-status{border-radius:18px;background:#e8efed;border:1px solid #c2d1cb}.field input,.field textarea{border-radius:16px;background:#ffffffa6;border-color:#c5d2ce}.contact-copy .contact-location{font-size:13px}.footer{padding-top:30px}.footer-top p{font-size:12px;max-width:340px}.footer-bottom{font-size:11px}.footer .text-link{font-size:12px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.header,.scene-glass,.benefit,.example-figure,.answer-card,.button.ghost,.motion-toggle,.menu-toggle,.explore-button{background-color:#f8fafb}}
@media(max-width:1200px){.nav-wrap{gap:8px}.brand{font-size:13px}#navigation>a:not(.button){padding-inline:9px;font-size:11px}.button.small{padding-inline:15px;font-size:11px}.motion-toggle{font-size:10px}.example-grid{gap:30px}}
@media(max-width:1100px){.header{border-radius:28px}.nav-wrap{width:calc(100% - 30px)}.has-js #navigation.open{padding:12px 0 18px;gap:6px}.header-tools{margin-left:auto}.hero-grid{min-height:650px}.example-grid{grid-template-columns:1fr}.example-intro{max-width:680px}.example-intro h2{max-width:20ch}.explore{margin-top:22px}.example-figure{margin-top:25px}.example-body{grid-template-columns:1fr 1fr}.privacy .privacy-zones{gap:12px}.privacy-zones article{padding:20px}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;min-height:0;padding-top:32px;gap:5px}.hero-copy{max-width:680px}.hero h1{font-size:clamp(39px,6.4vw,62px);max-width:17ch}.hero .intro{max-width:50ch}.archive{width:min(100%,650px);justify-self:center;margin-top:20px}.hero-grid .archive-scene{width:100%}.solution-head,.process-head{grid-template-columns:1fr;gap:22px}.solution-head{margin-bottom:26px}.benefits{gap:13px}.benefit{padding:23px}.benefit h3{font-size:22px}.benefit p{font-size:13px}.privacy .privacy-zones{grid-template-columns:1fr}.privacy-head{max-width:650px}.privacy-zones article{padding:23px}.services-grid,.about-grid{grid-template-columns:1fr;gap:25px}.faq-grid{gap:30px}.contact-grid{gap:30px}.contact form{padding:23px}}
@media(max-width:600px){:root{--gutter:20px;--header-h:72px}.header{top:8px;width:calc(100% - 20px);margin-top:8px;border-radius:25px}.nav-wrap{width:calc(100% - 24px);min-height:64px;gap:8px}.brand{font-size:12px;gap:6px}.brand-mark{width:24px;height:24px}.header-tools{gap:5px}.motion-toggle{min-height:44px;padding:8px 11px;font-size:10px}.menu-toggle{width:44px;height:44px;min-height:44px;padding:0;justify-content:center}.hero{padding-top:10px}.hero-grid{padding-top:28px;padding-bottom:10px;gap:3px}.hero h1{font-size:clamp(31px,8.6vw,46px);max-width:100%;line-height:1.11;letter-spacing:-.044em}.hero .intro{font-size:16px;line-height:1.7;margin-top:20px}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.hero-actions .button{width:auto;min-height:49px;padding:12px 17px;font-size:12px}.hero-actions .button:first-child{flex:1;white-space:nowrap}.hero-uses{margin-top:20px;gap:6px}.hero-uses li{font-size:10px;padding:5px 10px}.archive{margin-top:22px}.archive figcaption{font-size:10px}.scene-glass{border-radius:28px}.solution,.process{padding-block:50px}.solution-head{gap:18px}.statement,.solution-head h2{font-size:34px;max-width:18ch}.solution-head p{font-size:15px}.benefits{grid-template-columns:1fr;gap:14px}.benefit{padding:25px;border-radius:25px}.benefit-icon{width:42px;height:42px}.benefit h3{font-size:23px}.benefit p{font-size:14px}.example{padding-block:30px 60px}.example-grid{gap:15px}.example-intro h2{font-size:34px}.example-figure{border-radius:24px}.example-label{font-size:10px;padding:15px 20px}.example-body{grid-template-columns:1fr}.ex-sources{border-left:0;border-top:1px solid var(--line)}.explore-title{font-size:12px}.explore-buttons{gap:7px}.explore-button{padding:10px 13px;font-size:11px}.process-head h2{font-size:34px}.process-head p{font-size:15px}.process-steps{grid-template-columns:1fr;gap:13px}.process-steps li{padding:22px}.process-steps h3{margin-top:12px}.privacy{margin:0 10px;border-radius:28px;padding-block:48px}.privacy .wrap{width:calc(100% - 40px)}.privacy-head h2{font-size:36px}.privacy-head p{font-size:16px}.privacy-zones p{font-size:13px}.privacy .privacy-limit{font-size:11px}.services{padding-block:55px 35px}.services-head h2{font-size:36px}.about{padding-block:30px 40px}.about h2{font-size:30px}.about-lead{font-size:15px!important}.faq{padding-block:35px 55px}.faq-head h2{font-size:34px}.faqs details{border-radius:22px;padding-inline:20px}.faqs summary{font-size:13px;line-height:1.55}.contact{margin:0 10px 15px;border-radius:28px;padding-block:45px}.contact .wrap{width:calc(100% - 32px)}.contact h2{font-size:39px}.contact-copy>p{font-size:15px}.contact form{padding:20px;border-radius:23px}.contact-grid{gap:25px}.footer-top{gap:20px}.footer-top p{max-width:100%;font-size:11px}.footer-bottom nav{gap:13px}.footer .text-link{padding:9px 14px}}
html.motion-off *,html.motion-off *::before,html.motion-off *::after{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* V4 · relato editorial con escena CSS 3D.
   Se concatena tras styles.css y polish.css. El estado por defecto (sin JS, en pausa o con movimiento
   reducido) es la composición final y legible: GSAP solo interpola las variables de cámara. */

:root{--ice:#eef3f6;--ink:#0f1e24;--petrol:#174f48;--petrol-2:#1f6b61;--mint:#3fbf9f;--muted:#4c5b63;--stroke:1.5px solid var(--ink);--header-h:84px}
body{background:radial-gradient(ellipse at 82% 8%,#d8e9e6 0,transparent 38%),radial-gradient(ellipse at 8% 40%,#e2e9f4 0,transparent 34%),linear-gradient(#0f1e2407 1px,transparent 1px) 0 0/100% 72px,var(--ice);background-attachment:scroll}
html.motion-off{scroll-behavior:auto}

/* Etiquetas de capítulo: recuadro de alto contraste, inspirado en la rotulación editorial de la referencia. */
.tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:6px 14px 6px 6px;border:var(--stroke);border-radius:999px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:.12em;line-height:1.2;text-transform:uppercase}
.tag:not(:has(span)){padding-left:14px}
.tag span{display:inline-grid;place-items:center;min-width:32px;padding:3px 8px;border-radius:999px;background:var(--ink);color:#fff;letter-spacing:.04em}
.tag-dark{background:transparent;border-color:#e9f0ec;color:#e9f0ec}

/* ---------- Relato: texto en flujo + escena fija ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(28px,4vw,72px);width:min(1380px,100% - 2 * var(--gutter));margin:0 auto}
.opening,.chapter{grid-column:1;container-type:inline-size;position:relative;z-index:1}
.stage-col{grid-column:2;grid-row:1 / span 4;position:relative}
.opening{min-height:calc(100svh - var(--header-h) - 12px);display:flex;flex-direction:column;justify-content:center;padding-block:40px 56px}
.opening h1{font-size:clamp(2.2rem,11.4cqi,5.6rem);font-weight:620;line-height:.98;letter-spacing:-.055em;max-width:12ch}
.opening .intro{max-width:36ch;margin-top:clamp(20px,2.4vw,30px);color:var(--ink);font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.65}
.opening .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.opening-note{margin-top:16px;font-size:13px;color:var(--muted)}
.chapter-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:22px;border-top:var(--stroke)}
.chapter-index a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 6px;border:1px solid #0f1e2430;border-radius:999px;background:#ffffffb8;color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;transition:background-color .2s,border-color .2s}
.chapter-index a span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ice);font-size:12px;font-weight:600}
.chapter-index a:hover{background:#fff;border-color:var(--ink)}
.chapter{min-height:84svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(56px,10svh,110px)}
.chapter h2{font-size:clamp(2rem,8cqi,3.6rem);line-height:1.02;letter-spacing:-.045em;max-width:16ch}
.chapter-lead{max-width:40ch;margin-top:20px;color:var(--ink);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.7}
.chapter .text-link{margin-top:22px;align-self:flex-start}
.chapter-points{list-style:none;display:grid;gap:10px;margin-top:26px;max-width:46ch}
.chapter-points li{position:relative;padding:14px 18px 14px 50px;border:1px solid #fff;border-radius:20px;background:#ffffffb0;color:var(--ink);font-size:15px;line-height:1.5}
.chapter-points li::before{content:"";position:absolute;left:18px;top:18px;width:16px;height:9px;border-left:2px solid var(--petrol);border-bottom:2px solid var(--petrol);transform:rotate(-45deg)}
.story .benefits{grid-template-columns:1fr;gap:10px;margin-top:28px;max-width:52ch}
.story .benefit{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start;padding:18px 22px;border-radius:22px}
.story .benefit-icon{grid-row:span 2;width:44px;height:44px}
.story .benefit h3{margin:2px 0 4px;font-size:19px;font-weight:560}
.story .benefit p{font-size:14.5px;line-height:1.65}
.story .limits{margin-top:20px}
.limits li{font-size:14px}

/* ---------- Escena ---------- */
.stage{position:sticky;top:calc(var(--header-h) + 32px);height:calc(100svh - var(--header-h) - 56px);min-height:520px;margin:0;border:var(--stroke);border-radius:34px;overflow:hidden;background:radial-gradient(circle at 48% 58%,#fff 0,#f3f7f9 38%,#dfe9ee 100%);box-shadow:0 30px 70px -40px #0f1e2466,0 1px 0 #fff inset}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#0f1e240b 1px,transparent 1px),linear-gradient(90deg,#0f1e240b 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(70% 60% at 50% 55%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 60% at 50% 55%,#000 30%,transparent 80%)}
.stage-view{position:absolute;inset:0;container-type:size;perspective:240cqmin;perspective-origin:50% 40%}
.stage-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.cam{
  --rx:58;--rz:-38;--zoom:1;--gap:6.5;--pull:1;--out:1;--face:0;--lift:3;--cite:1;
  position:absolute;left:46%;top:57%;width:0;height:0;transform-style:preserve-3d;
  transform:scale(var(--zoom)) rotateX(calc(var(--rx) * 1deg)) rotateZ(calc(var(--rz) * 1deg))}
.cam>*{position:absolute;transform-style:preserve-3d}
.floor{left:-31cqmin;top:-31cqmin;width:62cqmin;height:62cqmin;border:2px dashed #174f4880;border-radius:4cqmin;background:linear-gradient(#174f4812 1px,transparent 1px) 0 0/7.75cqmin 7.75cqmin,linear-gradient(90deg,#174f4812 1px,transparent 1px) 0 0/7.75cqmin 7.75cqmin,#e9f2f1cc}
.floor::after{content:"";position:absolute;inset:24%;border-radius:50%;background:radial-gradient(#0f1e2430,transparent 70%)}
.floor-label{position:absolute;left:3cqmin;bottom:2.4cqmin;color:var(--petrol);font-size:max(11px,2.3cqmin);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.plate{--k:0;--drop:0;left:-20cqmin;top:-20cqmin;width:40cqmin;height:40cqmin;padding:3cqmin;border:var(--stroke);border-radius:2.6cqmin;background:#fffffff0;color:var(--ink);
  transform:translateZ(calc((3 + var(--k) * var(--gap) + var(--drop)) * 1cqmin))}
.plate::before,.plate::after{content:"";position:absolute;background:#b9c9d0;border:1px solid var(--ink)}
.plate::before{left:-1.5px;right:-1.5px;top:100%;height:1.8cqmin;transform-origin:top;transform:rotateX(-90deg)}
.plate::after{top:-1.5px;bottom:-1.5px;right:100%;width:1.8cqmin;transform-origin:right;transform:rotateY(-90deg);background:#d3dee3}
.plate b{display:block;font-size:max(10px,2.5cqmin);font-weight:600;line-height:1.15;letter-spacing:-.01em}
.p-docs .docs{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqmin;margin-top:3cqmin}
.p-docs .docs i{position:relative;height:12cqmin;border:1px solid #0f1e2440;border-radius:1cqmin;background:#fff}
.p-docs .docs i::before{content:"";position:absolute;left:1.2cqmin;right:1.2cqmin;top:1.4cqmin;height:1cqmin;border-radius:1px;background:#0f1e2426}
.p-docs .docs .cited::before{background:var(--petrol);opacity:calc(.25 + var(--cite) * .75)}
.scan{position:absolute;left:3cqmin;bottom:3cqmin;width:8cqmin;height:1.2cqmin;border-radius:1cqmin;background:var(--mint);opacity:.75;transform:translateX(calc(var(--scan,1) * 24cqmin))}
.p-perm{--k:1;background:#e3f0ecf2}.p-perm::before{background:#9dc3b8}.p-perm::after{background:#c3ddd5}
.profiles{display:flex;gap:3cqmin;margin-top:4cqmin}
.profiles i{width:7cqmin;height:7cqmin;border:1.5px solid var(--petrol);border-radius:50%;background:#fff}
.profiles .off{border-style:dashed;border-color:#0f1e2466;background:transparent}
.p-index{--k:2;background:#edf2f7f2}
.rows{display:grid;gap:1.6cqmin;margin-top:3cqmin}
.rows i{height:1.3cqmin;border-radius:1px;background:#0f1e2422}.rows i:nth-child(2){width:78%}.rows i:nth-child(3){width:58%}
.p-model{--k:3;background:linear-gradient(150deg,#22766b,#123c37);color:#fff;display:grid;place-items:center;text-align:center}
.p-model::before{background:#0e2e2a}.p-model::after{background:#18524b}
.p-model b{font-size:max(11px,3cqmin);max-width:20cqmin}
.p-answer{--k:4;--float:0;border-width:2px;background:#fff;box-shadow:0 0 0 1.2cqmin #3fbf9f33;
  transform:translateZ(calc((3 + 4 * var(--gap) + var(--lift) + var(--drop) + var(--float)) * 1cqmin)) rotateZ(calc(var(--rz) * var(--face) * -1deg)) rotateX(calc(var(--rx) * var(--face) * -1deg))}
.p-answer b{color:var(--petrol);font-size:max(11px,3cqmin)}
.chip{display:inline-block;margin-top:3.4cqmin;padding:1cqmin 2.2cqmin;border-radius:999px;background:var(--petrol);color:#fff;font-size:max(10px,2.2cqmin);font-weight:500}
.beam{left:-.5cqmin;top:0;width:1cqmin;height:calc((4 * var(--gap) + var(--lift)) * 1cqmin);border-radius:1cqmin;background:linear-gradient(var(--mint),#174f48);opacity:calc(.35 + var(--cite) * .6);transform-origin:50% 0;
  transform:translateZ(3cqmin) rotateZ(calc(var(--rz) * -1deg)) rotateX(90deg)}
.loose{--x:0;--y:0;--z:0;--r:0;--sx:0;--sy:0;--i:0;--drop:0;left:-5.5cqmin;top:-7cqmin;width:11cqmin;height:14cqmin;border:1.2px solid var(--ink);border-radius:1.2cqmin;background:linear-gradient(#0f1e2422,#0f1e2422) 1.6cqmin 2.2cqmin/6cqmin 1cqmin no-repeat,linear-gradient(#0f1e2416,#0f1e2416) 1.6cqmin 4.6cqmin/7cqmin .8cqmin no-repeat,#fff;
  transform:translate3d(calc((var(--x) * (1 - var(--pull)) + var(--sx) * var(--pull)) * 1cqmin),calc((var(--y) * (1 - var(--pull)) + var(--sy) * var(--pull)) * 1cqmin),calc((var(--z) * (1 - var(--pull)) + var(--pull) * (3.4 + var(--i) * .5) + var(--drop)) * 1cqmin)) rotateZ(calc(var(--r) * (1 - var(--pull)) * 1deg))}
.l1{--x:-38;--y:-14;--z:16;--r:-16;--sx:-12;--sy:-9;--i:1}
.l2{--x:24;--y:-40;--z:30;--r:14;--sx:-11;--sy:-8;--i:2}
.l3{--x:38;--y:16;--z:22;--r:-9;--sx:-10;--sy:-7;--i:3}
.l4{--x:-16;--y:36;--z:10;--r:11;--sx:-9;--sy:-6;--i:4}
.l5{--x:6;--y:-30;--z:44;--r:6;--sx:-8;--sy:-5;--i:5}
.locked{left:-6.5cqmin;top:-8cqmin;width:13cqmin;height:16cqmin;padding:1.6cqmin;border:1.5px dashed #0f1e2499;border-radius:1.4cqmin;background:#f3f5f6;color:var(--muted);
  transform:translate3d(calc((-30 - var(--out) * 24) * 1cqmin),-24cqmin,calc((2 + (1 - var(--out)) * 16) * 1cqmin))}
.locked::before{content:"";display:block;width:3.6cqmin;height:3cqmin;margin-bottom:1.4cqmin;border:1.5px solid currentColor;border-radius:.6cqmin;box-shadow:0 -1.6cqmin 0 -.4cqmin #f3f5f6,0 -1.8cqmin 0 -.1cqmin currentColor}
.locked b{display:block;font-size:max(9px,1.9cqmin);font-weight:600;color:var(--ink)}
.locked span{display:block;margin-top:.6cqmin;font-size:max(8px,1.5cqmin);line-height:1.2}

/* Estados estáticos por capítulo (con JS, también en pausa y movimiento reducido: cambio sin animación). */
.stage[data-chapter="0"] .cam{--rx:60;--rz:-34;--zoom:.94;--gap:9;--pull:0;--out:0;--lift:0;--cite:0}
.stage[data-chapter="1"] .cam{--rx:56;--rz:-24;--zoom:1;--gap:7;--pull:1;--out:0;--lift:0;--cite:0}
.stage[data-chapter="2"] .cam{--rx:74;--rz:-10;--zoom:1.02;--gap:10.5;--pull:1;--out:1;--lift:0;--cite:0}
.stage[data-chapter="3"] .cam{--rx:30;--rz:-6;--zoom:1.04;--gap:5.5;--pull:1;--out:1;--face:1;--lift:12;--cite:1}

.stage-hud{display:none;position:absolute;left:18px;top:18px;z-index:2;align-items:baseline;gap:6px;margin:0;padding:8px 14px;border:var(--stroke);border-radius:999px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.has-js .stage-hud{display:inline-flex}
.hud-num{font-size:15px;letter-spacing:.04em}
.hud-total{color:var(--muted)}
.scene-controls{display:none;padding:0 14px 14px;gap:8px;flex-wrap:wrap}.scene-controls[hidden]{display:none!important}.scene-controls button{min-height:44px;padding:10px 18px;border:1px solid var(--petrol);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}.scene-controls button[aria-pressed="true"]{background:var(--petrol);color:#fff}.scene-controls button:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
.build{position:absolute;right:16px;bottom:16px;z-index:2;width:min(250px,46%);padding:16px 18px;border:var(--stroke);border-radius:22px;background:#ffffffe8;box-shadow:0 14px 34px -24px #0f1e2488}
.build-title{color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.build-list{list-style:none;display:grid;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid #0f1e2426;counter-reset:b}
.build-list li{position:relative;padding-left:22px;color:var(--ink);font-size:13px;line-height:1.45;counter-increment:b}
.build-list li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:9px;border-radius:50%;background:var(--petrol)}
.stage[data-chapter] .build-list li{color:var(--muted)}
.stage[data-chapter] .build-list li::before{background:transparent;border:1.5px solid #0f1e2470}
.stage[data-chapter="1"] li[data-ch="1"],.stage[data-chapter="2"] li[data-ch="2"],.stage[data-chapter="3"] li[data-ch="3"]{color:var(--ink);font-weight:600}
.stage[data-chapter="1"] li[data-ch="1"]::before,.stage[data-chapter="2"] li[data-ch="2"]::before,.stage[data-chapter="3"] li[data-ch="3"]::before{border-color:var(--mint);background:var(--mint);box-shadow:0 0 0 4px #3fbf9f33}
.stage[data-chapter="2"] li[data-ch="1"],.stage[data-chapter="3"] li[data-ch="1"],.stage[data-chapter="3"] li[data-ch="2"]{color:var(--ink)}
.stage[data-chapter="2"] li[data-ch="1"]::before,.stage[data-chapter="3"] li[data-ch="1"]::before,.stage[data-chapter="3"] li[data-ch="2"]::before{background:var(--petrol);border-color:var(--petrol)}
.stage figcaption{position:absolute;left:20px;bottom:16px;z-index:2;max-width:calc(54% - 30px);color:var(--muted);font-size:12px;line-height:1.45}

/* ---------- Ejemplo y decisión ---------- */
.example{padding-block:clamp(70px,9vw,120px) 80px}
.example-label{font-size:12.5px!important;color:var(--muted)}
.explore-button{font-size:13px!important}
.example-figure{border:var(--stroke)!important}
.decide{padding-block:clamp(40px,6vw,80px) clamp(60px,8vw,110px)}
.decide-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:0 60px;align-items:end;margin-bottom:34px}
.decide-head .tag{grid-column:1 / -1;justify-self:start}
.decide-head h2{font-size:clamp(2rem,4vw,3.6rem);max-width:17ch}
.decide-head p{font-size:16px;max-width:40ch}
.decide-cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;perspective:1400px}
.decide-card{--rise:0;--ry:0deg;--hover:0px;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:310px;height:100%;padding:20px 22px 24px;border:2px solid var(--ink);border-radius:26px;color:#fff;text-decoration:none;overflow:hidden;
  transform:translateY(calc(var(--rise) * 1px + var(--hover))) rotateY(var(--ry));transition:transform .45s var(--ease),box-shadow .45s var(--ease);box-shadow:0 22px 44px -28px #0f1e24cc}
.decide-cards li:first-child .decide-card{--ry:8deg;transform-origin:100% 50%}
.decide-cards li:last-child .decide-card{--ry:-8deg;transform-origin:0 50%}
.decide-card:hover,.decide-card:focus-visible{--ry:0deg;--hover:-6px;box-shadow:0 30px 54px -28px #0f1e24ee}
.decide-card:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
.dc-proceso{background:linear-gradient(160deg,#1f6b61,#0f2f2c)}
.dc-control{background:linear-gradient(160deg,#1a3a4a,#0b1a22)}
.dc-presupuesto{background:linear-gradient(160deg,#30505f,#132630)}
.dc-label{align-self:flex-start;padding:5px 12px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.dc-title{font-size:clamp(22px,2.1vw,30px);font-weight:620;line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.dc-art{position:relative;height:120px;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(-36deg);margin:4px auto 0;width:120px}
.dc-art i{position:absolute;inset:0;border:1.5px solid #ffffffc0;border-radius:14px;background:#ffffff14}
.dc-proceso .dc-art i:nth-child(1){transform:translateZ(0) scale(1)}.dc-proceso .dc-art i:nth-child(2){transform:translateZ(18px) scale(.8)}.dc-proceso .dc-art i:nth-child(3){transform:translateZ(36px) scale(.6);background:#3fbf9f55}
.dc-control .dc-art i:nth-child(1){border-style:dashed}.dc-control .dc-art i:nth-child(2){inset:18%;transform:translateZ(14px)}.dc-control .dc-art i:nth-child(3){inset:36%;transform:translateZ(28px);background:#3fbf9f66}
.dc-presupuesto .dc-art i{height:28%;inset:auto 0 auto 0}.dc-presupuesto .dc-art i:nth-child(1){top:0;transform:translateZ(10px)}.dc-presupuesto .dc-art i:nth-child(2){top:36%;transform:translateZ(20px)}.dc-presupuesto .dc-art i:nth-child(3){top:72%;transform:translateZ(30px);background:#3fbf9f55}

/* ---------- Secciones heredadas: legibilidad mínima 12px y trazo editorial ---------- */
.process-head>div .tag,.services-head .tag,.faq-head .tag,.contact-copy .tag{margin-bottom:18px}
.privacy-head .tag{margin-bottom:22px}
.privacy .privacy-limit{font-size:13.5px}
.faqs p{font-size:14px}
.footer-top p{font-size:13px}.footer-bottom{font-size:12.5px}
#navigation>a:not(.button){font-size:12.5px}
.contact form{border:var(--stroke)}

@media(max-width:1200px){#navigation>a:not(.button){font-size:12px;padding-inline:8px}.button.small{font-size:12px}.motion-toggle{font-size:12px}}
@media(max-width:1023px){
  .story{grid-template-columns:minmax(0,1fr)}
  .opening,.chapter,.stage-col{grid-column:1;grid-row:auto}
  .scene-controls{display:flex}
  .opening{min-height:0;padding-block:36px 28px}
  .chapter{min-height:0;padding-block:56px 8px}
  .stage{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;border-radius:28px}
  .stage-view{position:relative;inset:auto;width:100%;aspect-ratio:1 / 1;max-height:620px}
  .build{position:relative;right:auto;bottom:auto;width:auto;margin:0 14px 14px}
  .stage figcaption{position:static;max-width:none;margin:0 18px 16px}
  .build-list{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));column-gap:16px}
  .decide-head{grid-template-columns:1fr;gap:16px}
}
@media(max-width:760px){
  .decide-cards{grid-template-columns:1fr;perspective:none}
  .decide-cards li .decide-card{--ry:0deg!important;min-height:0}
  .dc-art{height:90px;width:90px;margin:0 0 0 auto;position:absolute;right:26px;top:22px}
  .dc-title{margin-top:70px;max-width:16ch}
}
@media(max-width:600px){
  .tag{font-size:12px;letter-spacing:.1em}
  .opening h1{font-size:clamp(2rem,11.6cqi,3rem);line-height:1.02}
  .opening .hero-actions .button{min-height:49px;font-size:13px;padding:12px 18px}
  .chapter h2{font-size:clamp(1.9rem,9.4cqi,2.4rem)}
  .chapter-index a{font-size:12.5px;padding-right:12px}
  .stage{border-radius:24px}
  .stage-hud{left:12px;top:12px;font-size:12px}
  .build{padding:14px 16px;margin:0 10px 10px}
  .example-label{font-size:12px!important}
  .explore-button{font-size:12.5px!important}
  .motion-toggle{font-size:12px!important}
  .hero-actions .button:first-child{white-space:normal}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.chapter-index a,.chapter-points li,.build{background-color:#fff}}