:root{
  /* Colores editables del sistema visual */
  --page-bg: #f5ead4;
  --card-bg: #efe3d2;
  --inner-card-bg: #dfd2bd;

  --col-fondo: var(--page-bg);
  --col-texto: #14395f;
  --col-acento: #d56a1f;
  --col-tinta: #6d8d82;
  --col-lima: #8f9a4b;
  --col-negro: #1d1915;
  --col-petrol: #0f4c5b;
  --col-borde: rgba(20, 57, 95, 0.18);

  --infraestructura: #dc681a;
  --vehiculos: #1c538d;
  --humano: #63949e;
  --noHumano: #9ba44c;
  --decision: #2ca920;
  --route-accent: #dc681a;

  --ff-base: "mozaic-geo-variable", sans-serif;
  --ff-display: "gridlite-pe-variable", sans-serif;

  --maxw: 84rem;
  --content-pad: clamp(1rem, 2.2vw, 2.25rem);

  --sp-1: 0.55rem;
  --sp-2: 1rem;
  --sp-3: 1.55rem;
  --sp-4: 2.3rem;
  --sp-5: 3.8rem;
  --radius: 0.35rem;
  --radius-pill: 0.15rem;
  --bdr: 0.1rem solid var(--col-borde);
  --header-bg: #0f4c5b;
  --footer-bg: var(--page-bg);

  --ghost: rgba(20, 57, 95, 0.08);
  --ghost-stroke: rgba(20, 57, 95, 0.18);
  --soft-line: rgba(20, 57, 95, 0.1);
  --surface: var(--card-bg);
  --surface-soft: var(--inner-card-bg);
  --surface-warm: var(--inner-card-bg);
}

