html{
  --fs-global: .672043vw;                 
  font-size: var(--fs-global);
}
@media only screen and (min-width:1488px){ html{ --fs-global: 10px } }
@media only screen and (max-width:991px){  html{ --fs-global: 1.199041vw } }  
@media only screen and (max-width:767px){  html{ --fs-global: 2.544529vw } }  




:root{
  --sec-bg:          var(--papel);
  --sec-strong:      var(--tinta);            
  --sec-sub:         var(--sub);              
  --sec-soft:        var(--soft);             
  --sec-note:        var(--note);             
  --sec-disable:     var(--apagado);          
  --sec-line:        var(--linea);            
  --sec-card-bg:     rgba(20,20,22,.035);     
  --sec-card-bd:     rgba(20,20,22,.08);      
  --sec-card-solid:  var(--sup);              
                                              
                                              

  --band-bg:         #111111;                 
  --band-strong:     #FFFFFF;
  --band-sub:        rgba(255,255,255,.70);
  --band-soft:       rgba(255,255,255,.50);
  --band-line:       rgba(255,255,255,.20);
  --band-tag-bg:     #FFFFFF;                 
  --band-tag-txt:    #111111;                 
  --band-card-a:     rgba(255,255,255,.16);   
  --band-card-b:     rgba(255,255,255,.04);

  --art-glow:        rgba(17,17,17,.10);      
  --art-tile-a:      rgba(17,17,17,.16);      
  --art-tile-b:      rgba(17,17,17,.05);

  --road-bg:         #EAE8E3;                 
  --road-line:       rgba(17,17,17,.18);
  --road-tile-a:     rgba(17,17,17,.14);
  --road-tile-b:     rgba(17,17,17,.04);

  --sec-ease:        ease;
  --sec-ease-out:    cubic-bezier(.215,.61,.355,1);   

  --sec-container-max: 148.8rem;
  --sec-container-pad: 8rem;
  --sec-container-gap: 1.6rem;
  --sec-columns:       16;
}
@media only screen and (max-width:991px){
  :root{ --sec-container-pad:3.2rem; --sec-columns:12 }
}
@media only screen and (max-width:767px){
  :root{ --sec-container-pad:1.6rem; --sec-columns:4 }
}

html[data-theme="dark"]{
  --sec-bg:          var(--noche);
  --sec-strong:      var(--noche-tinta);
  --sec-sub:         var(--noche-sub);
  --sec-soft:        var(--noche-soft);
  --sec-note:        var(--noche-note);
  --sec-disable:     var(--noche-apagado);
  --sec-line:        var(--noche-linea);
  --sec-card-bg:     rgba(255,255,255,.045);
  --sec-card-bd:     rgba(255,255,255,.08);
  --sec-card-solid:  var(--noche-sup);

  --band-bg:         #F2F1EE;
  --band-strong:     #111111;
  --band-sub:        rgba(17,17,17,.70);
  --band-soft:       rgba(17,17,17,.50);
  --band-line:       rgba(17,17,17,.20);
  --band-tag-bg:     #0D0D0D;
  --band-tag-txt:    #FFFFFF;
  --band-card-a:     rgba(17,17,17,.18);
  --band-card-b:     rgba(17,17,17,.05);

  --art-glow:        rgba(255,255,255,.10);
  --art-tile-a:      rgba(255,255,255,.16);
  --art-tile-b:      rgba(255,255,255,.05);

  --road-bg:         #161616;
  --road-line:       rgba(255,255,255,.18);
  --road-tile-a:     rgba(255,255,255,.14);
  --road-tile-b:     rgba(255,255,255,.05);
}



:root{
  --nav-accent:       var(--sec-strong);
  --nav-accent-hover: var(--sec-strong);
  --nav-on-accent:    var(--sec-bg);
  --nav-strong:       var(--sec-strong);
  --nav-soft:         var(--sec-soft);
  --nav-disable:      var(--sec-disable);
  --nav-border:       rgba(17,17,17,.14);
  --nav-pill:         rgba(17,17,17,.055);
  --nav-pill-mobile:  rgba(255,255,255,.55);
  --nav-glass:        rgba(17,17,17,.035);
  --nav-tick:         rgba(17,17,17,.22);
}
html[data-theme="dark"]{
  --nav-border:       rgba(255,255,255,.12);
  --nav-pill:         rgba(255,255,255,.06);
  --nav-pill-mobile:  rgba(255,255,255,.07);
  --nav-glass:        rgba(255,255,255,.04);
  --nav-tick:         rgba(255,255,255,.22);
}



