.testigo{ position: absolute; left: 0; width: 1px; height: 33.34%; pointer-events: none; }
.testigo[data-testigo="0"]{ top: 0; }
.testigo[data-testigo="1"]{ top: 33.33%; }
.testigo[data-testigo="2"]{ top: 66.66%; }

.hero__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}
.hero__texto{ grid-column: 1 / span 8; }
.hero__marca{ grid-column: 10 / span 3; justify-self: end; align-self: center; }
.hero__marca svg{ width: clamp(64px, 8vw, 116px); height: auto; fill: var(--orange); }

.maqueta{
  position: relative;
  margin-top: clamp(40px, 7vh, 80px);
  aspect-ratio: 16 / 8;
  min-height: 320px;
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.seccion[data-escena="paper-2"] .maqueta{ background: var(--paper-2); }

.bloque{
  position: absolute;
  --e: 1;
  translate: calc(var(--dx, 0px) * var(--e)) calc(var(--dy, 0px) * var(--e));
  transform: translate3d(calc(var(--mx, 0px) * var(--dep, 0)), calc(var(--my, 0px) * var(--dep, 0)), 0);
  opacity: calc(1 - var(--e) * .9);
  transition:
    translate .95s var(--ease) var(--d, 0s),
    opacity .75s ease var(--d, 0s),
    transform .55s var(--ease-out);
}
.maqueta.is-in .bloque{ --e: 0; }

.bloque--rotulo{
  top: 10%; left: 5%;
  font-family: var(--mono);
  font-size: clamp(10px, .82vw, 12.5px);
  letter-spacing: .14em;
  color: var(--orange-sm);
}
.bloque--titular{
  top: 19%; left: 5%; width: 42%;
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 42px);
  line-height: 1.07;
  letter-spacing: -.004em;
  color: var(--ink);
}
.bloque--parrafo{ top: 60%; left: 5%; width: 32%; display: grid; gap: clamp(9px, 1.2vh, 13px); }
.bloque--parrafo i{ display: block; height: 1px; background: var(--rule-2); }
.bloque--parrafo i:nth-child(2){ width: 92%; }
.bloque--parrafo i:nth-child(3){ width: 97%; }
.bloque--parrafo i:nth-child(4){ width: 61%; }

.bloque--figura{
  top: 14%; right: 6%; width: 34%; height: 56%;
  border: 1px solid var(--rule-2);
}
.bloque--figura b{
  position: absolute;
  left: 9%; bottom: 11%; width: 44%; height: 34%;
  background: var(--orange);
  clip-path: polygon(17% 0, 100% 0, 83% 100%, 0 100%);
  display: block;
}

.bloque--filete{ height: 1px; background: var(--rule); }
.bloque--filete-a{ top: 52%; left: 5%; width: 34%; }
.bloque--filete-b{ top: 80%; left: 5%; right: 6%; }

.bloque--indice{
  bottom: 8%; left: 5%;
  display: flex; gap: clamp(12px, 1.6vw, 26px);
  font-family: var(--mono);
  font-size: clamp(9.5px, .78vw, 11.5px);
  letter-spacing: .12em;
  color: var(--mute-paper);
}
.bloque--indice b{ font-weight: 400; color: var(--orange-sm); }

.bloque--marca{ bottom: 8%; right: 6%; width: clamp(22px, 2.4vw, 34px); }
.bloque--marca svg{ width: 100%; height: auto; fill: var(--orange); display: block; }

.ejes{
  margin-top: clamp(40px, 7vh, 76px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  column-gap: clamp(28px, 5vw, 80px);
  align-items: baseline;
}

.eje{
  width: 100%;
  display: grid;
  grid-template-columns: clamp(38px, 4vw, 58px) 1fr;
  align-items: baseline;
  gap: clamp(10px, 1.4vw, 20px);
  padding: clamp(16px, 2.4vh, 26px) 0;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: opacity .4s ease;
}

.ejes > :nth-last-child(-n+2){ border-bottom: 1px solid var(--rule); }
.eje__n{
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--orange-sm);
  transition: opacity .4s ease;
}
.eje__t{
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.5vw, 3rem);
  line-height: 1.06;
  letter-spacing: .008em;
  text-transform: uppercase;
  transition: color .4s ease, transform .55s var(--ease);
}
.eje:hover .eje__t,
.eje:focus-visible .eje__t{ transform: translateX(clamp(4px, .7vw, 12px)); }
.eje:focus-visible{ outline: 2px solid var(--orange-sm); outline-offset: 4px; }

