/* GRIGNƎN × bruX — demo.css — maqueta estática, brief AQT-GRIGNEN-BRUX-001 v0.1
   Implementación visual separada de los tokens (styles/variables.css, copia íntegra de S02).
   Sin sombras, sin animación, sin recursos remotos.
   Breakpoints literales: 767px y 1023px (las variables no se resuelven dentro de @media). */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-regular);
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }

:focus-visible {
  outline: var(--component-focus-ring-weight) solid var(--state-focus-outline);
  outline-offset: 2px;
}

.eyebrow {
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-eyebrow);
  color: var(--color-stone);
}

.note {
  margin-top: var(--spacing-16);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}

.surface { border-radius: var(--radius-card); }
.surface--project { background: var(--surface-project); }
.surface--relation { background: var(--surface-relation); }

/* ---------- Escena 1 · Hero ---------- */

.hero {
  position: relative;
  max-width: var(--layout-page-max);
  margin: 0 auto;
  background: var(--surface-image-reserve);
}

.hero__media { position: relative; }

.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-project-aspect-ratio);
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-none);
}

.hero__credit {
  padding: var(--spacing-8) var(--layout-gutter-mobile);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
  background: var(--surface-base);
}

.hero__body {
  padding: var(--spacing-24) var(--layout-gutter-mobile) var(--spacing-32);
  background: var(--surface-base);
}

.hero__title {
  margin-top: var(--spacing-12);
  max-width: var(--component-hero-title-max);
  font-family: var(--typeface-display-mobile);
  font-size: var(--text-display-mobile);
  line-height: var(--leading-display-mobile);
  letter-spacing: var(--tracking-display-mobile);
  font-weight: var(--weight-display-mobile);
  color: var(--color-ivory);
}

/* ---------- Escenas ---------- */

main { display: block; }

.scene {
  max-width: var(--layout-content-max);
  margin: 0 auto;
  padding: 0 var(--layout-gutter-mobile);
  margin-top: var(--layout-section-gap-mobile);
}

.scene__title {
  margin-bottom: var(--spacing-24);
  font-family: var(--typeface-heading-sm);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--weight-heading-sm);
}

/* ---------- Escena 2 · Expediente ---------- */

.expediente { padding: var(--layout-card-padding-mobile); }

.expediente__title {
  margin-top: var(--spacing-8);
  font-family: var(--typeface-heading-sm);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--weight-heading-sm);
}

.expediente__id { color: var(--color-stone); }

.expediente__facts {
  margin-top: var(--spacing-24);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--component-line-weight) solid var(--color-divider);
}

.expediente__facts > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
  padding: var(--spacing-16) 0;
  border-bottom: var(--component-line-weight) solid var(--color-divider);
}

.expediente__facts dt {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-label);
  color: var(--color-ash);
}

.expediente__facts dd {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ivory);
}

.is-active-text { color: var(--state-active-text) !important; }

/* ---------- Escena 3 · Continuidad (móvil/tableta: vertical) ---------- */

.stages { position: relative; }

.stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--spacing-16) 1fr;
  grid-template-areas: "marker label" ". state";
  column-gap: var(--spacing-16);
  padding-bottom: var(--spacing-24);
}

.stage:last-child { padding-bottom: 0; }

.stage__marker {
  grid-area: marker;
  width: var(--spacing-16);
  height: var(--spacing-16);
  margin-top: var(--spacing-4);
  border-radius: var(--radius-pill);
  border: var(--component-line-weight) solid var(--color-ash);
  background: transparent;
  position: relative;
  z-index: 1;
}

.stage__label {
  grid-area: label;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--state-pending-text);
}

.stage__state {
  grid-area: state;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--state-pending-text);
}

.stage:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--spacing-8) - 1px);
  top: var(--spacing-20);
  bottom: calc(var(--spacing-4) * -1);
  width: var(--component-line-weight);
  background: var(--color-divider);
}

.stage.is-complete .stage__marker {
  background: var(--color-ivory);
  border-color: var(--color-ivory);
}
.stage.is-complete .stage__label,
.stage.is-complete .stage__state { color: var(--state-completed-text); }
.stage.is-complete:not(:last-child)::after { background: var(--color-ivory); }

.stage.is-active .stage__marker {
  background: var(--state-active-marker);
  border: var(--component-active-line-weight) solid var(--state-active-marker);
}
.stage.is-active .stage__label,
.stage.is-active .stage__state { color: var(--state-active-text); }
.stage.is-active:not(:last-child)::after { background: var(--color-divider); }

/* tramo que llega a la etapa activa */
.stage.is-complete:has(+ .is-active)::after {
  background: var(--state-active-marker);
  width: var(--component-active-line-weight);
  left: calc(var(--spacing-8) - 1px);
}

/* ---------- Escena 4 · Relaciones (móvil/tableta: apiladas con línea lateral) ---------- */

.relations__root {
  display: inline-block;
  padding: var(--spacing-12) var(--spacing-16);
  border: var(--component-line-weight) solid var(--color-border-strong);
  border-radius: var(--radius-small);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-label);
  color: var(--color-ivory);
}

