/* Almacenamiento */
.etiqueta { color: var(--soft); background: var(--bg); padding: 4px 8px; margin-left: -8px; display: inline-block; }
.etiqueta span { color: var(--ink); }
.etiqueta .pista { color: var(--bateria); }

/* 1 · reserva */
.reserva { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.celdas { position: absolute; inset: 0; width: 100%; height: 100%; }
.res-texto { position: absolute; left: var(--gutter); bottom: 108px; z-index: 2; pointer-events: none; }
.res-t { font-size: clamp(96px, 19vw, 330px); line-height: .8; font-weight: 880; letter-spacing: -.045em; margin: 14px 0 18px -.03em; font-variation-settings: 'wdth' 100; color: var(--ink); mix-blend-mode: normal; }
.res-medidor { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2; display: grid; justify-items: end; gap: 6px; background: var(--bg); padding: 18px 20px; border: 1px solid var(--linea); }
.res-medidor .mono { color: var(--soft); }
.res-medidor b { font-size: clamp(64px, 7vw, 120px); line-height: .9; font-weight: 800; letter-spacing: -.04em; font-variation-settings: 'wdth' 68; color: var(--bateria); font-variant-numeric: tabular-nums; }
.res-medidor b i { font-style: normal; font-size: .4em; margin-left: 4px; color: var(--soft); }
.res-hasta { color: var(--ink) !important; max-width: 220px; text-align: right; }

/* 2 · despiece fijo con scroll */
.despiece { position: relative; height: 420vh; border-top: 1px solid var(--linea); }
.desp-fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.desp-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.desp-texto { position: absolute; left: var(--gutter); top: 110px; bottom: 100px; width: min(400px, 36vw); z-index: 2; display: flex; flex-direction: column; gap: 22px; pointer-events: none; }
.desp-texto > .mono { color: var(--soft); }
.desp-texto h2 { font-size: clamp(40px, 4.4vw, 74px); line-height: .94; font-weight: 760; letter-spacing: -.035em; font-variation-settings: 'wdth' 80; }
.desp-texto h2 em { font-style: normal; color: var(--bateria); font-variation-settings: 'wdth' 125; }
.desp-pasos { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linea); }
.desp-pasos { background: color-mix(in srgb, var(--bg) 82%, transparent); }
.desp-pasos li { display: grid; grid-template-columns: 36px 1fr; column-gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--linea); opacity: .35; transition: opacity .5s; }
.desp-pasos li.activo { opacity: 1; }
.desp-pasos .mono { color: var(--bateria); }
.desp-pasos b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.desp-pasos li > span:last-child { grid-column: 2; color: var(--soft); font-size: 14px; max-height: 0; overflow: hidden; transition: max-height .6s ease; }
.desp-pasos li.activo > span:last-child { max-height: 80px; margin-top: 4px; }
.desp-barra { position: absolute; right: var(--gutter); top: 50%; width: 2px; height: 34vh; transform: translateY(-50%); background: var(--linea); }
.desp-barra i { position: absolute; left: 0; top: 0; width: 100%; background: var(--bateria); height: 0; }

/* 3 · química */
.quimica { padding: 140px var(--gutter) 120px; border-top: 1px solid var(--linea); }
.qui-cabeza { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; gap: 30px; }
.qui-cabeza > .mono { color: var(--soft); }
.qui-cabeza h2 { font-size: clamp(40px, 4.8vw, 84px); line-height: .94; font-weight: 760; letter-spacing: -.035em; text-align: right; font-variation-settings: 'wdth' 82; }
.qui-cabeza h2 em { font-style: normal; color: var(--bateria); font-variation-settings: 'wdth' 125; }
.qui-pantalla { position: relative; aspect-ratio: 21 / 8; border: 1px solid var(--linea); overflow: hidden; }
.qui-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.qui-capas { position: absolute; left: 0; right: 0; bottom: 4px; display: grid; grid-template-columns: 4fr 1fr 4fr; text-align: center; color: var(--soft); pointer-events: none; }
.qui-pie { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 18px; }
.qui-leyenda { font-size: 17px; max-width: 620px; }
.qui-botones { display: flex; gap: 6px; }
.qui-botones button { padding: 8px 14px; border: 1px solid var(--linea); border-radius: 999px; color: var(--soft); }
.qui-botones button[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* 4 · mezcla */
.mezcla { padding: 140px var(--gutter) 130px; border-top: 1px solid var(--linea); }
.mez-cabeza { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; }
.mez-cabeza > .mono { color: var(--soft); }
.mez-cabeza h2 { font-size: clamp(48px, 6vw, 110px); line-height: .9; font-weight: 800; letter-spacing: -.04em; text-align: right; font-variation-settings: 'wdth' 70; }
.mez-zona { height: 460px; }
.mez-svg { width: 100%; height: 100%; overflow: visible; }
.mez-svg .col { cursor: pointer; }
.mez-svg .col rect { transition: opacity .3s, transform .5s cubic-bezier(.2,.8,.2,1); transform-box: fill-box; transform-origin: bottom; }
.mez-svg .col:hover rect, .mez-svg .col.on rect { opacity: 1; }
.mez-svg .col rect { opacity: .78; }
.mez-svg .col.on .marco { stroke: var(--ink); }
.mez-svg .marco { fill: transparent; stroke: transparent; vector-effect: non-scaling-stroke; }
.mez-svg .dem { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.mez-svg .eje { stroke: var(--linea); vector-effect: non-scaling-stroke; }
.mez-svg text { font: 10px var(--mono); fill: var(--soft); }
.mezcla:not(.visto) .mez-svg .col rect { transform: scaleY(0); }
.mez-leyenda { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; color: var(--soft); align-items: center; }
.mez-leyenda i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; }
.mez-leyenda i.imp { background: repeating-linear-gradient(45deg, var(--soft) 0 2px, transparent 2px 4px); }
.mez-leyenda i.rec { border: 1px dashed var(--soft); background: none; }
.mez-leyenda i.dem { border-top: 1.5px dashed var(--ink); height: 0; }
.mez-lect { margin-left: auto; color: var(--ink); }

/* siguiente */
.siguiente { display: block; position: relative; height: 56vh; min-height: 400px; overflow: hidden; border-top: 1px solid var(--linea); }
.siguiente .mono { position: absolute; left: var(--gutter); top: 30px; color: var(--soft); }
.sig-t { position: absolute; left: var(--gutter); bottom: 40px; font-size: clamp(70px, 12vw, 210px); line-height: .8; font-weight: 850; letter-spacing: -.05em; font-variation-settings: 'wdth' 62; transition: font-variation-settings 1s cubic-bezier(.2,.8,.2,1), color .5s; }
.siguiente:hover .sig-t { font-variation-settings: 'wdth' 110; color: var(--red); }

@media (max-width: 860px) {
  .res-t { font-size: 22vw; font-variation-settings: 'wdth' 76; }
  .res-estado .pista { display: none; }
  .res-medidor { top: 96px; transform: none; padding: 10px 14px; }
  .res-medidor b { font-size: 54px; }
  .desp-texto { width: auto; right: var(--gutter); top: 90px; bottom: auto; }
  .desp-pasos { display: none; }
  .qui-cabeza, .mez-cabeza { flex-direction: column; align-items: start; }
  .qui-cabeza h2, .mez-cabeza h2 { text-align: left; }
  .qui-pantalla { aspect-ratio: 4 / 3; }
  .qui-pie { flex-direction: column; align-items: start; }
  .mez-zona { height: 300px; }
}