.sc-container{
  position:relative; z-index:2;
  width:100%;
  max-width:var(--sec-container-max);
  margin-inline:auto;
  padding-inline:var(--sec-container-pad);
}
@media only screen and (max-width:991px){ .sc-container{ max-width:none } }

.sc-grid{
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-rows:auto;
  grid-template-columns:repeat(16, minmax(0,1fr));
}
@media only screen and (max-width:991px){ .sc-grid{ grid-template-columns:repeat(12, minmax(0,1fr)) } }
@media only screen and (max-width:767px){ .sc-grid{ grid-template-columns:repeat(4,  minmax(0,1fr)) } }


.sc-h1{ margin:0; font-weight:300; font-size:6.8rem; line-height:1em; letter-spacing:-.015em }
.sc-h5{ margin:0; font-weight:300; font-size:2.4rem; line-height:1.1em }
.sc-t52{ margin:0; font-size:5.2rem; font-weight:300; line-height:1.2em }
.sc-t20{ margin:0; font-size:2rem;   font-weight:400; line-height:1.4em }
.sc-t16{ margin:0; font-size:1.6rem; font-weight:400; line-height:1.4em }
.sc-lbl{ font-weight:500; line-height:1em; letter-spacing:.1em; text-transform:uppercase }
.sc-lbl-10{ font-size:1rem }
.sc-lbl-14{ font-size:1.4rem }
@media only screen and (max-width:991px){
  .sc-h1{ font-size:4.4rem }
  .sc-h5{ font-size:2rem }
  .sc-t52{ font-size:4rem }
  .sc-t20{ font-size:1.8rem }
}
@media only screen and (max-width:767px){
  .sc-h1{ font-size:3.6rem }
  .sc-h5{ font-size:2rem }
  .sc-t52{ font-size:3.2rem }
}

.sc-line{ width:100%; height:1px; background-color:var(--sec-line) }
.sc-line.is-vert{ width:1px; height:100% }

.sc-ic{ display:block; width:6.4rem; height:6.4rem; color:currentColor }
.sc-ic svg{ display:block; width:100%; height:100% }
.sc-ic.is-24{ width:2.4rem; height:2.4rem }
@media only screen and (max-width:991px){ .sc-ic{ width:4.8rem; height:4.8rem } }
@media only screen and (max-width:767px){
  .sc-ic{ width:3.2rem; height:3.2rem }
  .sc-ic.is-24{ width:2rem; height:2rem }
}



.coin{ position:relative; z-index:2 }

.coin-img{
  grid-area:1/7/2/11;
  display:flex; justify-content:center; align-items:center;
  margin-top:6rem; margin-bottom:4.8rem;
  color:var(--sec-strong);
}
.coin-img-inner{ flex:none; width:100%; max-width:30.4rem; aspect-ratio:1 }
.coin-img-inner svg{ width:100%; height:100% }

.coin-sub{
  grid-area:2/1/3/-1;
  width:100%; max-width:100.7rem;
  margin-inline:auto; margin-bottom:7.8rem;
  text-align:center;
  color:var(--sec-disable);          
}

.coin-sub .w{ color:var(--sec-strong); opacity:.2 }

@media only screen and (max-width:991px){
  .coin-img{ grid-column:5/9; margin-top:4.2rem; margin-bottom:2rem }
  .coin-img-inner{ max-width:17.4rem }
  .coin-sub{ grid-column:2/12; margin-bottom:11rem }
}
@media only screen and (max-width:767px){
  
  .coin{ background-image:linear-gradient(var(--sec-bg) 50%, transparent) }
  .coin-img{ grid-column:1/-1; margin-top:2.4rem; margin-bottom:3.2rem }
  .coin-sub{ grid-column:1/-1; margin-bottom:0 }
}




.art{ position:relative; z-index:1;
      padding-top:26.2rem; padding-bottom:10rem; overflow:hidden }