.ejes[data-activo] .eje[aria-expanded="false"] .eje__t{ color: var(--mute-paper); }
.ejes[data-activo] .eje[aria-expanded="false"] .eje__n{ opacity: .45; }
.eje[aria-expanded="true"] .eje__t{ color: var(--ink); }

.eje__texto{
  position: relative;
  margin: 0;
  padding: clamp(16px, 2.4vh, 26px) 0;
  padding-left: clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--rule);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--mute-paper);
  text-wrap: pretty;
  opacity: 0;
  translate: 0 6px;
  transition: opacity .38s ease, translate .5s var(--ease);
}
.eje__texto::before{
  content: "";
  position: absolute; left: 0; top: clamp(18px, 2.6vh, 28px); bottom: clamp(18px, 2.6vh, 28px);
  width: 2px; background: var(--orange);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease);
}
.eje__texto.is-on{ opacity: 1; translate: 0 0; }
.eje__texto.is-on::before{ transform: none; }

.recorrido{ padding-block: 0; }
.recorrido__pista{ height: 260vh; }
.recorrido__fijo{
  position: sticky; top: 0;
  height: 100svh;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(26px, 5vh, 54px);
  overflow: hidden;
}
.recorrido__frase{
  font-family: var(--serif);
  font-size: clamp(2.1rem, 6vw, 5rem);
  line-height: 1.06;
  letter-spacing: -.004em;
}

.recorrido__frase b{
  display: inline-block;
  font-weight: 400;
  color: var(--orange);
  clip-path: inset(0 calc(100% - var(--p, 0) * 118%) 0 0);
}

.recorrido__carril{
  overflow: hidden;
  padding-left: calc(max(0px, (100% - var(--maxw)) / 2) + var(--gutter));
}
.recorrido__tren{
  padding-right: var(--gutter);
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
  width: max-content;
  transform: translate3d(calc(var(--p, 0) * var(--tren, 0px) * -1), 0, 0);
}

.pantalla{
  flex: none;
  width: clamp(280px, 34vw, 480px);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ink-3);
  background: var(--ink-2);
  padding: clamp(14px, 1.6vw, 24px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(10px, 1.4vh, 18px);
}
.pantalla__barra{ display: flex; align-items: center; justify-content: space-between; }
.pantalla__barra span{
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .12em;
  color: var(--mute-ink);
}
.pantalla__barra em{
  font-style: normal;
  width: 26px; height: 1px; background: var(--orange); display: block;
}
.pantalla__cuerpo{ display: grid; gap: 8px; align-content: center; }
.pantalla__cuerpo i{ display: block; height: 1px; background: var(--ink-3); }
.pantalla__cuerpo b{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(17px, 1.9vw, 27px);
  line-height: 1.12;
  color: var(--paper);
  margin-bottom: 4px;
}
.pantalla__pie{ display: flex; justify-content: space-between; align-items: end; }
.pantalla__pie i{ display: block; width: 38%; height: 1px; background: var(--ink-3); }
.pantalla__pie b{
  font-family: var(--mono); font-weight: 400;
  font-size: 10px; letter-spacing: .12em; color: var(--orange);
}
.pantalla--acento{ background: var(--orange); border-color: var(--orange); }
.pantalla--acento .pantalla__barra span{ color: #4A2000; }
.pantalla--acento .pantalla__barra em{ background: var(--ink); }
.pantalla--acento .pantalla__cuerpo i,
.pantalla--acento .pantalla__pie i{ background: rgba(21,11,6,.28); }
.pantalla--acento .pantalla__cuerpo b{ color: var(--ink); }
.pantalla--acento .pantalla__pie b{ color: var(--ink); }

.formatos__cabeza{ display: grid; gap: clamp(14px, 2vh, 22px); }
.formatos__cuerpo{
  margin-top: clamp(36px, 6vh, 72px);
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3vh, 34px);
}
.lienzo{
  position: relative;
  width: min(100%, var(--ancho, 860px));
  aspect-ratio: var(--ratio, 16 / 10);
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  transition: width .7s var(--ease), aspect-ratio .7s var(--ease);
}
.lienzo[data-f="tablet"]{ --ancho: 520px; --ratio: 4 / 3.1; }
.lienzo[data-f="movil"] { --ancho: 280px; --ratio: 9 / 15.2; }