.relations__stem { display: none; }

.relations__grid {
  margin-left: var(--spacing-16);
  padding: var(--spacing-24) 0 0 var(--spacing-24);
  border-left: var(--component-line-weight) solid var(--color-divider);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-16);
}

.relation {
  position: relative;
  padding: var(--layout-card-padding-mobile);
}

.relation::before {
  content: "";
  position: absolute;
  left: calc(var(--spacing-24) * -1);
  top: var(--spacing-32);
  width: var(--spacing-24);
  height: var(--component-line-weight);
  background: var(--color-divider);
}

.relation__title {
  margin-bottom: var(--spacing-16);
  font-family: var(--typeface-subheading);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--weight-subheading);
}

.relation__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8) var(--spacing-12);
  padding: var(--spacing-12) 0;
  border-top: var(--component-line-weight) solid var(--color-divider);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.relation__list li > span:first-child { color: var(--color-ivory); }
.relation__list li > span:last-child { color: var(--color-stone); }

.tag {
  padding: var(--spacing-4) var(--spacing-12);
  border: var(--component-line-weight) solid var(--color-divider);
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-stone) !important;
  white-space: nowrap;
}

.tag--active { color: var(--state-active-text) !important; }

/* ---------- Escena 5 · Cierre ---------- */

.next { padding: var(--layout-card-padding-mobile); }

.next__action {
  margin-top: var(--spacing-8);
  font-family: var(--typeface-subheading);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--weight-subheading);
}

.closing {
  position: relative;
  margin-top: var(--layout-section-gap-mobile);
  padding-top: var(--spacing-24);
  font-family: var(--typeface-heading-sm);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--weight-subheading);
  color: var(--color-ivory);
}

.closing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--spacing-48);
  height: var(--component-active-line-weight);
  background: var(--color-magenta);
}

.disclaimer {
  max-width: var(--layout-content-max);
  margin: var(--layout-section-gap-mobile) auto 0;
  padding: var(--spacing-24) var(--layout-gutter-mobile) var(--spacing-48);
  border-top: var(--component-line-weight) solid var(--color-divider);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-stone);
}

/* ---------- Tableta y escritorio (≥768px) ---------- */

@media (min-width: 768px) {
  .hero__media img { aspect-ratio: 948 / 410; }

  .hero__credit { padding: var(--spacing-8) var(--layout-gutter-desktop); }

  .hero__body { padding: var(--spacing-32) var(--layout-gutter-desktop) var(--spacing-48); }

  .hero__title {
    font-family: var(--typeface-display);
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-display);
  }

  .scene {
    padding: 0 var(--layout-gutter-desktop);
    margin-top: var(--layout-section-gap);
  }

  .expediente { padding: var(--layout-card-padding); }

  .expediente__title {
    font-family: var(--typeface-heading);
    font-size: var(--text-heading);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    font-weight: var(--weight-heading);
  }

  .expediente__facts { grid-template-columns: repeat(2, 1fr); column-gap: var(--spacing-48); }

  .relation, .next { padding: var(--layout-card-padding); }

  .closing { margin-top: var(--layout-section-gap); }
  .disclaimer { margin-top: var(--layout-section-gap); padding-left: var(--layout-gutter-desktop); padding-right: var(--layout-gutter-desktop); }
}

/* ---------- Escritorio (≥1024px) ---------- */

@media (min-width: 1024px) {
  .stages {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .stage {
    grid-template-columns: 1fr;
    grid-template-areas: "marker" "label" "state";
    justify-items: start;
    row-gap: var(--spacing-4);
    padding-bottom: 0;
    padding-right: var(--spacing-8);
  }

  .stage__marker { margin-top: 0; margin-bottom: var(--spacing-12); }

  .stage:not(:last-child)::after {
    left: var(--spacing-16);
    right: calc(var(--spacing-4) * -1);
    top: calc(var(--spacing-8) - 1px);
    bottom: auto;
    width: auto;
    height: var(--component-line-weight);
  }

  .stage.is-complete:has(+ .is-active)::after {
    left: var(--spacing-16);
    width: auto;
    height: var(--component-active-line-weight);
    top: calc(var(--spacing-8) - 1px);
  }

  .relations { position: relative; }

  .relations__root { display: block; width: max-content; margin: 0 auto; }

  .relations__stem {
    display: block;
    width: var(--component-line-weight);
    height: var(--spacing-24);
    margin: 0 auto;
    background: var(--color-divider);
  }

  .relations__grid {
    position: relative;
    margin-left: 0;
    padding: var(--spacing-24) 0 0 0;
    border-left: 0;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--spacing-24);
    row-gap: 0;
  }

  .relations__grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc((100% - var(--spacing-48)) / 6);
    right: calc((100% - var(--spacing-48)) / 6);
    height: var(--component-line-weight);
    background: var(--color-divider);
  }

  .relation::before {
    left: 50%;
    top: calc(var(--spacing-24) * -1);
    width: var(--component-line-weight);
    height: var(--spacing-24);
  }
}

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