*{ box-sizing: border-box; }
html{ font-size: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  color: var(--col-texto);
  font-family: var(--ff-base);
  line-height: 1.55;
  background: var(--col-fondo);
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

.site-shell{
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.container,
.header-inner,
.footer-inner{
  width: min(100%, var(--maxw));
  margin-inline: auto;
  padding-inline: var(--content-pad);
}
.container{
  flex: 1;
  padding-top: clamp(1.5rem, 2vw, 2.25rem);
  padding-bottom: clamp(2.75rem, 4vw, 4rem);
}
.stack > * + *{ margin-top: var(--sp-3); }

.site-header{
  position: sticky;
  top: 0;
  z-index: 30;
  isolation: isolate;
  background-color: var(--header-bg);
  border-bottom: 0.1rem solid rgba(238, 226, 208, 0.18);
}

.header-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding-top: 0.7rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 76rem){
  .header-inner{ grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.hero{
  min-width: 0;
}

.eyebrow{
  margin: 0 0 0.3rem 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
  color: var(--col-fondo);
}

.kicker{
  margin: 0.25rem 0 0 0;
  font-size: 1rem;
  opacity: 0.92;
  max-width: 30ch;
  color: var(--col-fondo);
}

.hero-center{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
}

.hero-title-box h1{
  margin: 0;
  max-width: 40ch;
  font-family: var(--ff-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.94;
  color: var(--col-fondo);
  font-variation-settings: "BACK" 1, "ELSH" 3, "RECT" 1, "wght" 900;
}

.hero-sub{
  display: block;
  margin-top: 0.85rem;
  max-width: 20ch;
  font-family: var(--ff-base);
  font-size: clamp(1.02rem, 2vw, 1.55rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--col-lima);
  text-transform: none;
  font-variation-settings: "wght" 700;
}

.hero-text-box{
  max-width: 33rem;
  margin-top: 1rem;
  padding-left: 1.15rem;
  border-left: 0.18rem solid rgba(238, 226, 208, 0.42);
}

.pregunta{
  margin: 0;
  max-width: 26ch;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  color: var(--col-fondo);
  font-variation-settings: "wght" 520;
}

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1.4rem;
}

.hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.55rem 1rem;
  border: 0.1rem solid rgba(238, 226, 208, 0.32);
  border-radius: var(--radius-pill);
  background: rgba(238, 226, 208, 0.1);
  color: var(--col-fondo);
  font-variation-settings: "wght" 700;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.hero-btn:hover{
  transform: translateY(-0.08rem);
  background: rgba(238, 226, 208, 0.18);
  border-color: rgba(238, 226, 208, 0.42);
}

.hero-btn:focus-visible{
  outline: 0.35rem solid rgba(143, 154, 75, 0.55);
  outline-offset: 0.16rem;
}

.nav-principal{ align-self: end; }
.nav-list{
  list-style: none;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
}
@media (min-width: 76rem){ .nav-list{ justify-content: flex-end; } }
.nav-principal a,
button{
  -webkit-tap-highlight-color: transparent;
}
.nav-principal a{
  display: inline-block;
  padding: 0.14rem 0;
  border-radius: 0;
  border: 0;
  color: var(--col-fondo);
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: opacity 160ms ease, color 160ms ease;
}
.nav-principal a:hover{ color: var(--col-lima); }
.nav-principal a.activo{ color: var(--col-acento); background: transparent; border-color: transparent; }
.nav-principal a:focus-visible,
.walk-button:focus-visible,
.legend-clear:focus-visible{
  outline: 0.35rem solid rgba(143, 154, 75, 0.45);
  outline-offset: 0.14rem;
}
.legend-item:focus-visible{
  outline: 0.12rem solid rgba(143, 154, 75, 0.6);
  text-decoration: underline;
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.18rem;
}

a{ color: var(--col-acento); text-decoration: none; }
a:hover{ opacity: 0.86; }

h2{
  margin: 0 0 0.55rem 0;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  line-height: 1.1;
  color: var(--col-acento);
  font-variation-settings: "wght" 760;
}
h3{
  margin: 0 0 0.5rem 0;
  font-size: 1.08rem;
  line-height: 1.18;
  color: var(--col-texto);
  font-variation-settings: "wght" 730;
}
p{ margin: 0 0 var(--sp-2) 0; max-width: 78ch; }
p:last-child{ margin-bottom: 0; }
strong{ font-variation-settings: "wght" 760; }
.lead{ font-size: clamp(1.15rem, 1.8vw, 1.38rem); line-height: 1.35; max-width: 42ch; }
.section-tag,
.status-pill,
.active-agent{
  margin: 0 0 0.4rem 0;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  opacity: 0.72;
}

.card{
  border: var(--bdr);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 1.6vw, 1.7rem);
  background: var(--surface);
  backdrop-filter: none;
  box-shadow: 0 0 0 0.03rem rgba(238, 226, 208, 0.42) inset;
}
.analysis-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  align-items: start;
}
.diagram-column{
  min-width: 0;
}
.card-head{
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.status-pill{
  flex: 0 0 auto;
  max-width: 18rem;
  padding: 0.42rem 0.8rem;
  border-radius: var(--radius);
  border: 0.1rem solid rgba(20, 57, 95, 0.2);
  background: var(--surface);
  box-shadow: 0 0 0 0.03rem rgba(238, 226, 208, 0.5) inset;
  opacity: 0.9;
  text-align: center;
}

.composition-card{
  border: var(--bdr);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: visible;
  box-shadow: 0 0 0 0.03rem rgba(238, 226, 208, 0.42) inset;
}
.route-heading{
  display: block;
  gap: clamp(0.7rem, 1.2vw, 1.1rem);
  padding: clamp(0.45rem, 0.75vw, 0.7rem) clamp(1rem, 1.6vw, 1.45rem) 0;
  background: transparent;
}
.route-heading h2{
  margin: 0;
  max-width: none;
  color: var(--route-accent);
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4.2vw, 4.35rem);
  line-height: 0.88;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
  text-transform: uppercase;
  font-variation-settings: "BACK" 1, "ELSH" 3, "RECT" 1, "wght" 900;
}
.composition-grid{
  display: grid;
  grid-template-columns: minmax(17rem, 0.68fr) minmax(34rem, 1.9fr);
  grid-template-areas:
    "reading spiral";
  gap: clamp(0.8rem, 1.3vw, 1.2rem);
  align-items: stretch;
  padding: clamp(0.25rem, 0.55vw, 0.48rem) clamp(1rem, 1.6vw, 1.45rem) clamp(0.8rem, 1.2vw, 1rem);
}
.reading-column{
  grid-area: reading;
  display: grid;
  align-content: start;
  gap: 0.85rem;
  min-width: 0;
}
.word-block{
  position: absolute;
  right: clamp(0.55rem, 1vw, 0.9rem);
  bottom: clamp(0.5rem, 0.9vw, 0.8rem);
  z-index: 2;
  width: min(56%, 29rem);
  display: grid;
  justify-self: auto;
  gap: 0.2rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}
.word-block .card-head{
  align-items: start;
  justify-content: end;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  text-align: right;
  transform: translateY(-1.65rem);
}
.word-block .section-tag{
  margin-bottom: 0;
}
.word-caption{
  margin: 0;
  color: rgba(20, 57, 95, 0.66);
  font-size: 0.74rem;
  line-height: 1.15;
}
.word-scroll{
  width: 100%;
  overflow-x: auto;
  padding: 0.1rem 0 0;
  scrollbar-color: var(--col-texto) transparent;
}
.pixel-word{
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  height: auto;
  opacity: 0.56;
}
.diagram-note{
  margin-top: var(--sp-1);
  font-size: 0.92rem;
  opacity: 0.82;
}
.word-base{
  fill: rgba(179, 179, 179, 0.393);
  stroke: var(--ghost-stroke);
  stroke-width: .1;
  transition: opacity 160ms ease;
}
.base-no-data{ opacity: .72; }
.word-datum .datum-bg{
  stroke: transparent;
  stroke-width: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  transform-box: fill-box;
  transform-origin: center;
}
.word-datum .datum-symbol{
  fill: var(--col-fondo);
  stroke: var(--col-fondo);
  stroke-width: 3.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  pointer-events: none;
}
.word-datum:hover .datum-bg{ transform: scale(1.08); }
.pixel-word.is-filtered .word-base,
.pixel-word.is-filtered .word-datum:not(.is-selected){ opacity: .07; pointer-events: none; }
.pixel-word.is-filtered .word-datum.is-selected .datum-bg{ transform: scale(1.08); }

.spiral-card{
  grid-area: spiral;
  position: relative;
  isolation: isolate;
  min-height: clamp(20rem, 25vw, 26.5rem);
  margin-top: calc(-1 * clamp(5.1rem, 8vw, 7.4rem));
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: start;
  background: transparent;
}
.spiral-card::before{
  content: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(238, 226, 208, 0.18);
}

.walks-block{ min-width: 0; }
.route-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: baseline;
}
.route-meta span:last-child{
  color: rgba(20, 57, 95, 0.62);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-variation-settings: "wght" 650;
}
#spiralScore{
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 610px);
  height: auto;
  margin: calc(-1 * clamp(1.25rem, 2.2vw, 2.1rem)) auto 0 2%;
}
.score-path{ fill: none; stroke: rgba(28, 83, 141, 0.095); stroke-width: 2.95; }
.stitch{
  opacity: 0;
  animation: stitchIn 260ms ease forwards;
  transition: opacity 160ms ease, transform 160ms ease;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes stitchIn{ to{ opacity: 1; } }
.stitch.is-highlight{ transform: scale(1.22); }

.diagram-legend,
.spiral-insight{
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}
.spiral-insight{
  min-width: 0;
}
.diagnosis-card{
  min-width: 0;
}
.spiral-insight p{ font-size: 0.86rem; line-height: 1.38; }
.spiral-insight p + p{ margin-top: 0.55rem; }
.action-legend{
  position: absolute;
  top: clamp(2.35rem, 3.4vw, 3.1rem);
  right: clamp(0.45rem, 0.9vw, 0.8rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0.28rem;
  font-size: 0.8rem;
  width: max-content;
  max-width: 9rem;
  margin: 0;
  padding-top: 0;
}
.action-legend .section-tag{
  width: 100%;
  margin: 0 0 0.08rem 0;
  text-align: right;
}
.action-legend span{
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}
.glyph{
  width: 0.9rem;
  height: 0.9rem;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  color: var(--col-texto);
}
.glyph-x::before,
.glyph-x::after{
  content: "";
  position: absolute;
  top: 0.39rem;
  left: 0.05rem;
  width: 0.8rem;
  height: 0.14rem;
  background: currentColor;
}
.glyph-x::before{ transform: rotate(45deg); }
.glyph-x::after{ transform: rotate(-45deg); }
.glyph-dot{ width: 0.72rem; height: 0.72rem; border-radius: 50%; background: currentColor; }
.glyph-square{ width: 0.72rem; height: 0.72rem; background: currentColor; }
.glyph-triangle{ width: 0; height: 0; border-left: 0.43rem solid transparent; border-right: 0.43rem solid transparent; border-bottom: 0.82rem solid currentColor; }

.side-panel{
  position: sticky;
  top: clamp(5.8rem, 9vw, 7.6rem);
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.55rem 1.45rem;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0.46rem 0.72rem;
  background: rgba(245, 234, 212, 0.96);
  border-color: rgba(20, 57, 95, 0.12);
  box-shadow: 0 0.36rem 0.85rem rgba(20, 57, 95, 0.055);
}
.side-section{
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
  margin: 0;
  min-width: 0;
  flex: 0 0 auto;
}
.routes-panel{
  padding-right: 1.45rem;
  border-right: 0.1rem solid rgba(20, 57, 95, 0.14);
}
.side-panel .section-tag{
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.72rem;
  min-width: 4.2rem;
}
.walk-buttons,
.side-panel .legend{
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  justify-content: flex-start;
  align-items: flex-start;
}
.walk-button,
.legend-item,
.legend-clear{
  appearance: none;
  width: auto;
  max-width: 7.2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  border: 0.1rem solid rgba(20, 57, 95, 0.18);
  background: var(--surface);
  box-shadow: 0 0 0 0.03rem rgba(238, 226, 208, 0.42) inset;
  color: var(--col-texto);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.12;
  min-height: 1.78rem;
  padding: 0.34rem 0.5rem;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.walk-button:hover,
.legend-item:hover,
.legend-clear:hover{ transform: translateY(-0.05rem); }
.walk-button{
  min-height: 0;
  justify-content: center;
  max-width: 6.2rem;
  color: var(--col-texto);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  font-size: 0.8rem;
  line-height: 1.28;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.46rem;
  text-align: left;
}
.walk-button:hover{
  border-color: transparent;
  background: transparent;
}
.walk-button.is-selected{
  color: var(--col-fondo);
  background: var(--col-petrol);
  border-color: var(--col-petrol);
}
.side-panel .legend .section-tag,
.side-panel .legend .legend-clear{
  flex: 0 0 auto;
}
.side-panel .legend .section-tag{
  justify-self: stretch;
}
.legend-item,
.legend-clear{
  width: auto;
  min-height: 0;
  justify-content: center;
  max-width: 7.1rem;
  gap: 0.42rem;
  font-size: 0.8rem;
  line-height: 1.28;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.46rem;
  text-align: left;
}
.legend-item span{
  display: block;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999rem;
  background: currentColor;
  flex: 0 0 auto;
}
.legend-clear{
  color: var(--col-texto);
  border-color: transparent;
  background: rgba(245, 234, 212, 0.28);
  box-shadow: none;
}
.legend-clear:hover,
.legend-clear.is-selected{
  color: var(--col-texto);
  border-color: var(--col-acento);
  background: transparent;
}
.legend-item{
  color: var(--col-texto);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.legend-item:hover{
  border-color: transparent;
  background: transparent;
}
.legend-item[data-agent="infraestructura"] span{ background: var(--infraestructura); }
.legend-item[data-agent="vehiculos"] span{ background: var(--vehiculos); }
.legend-item[data-agent="humano"] span{ background: var(--humano); }
.legend-item[data-agent="noHumano"] span{ background: var(--noHumano); }
.legend-item[data-agent="decision"] span{ background: var(--decision); }
.legend-item[data-agent="infraestructura"].is-selected{ background: var(--infraestructura); color: var(--col-fondo); border-color: var(--infraestructura); }
.legend-item[data-agent="vehiculos"].is-selected{ background: var(--vehiculos); color: var(--col-fondo); border-color: var(--vehiculos); }
.legend-item[data-agent="humano"].is-selected{ background: var(--humano); color: var(--col-fondo); border-color: var(--humano); }
.legend-item[data-agent="noHumano"].is-selected{ background: var(--noHumano); color: var(--col-fondo); border-color: var(--noHumano); }
.legend-item[data-agent="decision"].is-selected{ background: var(--decision); color: var(--col-fondo); border-color: var(--decision); }
.legend-item.is-selected span{ background: var(--col-fondo); }

@media (min-width: 76rem){
  .side-panel{
    align-items: center;
    justify-content: flex-start;
    overflow-x: visible;
  }
  .side-section,
  .walk-buttons,
  .side-panel .legend{
    align-items: center;
  }
  .routes-panel,
  .side-panel .legend{
    flex: 1 1 auto;
    min-width: 0;
  }
  .routes-panel{
    flex-grow: 0.85;
  }
  .side-panel .legend{
    flex-grow: 1.35;
  }
  .walk-buttons,
  .side-panel .legend{
    flex-wrap: nowrap;
  }
  .walk-button,
  .legend-item,
  .legend-clear{
    max-width: none;
    white-space: nowrap;
    line-height: 1.12;
    text-align: center;
  }
}

.reading-card{
  position: absolute;
  top: clamp(9.8rem, 14vw, 12rem);
  right: clamp(0.45rem, 0.9vw, 0.8rem);
  z-index: 4;
  width: min(15.5rem, 32%);
  border: 0.1rem solid rgba(20, 57, 95, 0.14);
  border-radius: var(--radius);
  padding: 0.68rem;
  background: rgba(245, 234, 212, 0.86);
  backdrop-filter: blur(0.32rem);
  box-shadow: 0 0.65rem 1.4rem rgba(20, 57, 95, 0.11);
  font-size: 0.82rem;
}
.reading-card strong{
  display: block;
  margin-bottom: 0.35rem;
  color: var(--col-acento);
}
.reading-card[data-agent="infraestructura"] strong{ color: var(--infraestructura); }
.reading-card[data-agent="vehiculos"] strong{ color: var(--vehiculos); }
.reading-card[data-agent="humano"] strong{ color: var(--humano); }
.reading-card[data-agent="noHumano"] strong{ color: var(--noHumano); }
.reading-card[data-agent="decision"] strong{ color: var(--decision); }
.reading-card[hidden]{
  display: none;
}
.diagnosis-card{
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-size: 0.88rem;
}
.diagnosis-card strong{
  display: block;
  margin: 0.55rem 0 0.35rem;
  color: var(--col-texto);
  font-size: 1rem;
}
.diagnosis-card p{ line-height: 1.42; }
.diagnosis-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.diagnosis-meta span,
.comparison-facts span{
  display: inline-flex;
  width: fit-content;
  border: 0.1rem solid rgba(20, 57, 95, 0.18);
  border-radius: var(--radius);
  padding: 0.22rem 0.48rem;
  background: var(--surface);
  font-size: 0.72rem;
  line-height: 1;
}
.diagnosis-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem 0.62rem;
  margin-top: 0.85rem;
  padding-top: 0.72rem;
  border-top: 0.08rem solid rgba(20, 57, 95, 0.13);
}
.diagnosis-facts span{
  display: grid;
  gap: 0.12rem;
  line-height: 1.22;
}
.diagnosis-facts b{
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  opacity: 0.66;
}
.stats-grid{ display: grid; gap: 0.72rem; }
.stat-row,
.stat-group{
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.stat-row,
.stat-head{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
}
.stat-row strong,
.stat-head strong{
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 0.82rem;
}
.stat-row{
  padding-top: 0.72rem;
  border-top: 0.08rem solid rgba(20, 57, 95, 0.13);
}
.stat-head{ margin-bottom: 0.5rem; }
.stat-details{
  position: relative;
  border: 0.1rem solid rgba(20, 57, 95, 0.14);
  border-radius: var(--radius);
  background: rgba(245, 234, 212, 0.22);
}
.stat-details summary{
  cursor: pointer;
  list-style: none;
  padding: 0.52rem 0.68rem;
  color: var(--col-texto);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  font-variation-settings: "wght" 760;
}
.stat-details summary::-webkit-details-marker{
  display: none;
}
.stat-details summary::after{
  content: "+";
  float: right;
  color: var(--col-acento);
}
.stat-details[open] summary::after{
  content: "-";
}
.stat-details-body{
  position: absolute;
  left: 0;
  top: calc(100% + 0.45rem);
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(4, minmax(8.75rem, 1fr));
  gap: 0.82rem;
  width: min(66rem, calc(100vw - 3rem));
  padding: 0.7rem;
  border: 0.1rem solid rgba(20, 57, 95, 0.16);
  border-radius: var(--radius);
  background: rgba(245, 234, 212, 0.88);
  backdrop-filter: blur(0.35rem);
  box-shadow: 0 0.8rem 1.8rem rgba(20, 57, 95, 0.13);
}
.stat-details .stat-group{
  border-color: rgba(20, 57, 95, 0.12);
  padding: 0.52rem 0.62rem;
  background: rgba(245, 234, 212, 0.38);
  border-radius: var(--radius);
}
.stat-breakdown{ display: grid; gap: 0.34rem; }
.stat-chip{
  display: grid;
  grid-template-columns: 0.42rem minmax(0, 1fr) minmax(1.4rem, auto);
  gap: 0.38rem;
  align-items: center;
  color: var(--col-texto);
  font-size: 0.74rem;
  line-height: 1.2;
  padding: 0.08rem 0;
}
.stat-dot{ width: 0.42rem; height: 0.42rem; border-radius: 999rem; display: block; background: currentColor; }
.stat-chip strong{
  justify-self: end;
  padding-left: 0.35rem;
}
.stat-chip[data-agent="infraestructura"] .stat-dot{ background: var(--infraestructura); }
.stat-chip[data-agent="vehiculos"] .stat-dot{ background: var(--vehiculos); }
.stat-chip[data-agent="humano"] .stat-dot{ background: var(--humano); }
.stat-chip[data-agent="noHumano"] .stat-dot{ background: var(--noHumano); }
.stat-chip[data-agent="decision"] .stat-dot{ background: var(--decision); }

.comparative-section{
  display: grid;
  gap: var(--sp-2);
}
.synthesis-card{
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(18rem, 1fr);
  gap: var(--sp-3);
  align-items: start;
  border-left: 0.28rem solid var(--col-acento);
}
.synthesis-card h3{
  margin: 0;
  color: var(--col-texto);
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
}
.synthesis-card p{
  font-size: 1.02rem;
  line-height: 1.45;
}
.comparison-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}
.comparison-card{
  appearance: none;
  width: 100%;
  border: var(--bdr);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--surface);
  color: var(--col-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.comparison-card:hover{
  border-color: rgba(213, 106, 31, 0.55);
  transform: translateY(-0.06rem);
}
.comparison-card:focus-visible{
  outline: 0.22rem solid rgba(143, 154, 75, 0.55);
  outline-offset: 0.16rem;
}
.comparison-card.is-current{
  border-color: var(--col-acento);
  box-shadow: 0 0 0 0.06rem rgba(213, 106, 31, 0.18) inset;
}
.comparison-card h4{
  margin: 0 0 0.55rem;
  color: var(--col-texto);
  font-size: 1rem;
  line-height: 1.15;
}
.comparison-card p{
  font-size: 0.9rem;
  line-height: 1.42;
}
.comparison-facts{
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.site-footer{
  position: relative;
  isolation: isolate;
  border-top: 0.1rem solid rgba(20, 57, 95, 0.12);
  background: var(--col-fondo);
}
.footer-bleed{
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--footer-bg);
  backdrop-filter: none;
  border-top: 0.1rem solid rgba(20, 57, 95, 0.12);
  box-shadow: 0 0 0 100vmax var(--footer-bg);
  clip-path: inset(0 -100vmax 0 -100vmax);
  opacity: 70%;
}
.footer-inner{ padding-top: clamp(1.55rem, 3vw, 2.2rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.site-footer p{ margin: 0; font-size: 0.92rem; opacity: 0.82; max-width: none; }

@media (max-width: 72rem){
  .side-panel{
    display: flex;
  }
  .composition-grid{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "spiral"
      "reading";
  }
  .spiral-card,
  .reading-column{
    border-left: 0;
    border-right: 0;
  }
  .reading-column{
    border-top: 0.1rem solid rgba(20, 57, 95, 0.12);
  }
  .word-block{
    position: relative;
    right: auto;
    bottom: auto;
    width: min(72%, 24rem);
    margin: -1.4rem 0 0 auto;
  }
  .reading-column{
    grid-template-columns: 1fr;
  }
  .diagnosis-card,
  .reading-card{
    grid-column: 1 / -1;
  }
  .comparison-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56rem){
  .side-panel{
    position: sticky;
    top: calc(6.5rem + var(--sp-1));
  }
  .synthesis-card{ grid-template-columns: 1fr; }
  .card-head{ flex-direction: column; align-items: stretch; }
  .status-pill{ width: fit-content; }
  .route-heading{
    display: block;
  }
  .spiral-card{ min-height: auto; padding-bottom: 0; }
  .reading-column{ grid-template-columns: 1fr; }
  .action-legend{
    position: static;
    align-items: flex-start;
    width: auto;
    max-width: none;
    margin: 0 0 0.65rem;
  }
  .reading-card{
    position: static;
    width: 100%;
  }
  .action-legend .section-tag{ text-align: left; }
  .pixel-word{ min-width: 28rem; }
  .stat-details-body{
    grid-template-columns: repeat(2, minmax(10rem, 1fr));
    width: min(42rem, calc(100vw - 3rem));
  }
}
@media (max-width: 42rem){
  html{ font-size: 95%; }
  :root{ --content-pad: 1rem; }
  .card{ padding: 1.15rem; }
  .nav-principal a{ font-size: 0.9rem; padding: 0.52rem 0.72rem; }
  .walk-button{ font-size: 0.76rem; padding: 0.36rem 0.58rem; }
  .legend-item,
  .legend-clear{ font-size: 0.76rem; padding: 0.36rem 0.58rem; }
  .side-panel .legend,
  .walk-buttons{
    display: flex;
  }
  .route-heading h2{
    font-size: clamp(2.2rem, 16vw, 4.4rem);
  }
  .word-block{
    position: static;
    width: calc(100% - 1.5rem);
    margin: 0.75rem auto;
  }
  .stat-details-body{
    grid-template-columns: 1fr;
    width: min(22rem, calc(100vw - 2rem));
  }
  .comparison-grid{ grid-template-columns: 1fr; }
}
@media (min-width: 100rem){ :root{ --maxw: 104rem; } }