.art-bg{
  position:absolute; top:0; left:0; z-index:1;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:center;
  width:100%; height:100%;
  pointer-events:none;
}
.art-bg-main{
  position:relative; flex:1;
  display:flex; flex-flow:column; justify-content:space-between;
  width:100%; max-width:172.8rem; margin:-45rem auto;
  -webkit-mask-image:linear-gradient(#0000,#000 10% 90%,#0000),
                     linear-gradient(90deg,#0000,#000 25% 75%,#0000);
          mask-image:linear-gradient(#0000,#000 10% 90%,#0000),
                     linear-gradient(90deg,#0000,#000 25% 75%,#0000);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.art-bg-main-inner{
  position:relative; z-index:1;
  height:34rem; margin-inline:-15rem;
  overflow:hidden;
}
.art-bg-main-inner.is-bot{ transform:rotate(180deg) }

@media(max-width:767px){ .art-bg-main-inner.is-bot{ display:none } }
.art-bg-main-inner::before{
  content:''; position:absolute; inset:-30% -50%;
  background:radial-gradient(50% 50% at 50% 50%, var(--art-glow), transparent 70%);
  animation:art-travel 18s ease-in-out infinite alternate;
}
@keyframes art-travel{ from{ transform:translateX(-35%) } to{ transform:translateX(35%) } }

.art-label-left { grid-area:1/1/2/4;  align-self:center; text-align:left;  color:var(--sec-sub) }
.art-label-right{ grid-area:1/14/2/17; align-self:center; text-align:right; color:var(--sec-sub) }

.art-main{
  grid-area:1/4/2/14;
  display:flex; justify-content:center; align-items:center;
  padding:9rem;
}
.art-main-inner{ position:relative; width:100%; max-width:52.2rem; aspect-ratio:1 }


.art-item{
  position:absolute; inset:0 auto auto 0; z-index:1;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:center;
  width:100%; height:100%;
  animation:ring 30s linear infinite;
}
.art-tile{
  width:18rem; height:18rem; margin-top:-9rem;
  border-radius:1rem; overflow:hidden;
  background-image:linear-gradient(160deg, var(--art-tile-a), var(--art-tile-b));
  
  animation:ring-counter 30s linear infinite;
}
@keyframes ring        { from{ transform:rotate(0deg) }   to{ transform:rotate(360deg) } }
@keyframes ring-counter{ from{ transform:rotate(360deg) } to{ transform:rotate(0deg) } }


.art.is-idle .art-item,
.art.is-idle .art-tile,
.art.is-idle .art-bg-main-inner::before{ animation-play-state:paused }

.art-item:nth-child(1),  .art-item:nth-child(1)  .art-tile{ animation-delay:0s }
.art-item:nth-child(2),  .art-item:nth-child(2)  .art-tile{ animation-delay:-2.5s }
.art-item:nth-child(3),  .art-item:nth-child(3)  .art-tile{ animation-delay:-5s }
.art-item:nth-child(4),  .art-item:nth-child(4)  .art-tile{ animation-delay:-7.5s }
.art-item:nth-child(5),  .art-item:nth-child(5)  .art-tile{ animation-delay:-10s }
.art-item:nth-child(6),  .art-item:nth-child(6)  .art-tile{ animation-delay:-12.5s }
.art-item:nth-child(7),  .art-item:nth-child(7)  .art-tile{ animation-delay:-15s }
.art-item:nth-child(8),  .art-item:nth-child(8)  .art-tile{ animation-delay:-17.5s }
.art-item:nth-child(9),  .art-item:nth-child(9)  .art-tile{ animation-delay:-20s }
.art-item:nth-child(10), .art-item:nth-child(10) .art-tile{ animation-delay:-22.5s }
.art-item:nth-child(11), .art-item:nth-child(11) .art-tile{ animation-delay:-25s }
.art-item:nth-child(12), .art-item:nth-child(12) .art-tile{ animation-delay:-27.5s }

@media only screen and (max-width:991px){
  .art{ padding-block:10.4rem }
  .art-bg-main{ margin-block:-19rem }
  .art-bg-main-inner{ margin-inline:-6.6rem }
  .art-main{ grid-column-end:10; padding:4.8rem }
  .art-main-inner{ max-width:28rem }
  .art-tile{ width:9.6rem; height:9.6rem; margin-top:-4.8rem; border-radius:.6rem }
  .art-label-right{ grid-column:10/13 }
}
@media only screen and (max-width:767px){
  .art{ padding-block:10rem }
  .art-bg-main{ margin-block:0 }
  .art-bg-main-inner{ margin-inline:-7.8rem }
  .art-label-left { grid-column-end:-1; text-align:center; margin-bottom:4rem }
  .art-main{ grid-area:2/1/3/-1 }
  .art-main-inner{ max-width:21rem }
  .art-label-right{ grid-area:3/1/4/-1; text-align:center; margin-top:4rem }
  .art-tile{ width:7.2rem; height:7.2rem; margin-top:-3.6rem; border-radius:.5rem }
}



.how{ position:relative; z-index:2; padding-top:14.2rem }
@media only screen and (max-width:991px){ .how{ padding-top:18rem } }
@media only screen and (max-width:767px){ .how{ padding-top:0 } }


.how-grid{ row-gap:0; grid-template-rows:minmax(auto,1fr); grid-auto-rows:minmax(auto,1fr) }
@media only screen and (max-width:767px){ .how-grid{ grid-template-rows:auto; grid-auto-rows:auto } }

.how-title-wrap{
  position:relative; z-index:2;
  grid-area:1/3/2/9;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
  max-width:32rem;
}
.how-label{ color:var(--sec-disable); margin-bottom:4rem }
.how-title{ color:var(--sec-strong) }

.how-sub-wrap{
  position:relative; z-index:2;
  grid-area:2/10/3/15;
  display:flex; justify-content:flex-end; align-items:center;
}
.how-sub{ max-width:32.4rem; color:var(--sec-sub) }

.how-main-wrap{ position:relative; z-index:1; grid-area:1/3/4/15 }
.how-main{
  position:relative; z-index:1;
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-rows:auto;
}
.how-item{ position:relative; z-index:1; aspect-ratio:1 }
.how-item:nth-child(1){ grid-area:1/2/2/3 }
.how-item:nth-child(2){ grid-area:2/1/3/2 }
.how-item:nth-child(3){ grid-area:3/2/4/3 }

.how-item-inner{
  position:relative;
  display:flex; flex-flow:column; justify-content:space-between;
  width:100%; height:100%;
  padding:4.4rem;
  border:1px solid var(--sec-card-bd);
  border-radius:2rem;
  background-color:var(--sec-card-bg);
}

.how-item-inner::after{
  content:''; position:absolute; inset:0;
  border-radius:inherit;
  background-color:var(--sec-card-solid);
  opacity:var(--stack-dim,0);
  pointer-events:none;
}
.how-item-head,
.how-item-content{ position:relative; z-index:1 }
.how-item-head{ display:flex; justify-content:space-between; align-items:flex-start }
.how-item-ic{ flex:none; padding-top:.4rem; padding-left:.4rem; color:var(--sec-strong) }
.how-item-step{ color:var(--sec-note) }
.how-item-title{ margin-bottom:3.2rem; color:var(--sec-strong) }
.how-item-sub{ color:var(--sec-soft) }

@media only screen and (max-width:991px){
  .how-title-wrap{ grid-column:1/7 }
  .how-sub-wrap{ grid-column:7/13 }
  .how-main-wrap{ grid-column:1/13 }
  .how-label{ margin-bottom:2.8rem }
  .how-sub{ max-width:31.1rem }
  .how-item-inner{ padding:3.2rem; border-radius:1.6rem }
  .how-item-ic{ padding-top:0; padding-left:0 }
  .how-item-title{ margin-bottom:2.4rem }
}


@media only screen and (max-width:767px){
  .how-title-wrap{
    grid-column:1/-1;
    text-align:center; align-items:center; max-width:none;
  }
  .how-label{ margin-bottom:2.4rem }
  .how-title{ margin-bottom:3.2rem }
  .how-sub-wrap{ grid-column:1/-1; text-align:center }
  .how-sub{ max-width:none; margin-bottom:6rem }
  .how-main-wrap{ grid-row-start:3; grid-column-end:-1 }
  .how-main{ display:flex; flex-flow:column; row-gap:1.6rem; column-gap:0 }
  .how-item{ aspect-ratio:auto }
  .how-item:nth-child(1),
  .how-item:nth-child(2),
  .how-item:nth-child(3){ grid-area:auto }
  .how-item-content{ margin-top:4rem }
}




.cta{ position:relative; z-index:1; padding-top:8rem; padding-bottom:22.3rem }

.cta-bg{
  position:absolute; top:0; left:0; z-index:1;
  display:flex; flex-flow:column; justify-content:flex-end; align-items:center;
  width:100%; height:100%;
  pointer-events:none;
}
.cta-bg-main{ position:relative; width:100%; max-width:172.8rem; margin-inline:auto }

.cta-bg-main-inner{
  position:relative; z-index:1;
  margin-inline:-12.3rem;
  aspect-ratio:1974/1026;
  background:radial-gradient(60% 80% at 50% 100%, var(--art-glow), transparent 70%);
}

.cta-title-wrap{
  grid-area:1/4/2/14;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:center;
  text-align:center;
}
.cta-title{ max-width:75.1rem; margin-bottom:4rem; color:var(--sec-strong) }
.cta-btn{ display:flex; flex-flow:column; justify-content:center; width:100%; max-width:56rem }


.btn.is-solid{
  background-color:var(--sec-strong);
  color:var(--sec-bg);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.btn.is-solid .btn-outline{ opacity:0 }
.btn.is-xl .btn-size{ padding:4rem 6rem }
.btn.is-xl .btn-txt{ font-size:2.4rem }

@media only screen and (max-width:991px){
  .cta{ padding-top:8rem; padding-bottom:11.4rem }
  .cta-bg-main-inner{ margin-inline:-7.8rem }
  .cta-title-wrap{ grid-column:3/11 }
  .cta-title{ margin-bottom:3.2rem }
  .btn.is-xl .btn-size{ padding:2.8rem 4rem }
}
@media only screen and (max-width:767px){
  .cta{ padding-top:6rem; padding-bottom:14.7rem }
  .cta-bg-main-inner{ margin-inline:-28rem }
  .cta-title-wrap{ grid-column:1/-1 }
}



.fea{ position:relative; z-index:2; padding-top:14rem; padding-bottom:16rem }
@media only screen and (max-width:991px){ .fea{ padding-top:8rem; padding-bottom:10rem } }
@media only screen and (max-width:767px){ .fea{ padding-bottom:8rem } }

.fea-title-wrap{
  grid-area:1/6/2/15;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
}
.fea-title{ margin-bottom:4.8rem; color:var(--sec-strong) }
.fea-sub{ color:var(--sec-sub) }
.fea-label{ grid-area:1/3/2/6; color:var(--sec-disable) }
.fea-main{ grid-area:2/3/3/15; margin-top:10rem }

.fea-item{ position:relative }
.fea-item-inner{
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-columns:repeat(12, minmax(0,1fr));
  grid-template-rows:auto;
  padding-top:4.4rem; padding-bottom:4.4rem;
}
.fea-item-head{
  grid-area:1/1/2/-1;
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(12, minmax(0,1fr));
  grid-template-rows:auto;
}
.fea-item-num{ grid-area:1/1/2/4; color:var(--sec-note) }
.fea-item-title{ grid-area:1/4/2/10; margin-bottom:1.6rem; color:var(--sec-strong) }
.fea-item-ic{
  grid-area:1/10/2/-1;
  position:relative; display:flex; justify-content:flex-end; align-items:flex-start;
  color:var(--sec-strong);
}
.fea-item-ic-inner{ position:absolute; top:0; right:0; flex:none }
.fea-item-body{ grid-area:2/4/3/10; color:var(--sec-soft) }

@media only screen and (max-width:991px){
  .fea-title-wrap{ grid-column:3/13 }
  .fea-label{ grid-column:1/3; padding-top:1.2rem }
  .fea-main{ grid-column:1/13; margin-top:8rem }
  .fea-item-inner{ padding-top:3.2rem; padding-bottom:3.2rem }
  .fea-item-num{ grid-column-end:3 }
  .fea-item-title{ grid-column:3/11 }
  .fea-item-ic{ grid-column-start:11 }
  .fea-item-body{ grid-column:3/11 }
}


@media only screen and (max-width:767px){
  .fea-label{ grid-column-end:-1; margin-bottom:2.4rem; padding-top:0 }
  .fea-title-wrap{ grid-area:2/1/3/-1 }
  .fea-title{ max-width:26.5rem; margin-bottom:3.2rem }
  .fea-main{ grid-row:3/4; grid-column-end:-1; margin-top:6rem }
  .fea-item-inner{ display:flex; flex-flow:column; padding-top:0; padding-bottom:0 }
  .fea-item-head{
    display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
    gap:1rem; position:relative;
    padding-top:3.2rem; padding-bottom:3.2rem;
  }
  .fea-item-title{ margin-bottom:0 }
  .fea-item-ic{ position:absolute; top:0; right:0; bottom:0; align-items:center }
  .fea-item-ic-inner{ position:relative; top:auto; right:auto }
  .fea-item-body{ margin-top:-1.2rem; padding-bottom:3.2rem }
}
@media only screen and (max-width:991px){ .fea-title{ max-width:47.9rem; margin-bottom:3.2rem } }



.nft{ position:relative; background-color:var(--band-bg); overflow:hidden }

.nft-line-ver-wrap{
  grid-area:1/1/-1/-1;
  display:flex; flex-flow:row; justify-content:center; align-items:stretch;
  pointer-events:none;
}
.nft-line-ver{ position:absolute; width:1px; height:100%; background-color:var(--band-line) }

.nft-title-wrap{
  grid-area:1/2/2/8;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
  margin-top:8rem; margin-bottom:8.2rem;
}
.nft-label{ color:var(--band-soft); margin-bottom:4rem }
.nft-title{ color:var(--band-strong) }
.nft-sub{
  grid-area:1/11/2/16; align-self:end;
  margin-top:8rem; margin-bottom:8.2rem;
  color:var(--band-sub);
}


.nft-line-hor{
  width:auto; height:1px;
  margin-left:-50vw; margin-right:-50vw;
  background-color:var(--band-line);
}
.nft-line-hor.is-top{ grid-area:2/1/3/-1 }
.nft-line-hor.is-bot{ grid-area:4/1/5/-1 }

.nft-main{
  grid-area:3/1/4/-1;
  position:relative;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:center;
}
.nft-arr{ flex:none; color:var(--band-soft) }
.nft-arr.is-top{ padding-top:6.4rem; padding-bottom:2.4rem }
.nft-arr.is-bot{ padding-top:6rem; padding-bottom:6.4rem }
.nft-arr.is-bot .sc-ic{ transform:scaleY(-1) }


.nft-tag{
  display:flex; justify-content:center; align-items:center;
  font-weight:700;
  margin-bottom:2rem;
  padding:.6rem 1.7rem;
  text-align:center;
  background-color:var(--band-tag-bg);
  color:var(--band-tag-txt);
  clip-path:polygon(4.9% 0, 95.1% 0, 100% 46%, 100% 100%, 0 100%, 0 46%);
}

.nft-cols{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:1px;                            
  width:100%;
}

.nft-col-left { clip-path:inset(0% 0% 0% -100% round 1.2rem) }
.nft-col-right{ clip-path:inset(0% -100% 0% 0% round 1.2rem) }
.nft-col-left-inner { display:flex; justify-content:flex-end; height:40rem }
.nft-col-right-inner{ height:40rem }


.nft-stack{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto;
  flex:none;
  width:auto; height:100%;
  aspect-ratio:350/400;
  perspective:500px;
  perspective-origin:100%;
  transform-style:preserve-3d;
  backface-visibility:visible;
}
.nft-stack.is-right{ perspective-origin:0% }

.nft-card{
  grid-area:1/1/2/2;
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform;
  background-image:linear-gradient(160deg, var(--band-card-a), var(--band-card-b));
  animation:nft-left 6s linear infinite;
}
.nft-card.is-right{ animation-name:nft-right }

.nft-card             { clip-path:polygon(27.4% 0, 100% 0, 100% 100%, 0 100%, 0 27.7%) }
.nft-card.is-right    { clip-path:polygon(0 0, 72.6% 0, 100% 27.7%, 100% 100%, 0 100%) }


.nft-card:nth-child(1){ animation-delay:0s }
.nft-card:nth-child(2){ animation-delay:-1s }
.nft-card:nth-child(3){ animation-delay:-2s }
.nft-card:nth-child(4){ animation-delay:-3s }
.nft-card:nth-child(5){ animation-delay:-4s }
.nft-card:nth-child(6){ animation-delay:-5s }


@keyframes nft-left{
  0%   { transform:translate3d(80%,0,0);            opacity:1; animation-timing-function:var(--sec-ease-out) }
  16.6%{ transform:translate3d(0%,0,0);             opacity:1; animation-timing-function:var(--sec-ease-out) }
  33.3%{ transform:translate3d(-47%,0,-83.8px);     opacity:1; animation-timing-function:var(--sec-ease-out) }
  50%  { transform:translate3d(-108%,0,-200.2px);   opacity:1; animation-timing-function:var(--sec-ease-out) }
  66.6%{ transform:translate3d(-198%,0,-373px);     opacity:1; animation-timing-function:var(--sec-ease-out) }
  83.3%{ transform:translate3d(-340%,0,-667px);     opacity:1; animation-timing-function:var(--sec-ease-out) }
  100% { transform:translate3d(-604%,0,-1253.4px);  opacity:0 }
}
@keyframes nft-right{
  0%   { transform:translate3d(-80%,0,0);           opacity:1; animation-timing-function:var(--sec-ease-out) }
  16.6%{ transform:translate3d(0%,0,0);             opacity:1; animation-timing-function:var(--sec-ease-out) }
  33.3%{ transform:translate3d(47%,0,-83.8px);      opacity:1; animation-timing-function:var(--sec-ease-out) }
  50%  { transform:translate3d(108%,0,-200.2px);    opacity:1; animation-timing-function:var(--sec-ease-out) }
  66.6%{ transform:translate3d(198%,0,-373px);      opacity:1; animation-timing-function:var(--sec-ease-out) }
  83.3%{ transform:translate3d(340%,0,-667px);      opacity:1; animation-timing-function:var(--sec-ease-out) }
  100% { transform:translate3d(604%,0,-1253.4px);   opacity:0 }
}


.nft-main.is-idle .nft-card{ animation-play-state:paused }

@media only screen and (max-width:991px){
  .nft-title-wrap{ grid-column:1/7; max-width:31.2rem; margin-bottom:10rem }
  .nft-label{ margin-bottom:2.8rem }
  .nft-sub{ grid-column:8/13; margin-bottom:10rem }
  .nft-line-hor{ margin-left:-6rem; margin-right:-6rem }
  .nft-col-left-inner, .nft-col-right-inner{ height:34.3rem }
  .nft-tag{ margin-bottom:3.2rem }
  .nft-arr.is-top{ padding-top:8rem }
  .nft-arr.is-bot{ padding-top:10rem; padding-bottom:8rem }
}


@media only screen and (max-width:767px){
  .nft-title-wrap{
    grid-column-end:-1;
    
    text-align:left; align-items:flex-start; max-width:none;
    margin:6rem 0 3.2rem;
  }
  .nft-label{ margin-bottom:2.4rem }
  .nft-sub{ grid-area:2/1/3/-1; text-align:center; margin-top:0; margin-bottom:6rem }
  .nft-line-hor.is-top{ grid-row:3/4 }
  .nft-main{ grid-row:4/5 }
  .nft-line-hor.is-bot{ grid-row:5/6 }
  .nft-line-ver-wrap{ grid-row:4/5 }
  .nft-col-left { clip-path:inset(0% 0% 0% -100% round 1rem) }
  .nft-col-right{ clip-path:inset(0% -100% 0% 0% round 1rem) }
  .nft-col-left-inner, .nft-col-right-inner{ height:16.4rem }
  .nft-tag{ margin-bottom:5.7rem; padding:.9rem 2.6rem }
  .nft-arr.is-top{ padding-top:10rem; padding-bottom:2.8rem }
  .nft-arr.is-bot{ padding-top:7.4rem; padding-bottom:10rem }
}




.road{ position:relative; z-index:2; background-color:var(--road-bg);
       transition:background-color .55s var(--sec-ease-out) }
.road[data-fondo="brasa"]{
  --road-bg:#FF5A1F;
  --road-line:rgba(20,20,22,.28);
  --road-tile-a:rgba(20,20,22,.14);
  --road-tile-b:rgba(20,20,22,.04);
  --sec-strong:#140A06;
  --sec-sub:rgba(20,10,6,.74);
  --sec-note:rgba(20,10,6,.58);
  --sec-line:rgba(20,20,22,.22);
}
.road-item-phase,.road-item-date,.road-item-title,.road-main,
.road-label,.road-title,.road-sub{ transition:background-color .55s var(--sec-ease-out),
  color .55s var(--sec-ease-out) }
@media(prefers-reduced-motion:reduce){
  .road,.road *{ transition-duration:.001ms !important }
}
.road-stick-wrap{ position:relative; height:500svh }
.road-stick{ position:sticky; top:0; width:100%; height:100svh }
.road-grid{ height:100% }

.road-head-wrap{
  grid-area:1/1/2/8;
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-columns:repeat(7, minmax(0,1fr));
  grid-template-rows:1fr auto auto;
}
.road-title-wrap{
  grid-area:1/1/2/-1;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
  max-width:48.8rem; margin-top:12rem;
}
.road-label{ color:var(--sec-note); margin-bottom:4rem }
.road-title{ color:var(--sec-strong) }
.road-sub-wrap{ grid-area:2/1/3/8 }
.road-sub{ max-width:40.4rem; color:var(--sec-sub); margin-bottom:20% }
.road-btn-wrap{
  grid-area:3/1/4/8;
  display:flex; flex-flow:column; justify-content:flex-end; align-items:flex-start;
  margin-bottom:9.4rem;
}

.road-main{ grid-area:1/8/2/16; position:relative; width:100% }
.road-main-inner{
  position:relative; z-index:2;
  display:flex; column-gap:var(--sec-container-gap);
  height:100%;
}


.road-item{
  flex:none;
  display:grid;
  column-gap:var(--sec-container-gap);
  grid-template-columns:repeat(8, minmax(0,1fr));
  grid-template-rows:auto 1fr 9.4rem;
  width:100%; height:100%;
}
.road-item-phase-wrap{
  grid-area:1/1/2/6;
  display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
  margin-top:12rem;
}
.road-item-phase{
  background-color:var(--road-bg);
  color:var(--sec-sub);
  margin-bottom:5.3rem;
}
.road-item-inner{
  grid-area:2/1/3/6;
  position:relative;
  display:flex; flex-flow:column; justify-content:flex-end;
}
.road-item-content{
  position:absolute; bottom:0; left:0;
  display:flex; flex-flow:column; row-gap:1.6rem;
  width:100%;
}
.road-item-thumb{ position:relative; width:100% }
.road-item-thumb-inner{
  position:absolute; top:0; left:0; z-index:2;
  width:100%; height:100%;
  border-radius:1.2rem; overflow:hidden;
  background-image:linear-gradient(160deg, var(--road-tile-a), var(--road-tile-b));
}

.ar-1-1{ width:100%; height:0; padding-bottom:100%; pointer-events:none }
.road-item-title{
  background-color:var(--road-bg);
  color:var(--sec-sub);
  margin-left:-.8rem; padding-inline:.8rem;
}
.road-item-time{
  grid-area:3/1/4/9;
  display:flex; justify-content:flex-start; align-items:center;
  margin-top:1.6rem;
}
.road-item-date{
  background-color:var(--road-bg);
  font-weight:700;
  color:var(--sec-strong);
  margin-left:-.8rem; padding-inline:.8rem;
}

.road-item-ruler{
  flex:1; height:1rem;
  background-image:repeating-linear-gradient(to right,
    var(--road-line), var(--road-line) 1px, transparent 1px, transparent calc(1px + .8rem));
}
.road-item:last-child .road-item-ruler{ margin-right:-100vw }

.road-line-vert{
  position:absolute; top:0; z-index:1;
  width:1px; height:100%;
  background-color:var(--road-line);
}
.road-head-line{ display:none }

@media only screen and (max-width:991px){
  .road-head-wrap{ grid-column-end:6 }
  .road-title-wrap{ max-width:31.2rem }
  .road-label{ margin-bottom:2.8rem }
  .road-sub-wrap{ grid-column-end:7 }
  .road-sub{ max-width:31.2rem; margin-bottom:16.5rem }
  .road-btn-wrap{ margin-bottom:10rem }
  .road-main{ grid-column:7/13 }
  
  .road-main-inner{
    width:calc(((100% - (var(--sec-container-gap)*5))/6)*7 + (var(--sec-container-gap)*6));
  }
  .road-item{
    grid-template-columns:repeat(6, minmax(0,1fr)) 1fr;
    grid-template-rows:auto 1fr 10rem;
  }
  .road-item-phase-wrap{ grid-column-end:6 }
  .road-item-phase{ margin-bottom:20.9rem }
  .road-item-time{ grid-column-end:8; margin-top:2.6rem }
  .road-item:last-child .road-item-ruler{ margin-right:-100svh }
}


@media only screen and (max-width:767px){
  .road-stick-wrap{ height:600svh }
  .road-stick{ position:static; height:100% }
  .road-grid{ grid-template-rows:auto 1fr }
  .road-head-wrap{
    position:sticky; top:0;
    grid-column-end:-1;
    display:flex; flex-flow:column; justify-content:flex-start; align-items:flex-start;
    max-height:100svh; padding-top:6rem;
  }
  .road-title-wrap{ max-width:none; margin-top:0 }
  .road-label{ margin-bottom:2.4rem }
  .road-title{ margin-bottom:3.2rem }
  .road-sub{ max-width:none; margin-bottom:4rem }
  .road-btn-wrap{ margin-bottom:6rem }
  .road-main{ grid-area:2/1/3/-1; z-index:2; background-color:var(--road-bg) }
  .road-main-inner{ position:sticky; top:0; width:calc(100% - 1.6rem); height:100svh }
  .road-item{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr 7.4rem }
  .road-item-phase-wrap{ grid-column-end:2; margin-top:10rem }
  .road-item-phase{ margin-bottom:11svh }
  .road-item-inner{ grid-column-end:2; max-width:30rem }
  .road-item-time{ grid-column-end:2; margin-top:2rem }
  .road-head-line{
    display:block; height:1px;
    width:calc(100% + 3.2rem);
    margin-left:-1.6rem; margin-right:-400svh;
    background-color:var(--road-line);
  }
}



@media (prefers-reduced-motion:reduce){
  .nft-card,
  .art-item, .art-tile,
  .art-bg-main-inner::before{ animation-play-state:paused }
}