.pieza{
  position: absolute;
  background: var(--rule-2);

  transition: inset .7s var(--ease), width .7s var(--ease), height .7s var(--ease), opacity .5s ease;
}
.pieza--marca{ background: var(--orange); }
.pieza--titular{ background: var(--ink); opacity: .82; }
.pieza--visual{ background: var(--mute-paper); opacity: .34; }

.lienzo[data-f="desktop"] .pieza--barra   { left: 4%;  top: 6%;  width: 92%; height: 3%; }
.lienzo[data-f="desktop"] .pieza--marca   { left: 4%;  top: 6%;  width: 7%;  height: 3%; }
.lienzo[data-f="desktop"] .pieza--titular { left: 4%;  top: 18%; width: 44%; height: 16%; }
.lienzo[data-f="desktop"] .pieza--texto   { left: 4%;  top: 39%; width: 34%; height: 9%; }
.lienzo[data-f="desktop"] .pieza--visual  { left: 54%; top: 18%; width: 42%; height: 30%; }
.lienzo[data-f="desktop"] .pieza--c1      { left: 4%;  top: 60%; width: 27%; height: 28%; }
.lienzo[data-f="desktop"] .pieza--c2      { left: 36.5%;top: 60%; width: 27%; height: 28%; }
.lienzo[data-f="desktop"] .pieza--c3      { left: 69%; top: 60%; width: 27%; height: 28%; }

.lienzo[data-f="tablet"] .pieza--barra    { left: 5%;  top: 5%;  width: 90%; height: 3%; }
.lienzo[data-f="tablet"] .pieza--marca    { left: 5%;  top: 5%;  width: 11%; height: 3%; }
.lienzo[data-f="tablet"] .pieza--titular  { left: 5%;  top: 15%; width: 66%; height: 13%; }
.lienzo[data-f="tablet"] .pieza--texto    { left: 5%;  top: 32%; width: 52%; height: 7%; }
.lienzo[data-f="tablet"] .pieza--visual   { left: 5%;  top: 44%; width: 90%; height: 19%; }
.lienzo[data-f="tablet"] .pieza--c1       { left: 5%;  top: 68%; width: 43%; height: 24%; }
.lienzo[data-f="tablet"] .pieza--c2       { left: 52%; top: 68%; width: 43%; height: 24%; }
.lienzo[data-f="tablet"] .pieza--c3       { left: 5%;  top: 68%; width: 43%; height: 24%; opacity: 0; }

.lienzo[data-f="movil"] .pieza--barra     { left: 7%;  top: 3.5%; width: 86%; height: 2%; }
.lienzo[data-f="movil"] .pieza--marca     { left: 7%;  top: 3.5%; width: 22%; height: 2%; }
.lienzo[data-f="movil"] .pieza--titular   { left: 7%;  top: 9%;   width: 86%; height: 9%; }
.lienzo[data-f="movil"] .pieza--texto     { left: 7%;  top: 21%;  width: 70%; height: 5%; }
.lienzo[data-f="movil"] .pieza--visual    { left: 7%;  top: 30%;  width: 86%; height: 16%; }
.lienzo[data-f="movil"] .pieza--c1        { left: 7%;  top: 50%;  width: 86%; height: 13%; }
.lienzo[data-f="movil"] .pieza--c2        { left: 7%;  top: 66%;  width: 86%; height: 13%; }
.lienzo[data-f="movil"] .pieza--c3        { left: 7%;  top: 82%;  width: 86%; height: 13%; }

.formatos__mandos{
  display: flex;
  gap: clamp(6px, 1vw, 14px);
  flex-wrap: wrap;
  justify-content: center;
}
.mando{
  min-height: 44px;
  padding: 0 clamp(12px, 1.6vw, 20px);
  background: none;
  border: 1px solid var(--rule-2);
  color: var(--mute-paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.mando:hover{ color: var(--ink); border-color: var(--mute-paper); }
.mando[aria-pressed="true"]{
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.mando:focus-visible{ outline: 2px solid var(--orange-sm); outline-offset: 3px; }

.proceso__lista{
  position: relative;
  margin: clamp(44px, 7vh, 84px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 34px);
}

.proceso__lista::before,
.proceso__lista::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 1px;
}
.proceso__lista::before{ background: var(--ink-3); }
.proceso__lista::after{
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s var(--ease-soft);
}
.proceso__lista.is-in::after{ transform: none; }

.paso{ position: relative; padding-top: 30px; }
.paso::before{
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 9px; height: 9px;
  background: var(--ink-2);
  border: 1px solid var(--mute-ink);
  border-radius: 50%;
  transition: background-color .4s ease, border-color .4s ease;
}
.proceso__lista.is-in .paso::before{
  background: var(--orange);
  border-color: var(--orange);
  transition-delay: calc(var(--i) * 260ms + 220ms);
}
.paso__n{
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--orange);
  margin-bottom: 10px;
}
.paso__t{
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.paso__d{
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.6;
  color: var(--mute-ink);
  text-wrap: pretty;
}

.servicios__lista{
  margin: clamp(36px, 6vh, 68px) 0 0;
  padding: 0;
  list-style: none;
}
.servicio{
  position: relative;
  display: grid;
  grid-template-columns: clamp(34px, 3.4vw, 52px) 1fr auto;
  align-items: baseline;
  gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(15px, 2.2vh, 24px) 0;
  border-top: 1px solid var(--rule);
}
.servicios__lista li:last-child .servicio{ border-bottom: 1px solid var(--rule); }
.servicio__n{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--mute-paper);
  transition: color .35s ease;
}
.servicio__t{
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  line-height: 1.1;
  transition: transform .5s var(--ease), color .35s ease;
}
.servicio__m{
  width: clamp(16px, 1.8vw, 24px);
  opacity: 0;
  translate: -8px 0;
  transition: opacity .35s ease, translate .5s var(--ease);
}
.servicio__m svg{ width: 100%; height: auto; fill: var(--orange); display: block; }

.servicio::after{
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.servicio:hover::after{ transform: none; }
.servicio:hover .servicio__t{ transform: translateX(clamp(5px, .8vw, 14px)); }
.servicio:hover .servicio__n{ color: var(--orange-sm); }
.servicio:hover .servicio__m{ opacity: 1; translate: 0 0; }

.puente{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.puente__texto{ grid-column: 1 / span 7; }
.puente__figura{ grid-column: 9 / span 4; }

.puente__par{
  position: relative;
  aspect-ratio: 4 / 3;
}
.puente__par span{
  position: absolute;
  top: 0; bottom: 0; width: 62%;
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  transition: translate .8s var(--ease);
}
.puente__par span:first-child{ left: 0; background: var(--orange); }
.puente__par span:last-child{ right: 0; background: var(--paper); opacity: .14; }
.puente:hover .puente__par span:first-child,
.puente:focus-within .puente__par span:first-child{ translate: -5% 0; }
.puente:hover .puente__par span:last-child,
.puente:focus-within .puente__par span:last-child{ translate: 5% 0; }

@media (max-width: 1100px){
  .hero__texto{ grid-column: 1 / span 10; }
  .hero__marca{ display: none; }
  .puente__texto{ grid-column: 1 / span 8; }
  .puente__figura{ grid-column: 9 / span 4; }
  .proceso__lista{ grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 32px) clamp(20px, 4vw, 40px); }
  .proceso__lista::before, .proceso__lista::after{ display: none; }
  .paso{ padding-top: 26px; border-top: 1px solid var(--ink-3); }
  .paso::before{ top: -5px; }
}

@media (max-width: 899px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__texto{ grid-column: 1; }

  .maqueta{ aspect-ratio: 5 / 6; min-height: 0; }
  .bloque--rotulo{ top: 7%; left: 6%; }
  .bloque--titular{ top: 13%; left: 6%; width: 60%; font-size: clamp(22px, 6.6vw, 34px); }
  .bloque--filete-a{ top: 34%; left: 6%; width: 40%; }
  .bloque--parrafo{ top: 40%; left: 6%; width: 40%; gap: 8px; }
  .bloque--figura{ top: 30%; right: 6%; width: 40%; height: 28%; }
  .bloque--filete-b{ top: 66%; left: 6%; right: 6%; }
  .bloque--indice{
    top: 72%; bottom: auto; left: 6%;
    flex-direction: column; gap: 6px;
    font-size: 10px;
  }
  .bloque--marca{ bottom: 7%; right: 6%; }

  .ejes{ grid-template-columns: 1fr; }
  .eje{ cursor: default; padding-bottom: clamp(8px, 1.2vh, 14px); }
  .eje__texto{
    opacity: 1;
    translate: 0 0;
    border-top: 0;
    padding: 0 0 clamp(18px, 2.6vh, 26px);
  }
  .eje__texto::before{ display: none; }
  .ejes > :nth-last-child(-n+2){ border-bottom: 0; }
  .ejes > :last-child{ border-bottom: 1px solid var(--rule); }
  .ejes[data-activo] .eje[aria-expanded="false"] .eje__t{ color: inherit; }
  .ejes[data-activo] .eje[aria-expanded="false"] .eje__n{ opacity: 1; }

  .recorrido__pista{ height: auto; }
  .recorrido__fijo{
    position: static;
    height: auto; min-height: 0;
    padding-block: clamp(64px, 9vh, 104px);
    overflow: visible;
  }
  .recorrido__frase b{ clip-path: none; }
  .recorrido__carril{ overflow: visible; }
  .recorrido__tren{
    width: auto;
    flex-direction: column;
    transform: none;
    gap: clamp(14px, 2.4vh, 22px);
  }
  .pantalla{ width: 100%; max-width: 520px; aspect-ratio: 5 / 3.2; }

  .lienzo[data-f="desktop"]{ --ancho: 100%; }
  .lienzo[data-f="tablet"] { --ancho: 380px; }
  .lienzo[data-f="movil"]  { --ancho: 220px; }

  .servicio{ grid-template-columns: clamp(28px, 6vw, 40px) 1fr auto; }

  .puente{ grid-template-columns: 1fr; gap: clamp(28px, 5vh, 44px); }
  .puente__texto, .puente__figura{ grid-column: 1; }
  .puente__par{ aspect-ratio: 16 / 7; }
}

@media (max-width: 560px){
  .proceso__lista{ grid-template-columns: 1fr; }
  .servicio__m{ display: none; }
}

html[data-motion="reduced"] .bloque{
  --e: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html[data-motion="reduced"] .recorrido__pista{ height: auto; }
html[data-motion="reduced"] .recorrido__fijo{
  position: static; height: auto; min-height: 0;
  padding-block: clamp(64px, 9vh, 104px);
  overflow: visible;
}
html[data-motion="reduced"] .recorrido__frase b{ clip-path: none; }
html[data-motion="reduced"] .recorrido__carril{ overflow: visible; }
html[data-motion="reduced"] .recorrido__tren{
  width: auto; flex-direction: column; transform: none;
  gap: clamp(14px, 2.4vh, 22px);
}
html[data-motion="reduced"] .pantalla{ width: 100%; max-width: 520px; aspect-ratio: 5 / 3.2; }
html[data-motion="reduced"] .proceso__lista::after{ transform: none; transition: none; }
html[data-motion="reduced"] .paso::before{ background: var(--orange); border-color: var(--orange); transition: none; }
html[data-motion="reduced"] .lienzo,
html[data-motion="reduced"] .pieza,
html[data-motion="reduced"] .eje__texto,
html[data-motion="reduced"] .ejes__panel::before,
html[data-motion="reduced"] .servicio__t,
html[data-motion="reduced"] .servicio::after,
html[data-motion="reduced"] .puente__par span{
  transition-duration: .001ms !important;
}

html:not(.js) .ejes{ grid-template-columns: 1fr; }
html:not(.js) .eje__texto{ opacity: 1; translate: 0 0; border-top: 0; padding: 0 0 22px; }
html:not(.js) .eje__texto::before{ display: none; }
html:not(.js) .eje{ cursor: default; padding-bottom: 10px; }
html:not(.js) .recorrido__pista{ height: auto; }
html:not(.js) .recorrido__fijo{ position: static; height: auto; min-height: 0; padding-block: 88px; overflow: visible; }
html:not(.js) .recorrido__frase b{ clip-path: none; }
html:not(.js) .recorrido__tren{ width: auto; flex-direction: column; transform: none; gap: 18px; }
html:not(.js) .pantalla{ width: 100%; max-width: 520px; aspect-ratio: 5 / 3.2; }
html:not(.js) .proceso__lista::after{ transform: none; }
html:not(.js) .paso::before{ background: var(--orange); border-color: var(--orange); }
html:not(.js) .formatos__mandos{ display: none; }