/* ============================================================
   TOKENIZACIÓN · 03 CIERRE — superficie de teselas de oro líquido
   Todo bajo #contacto-tokenizacion (prefijo tkc)
   ============================================================ */
#contacto-tokenizacion{
  --tkc-T:10s;                 /* periodo del menisco */
  --tkc-band:36%;              /* ancho del menisco respecto a la superficie */
  position:relative;overflow:clip;isolation:isolate;
  min-height:calc(100svh - var(--nav-h,72px));display:flex;align-items:center;
  padding-block:clamp(56px,7svh,96px);
  background:var(--ink);scroll-margin-top:var(--nav-h);
}

/* ---------- Superficie ---------- */
#contacto-tokenizacion .tkc__surf{position:absolute;inset:-6% 0;z-index:-1;pointer-events:none;overflow:hidden}
#contacto-tokenizacion .tkc__base,
#contacto-tokenizacion .tkc__bimg{
  background:var(--ink) url(../../../assets/img/gen120/tokens.webp) 58% 50%/max(136%,136vh) auto no-repeat;
}
#contacto-tokenizacion .tkc__base{position:absolute;inset:0;filter:brightness(.42) saturate(.95)}
/* menisco: banda que viaja (transform) con la imagen contrarrestada dentro → solo compositor */
#contacto-tokenizacion .tkc__shine{position:absolute;inset:0;overflow:hidden}
#contacto-tokenizacion .tkc__bandx{position:absolute;top:0;bottom:0;left:0;width:var(--tkc-band);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 50%,rgba(0,0,0,.35) 74%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 26%,#000 50%,rgba(0,0,0,.35) 74%,transparent 100%);
  transform:translateX(-100%);will-change:transform;
  animation:tkc-band var(--tkc-T) linear infinite}
#contacto-tokenizacion .tkc__bimg{position:absolute;top:0;bottom:0;left:0;width:calc(100% / .36);
  filter:brightness(1.55) saturate(1.12) contrast(1.06);transform:translateX(36%);will-change:transform;
  animation:tkc-bimg var(--tkc-T) linear infinite}
@keyframes tkc-band{from{transform:translateX(-100%)}to{transform:translateX(277.78%)}}
@keyframes tkc-bimg{from{transform:translateX(36%)}to{transform:translateX(-100%)}}

/* retícula de teselas + destello con desfase */
#contacto-tokenizacion .tkc__tiles{--cell:96px;position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
#contacto-tokenizacion .tkc__tiles:before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,9,15,.3) 1px,transparent 1px) 0 0/var(--cell) var(--cell),
    linear-gradient(180deg,rgba(5,9,15,.3) 1px,transparent 1px) 0 0/var(--cell) var(--cell);
  /* se atenúa bajo la columna de texto (izquierda) */
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.45) 40%,#000 62%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.45) 40%,#000 62%)}
#contacto-tokenizacion .tkc__tiles i{position:absolute;width:var(--cell);height:var(--cell);opacity:0;
  background:linear-gradient(138deg,rgba(250,232,178,.42) 0%,rgba(216,166,70,.16) 46%,rgba(216,166,70,0) 78%);
  box-shadow:inset 1px 1px 0 rgba(255,238,196,.38);
  animation:tkc-glint var(--tkc-T) linear infinite}
@keyframes tkc-glint{0%{opacity:0}5%{opacity:var(--a,.8)}17%{opacity:0}100%{opacity:0}}

#contacto-tokenizacion .tkc__shade{position:absolute;inset:0;
  background:
    linear-gradient(180deg,var(--ink) 0%,rgba(5,9,15,0) 20%,rgba(5,9,15,0) 80%,var(--ink) 100%),
    linear-gradient(90deg,rgba(5,9,15,.9) 0%,rgba(5,9,15,.8) 30%,rgba(5,9,15,.6) 48%,rgba(5,9,15,.3) 66%,rgba(5,9,15,.5) 100%)}

/* pausa fuera de pantalla */
#contacto-tokenizacion.is-off .tkc__bandx,
#contacto-tokenizacion.is-off .tkc__bimg,
#contacto-tokenizacion.is-off .tkc__tiles i{animation-play-state:paused}

/* estático (?reduce / movimiento reducido): brillo fijo al 62 % */
html.reduce #contacto-tokenizacion .tkc__bandx,
#contacto-tokenizacion.is-static .tkc__bandx{animation:none;transform:translateX(122.2%)}
html.reduce #contacto-tokenizacion .tkc__bimg,
#contacto-tokenizacion.is-static .tkc__bimg{animation:none;transform:translateX(-44%)}
html.reduce #contacto-tokenizacion .tkc__tiles i,
#contacto-tokenizacion.is-static .tkc__tiles i{animation:none;opacity:var(--s,0)}
@media (prefers-reduced-motion:reduce){
  #contacto-tokenizacion .tkc__bandx{animation:none;transform:translateX(122.2%)}
  #contacto-tokenizacion .tkc__bimg{animation:none;transform:translateX(-44%)}
  #contacto-tokenizacion .tkc__tiles i{animation:none;opacity:var(--s,0)}
}

/* ---------- Composición ---------- */
#contacto-tokenizacion .tkc__in{position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy win";
  column-gap:clamp(40px,6vw,110px)}
#contacto-tokenizacion .tkc__copy{grid-area:copy;max-width:760px;container-type:inline-size}
#contacto-tokenizacion .tkc__logo{display:block;width:clamp(88px,7.4vw,112px);height:auto;margin:0 0 clamp(26px,3vw,40px)}
#contacto-tokenizacion .tkc__sig{display:none}

#contacto-tokenizacion .tkc__q{margin:0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(2.1rem,3.3vw,4rem);font-size:clamp(2.1rem,7.3cqi,3.6rem);line-height:1.08;letter-spacing:-.022em;color:var(--cream);text-wrap:balance}
#contacto-tokenizacion .tkc__vis{display:block}
#contacto-tokenizacion .tkc__l{display:block;padding-block:.02em;padding-left:.9em;text-indent:-.9em;text-wrap:balance}
#contacto-tokenizacion .tkc__l + .tkc__l{margin-top:.08em}
#contacto-tokenizacion .tkc__sin{color:var(--gold-2);font-weight:500}
#contacto-tokenizacion .tkc__sin,
#contacto-tokenizacion .tkc__sin .tn-word{background:var(--gold-grad);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
#contacto-tokenizacion .tkc__sin:has(.tn-word){background:none;color:var(--gold-2)}
#contacto-tokenizacion .tkc__l *{text-indent:0}
#contacto-tokenizacion .tkc__q [class*="-mask"]{padding-bottom:.14em;margin-bottom:-.14em;padding-right:.12em;margin-right:-.12em}

#contacto-tokenizacion .tkc__rule{display:block;width:min(440px,100%);height:1px;margin:clamp(30px,3.4vw,46px) 0;
  background:linear-gradient(90deg,var(--gold-2) 0%,var(--gold) 45%,rgba(216,166,70,0) 100%);transform-origin:left center}

#contacto-tokenizacion .tkc__ctas{display:flex;flex-wrap:wrap;gap:14px}
#contacto-tokenizacion .tkc__btn{min-height:56px}
#contacto-tokenizacion .tkc__wa{width:20px;height:20px}
#contacto-tokenizacion .tkc__btn:hover .tkc__wa{transform:none}
#contacto-tokenizacion .btn--ghost.tkc__btn{background:rgba(5,9,15,.5);border-color:rgba(244,213,138,.38)}

/* ventana de video vertical */
#contacto-tokenizacion .tkc__win{grid-area:win;position:relative;margin:0;justify-self:end;
  height:min(68svh,640px);aspect-ratio:2/3;max-width:min(38vw,460px);
  border-radius:var(--r);overflow:hidden;border:1px solid rgba(244,213,138,.32);background:var(--ink-2);
  box-shadow:0 50px 120px -50px rgba(216,166,70,.45),0 0 0 6px rgba(5,9,15,.55),0 0 0 7px rgba(216,166,70,.14)}
#contacto-tokenizacion .tkc__poster,
#contacto-tokenizacion .tkc__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
#contacto-tokenizacion .tkc__video{opacity:0;transition:opacity 1.2s var(--ease)}
#contacto-tokenizacion .tkc__win.is-playing .tkc__video{opacity:1}
#contacto-tokenizacion .tkc__win:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(5,9,15,.18) 0%,rgba(5,9,15,0) 22%,rgba(5,9,15,0) 70%,rgba(5,9,15,.55) 100%);
  box-shadow:inset 0 1px 0 rgba(255,238,196,.28)}
#contacto-tokenizacion .tkc__win-glint{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,236,190,.16) 50%,transparent 60%) 0 0/300% 100% no-repeat;
  background-position:100% 0;animation:tkc-win 10s linear infinite}
@keyframes tkc-win{0%,62%{background-position:100% 0}88%,100%{background-position:0% 0}}
#contacto-tokenizacion.is-off .tkc__win-glint{animation-play-state:paused}
html.reduce #contacto-tokenizacion .tkc__win-glint{animation:none;opacity:0}

@media (min-width:1366px){#contacto-tokenizacion .tkc__win{margin-right:52px}}
@media (min-width:900px) and (max-height:800px){
  #contacto-tokenizacion{min-height:calc(100svh - var(--nav-h,72px));padding-block:clamp(40px,6svh,64px)}
  #contacto-tokenizacion .tkc__win{height:min(64svh,600px)}
  #contacto-tokenizacion .tkc__logo{margin-bottom:22px}
  #contacto-tokenizacion .tkc__q{font-size:clamp(2rem,6.4cqi,3.1rem)}
  #contacto-tokenizacion .tkc__rule{margin:26px 0}
}

/* ---------- Celular / tableta vertical ---------- */
@media (max-width:899px){
  #contacto-tokenizacion{min-height:0;display:block;padding:clamp(48px,12vw,72px) 0 64px}
  #contacto-tokenizacion .tkc__base,
  #contacto-tokenizacion .tkc__bimg{background-image:url(../../../assets/img/gen120/tokens-768.webp);background-size:auto 112%;background-position:50% 55%}
  #contacto-tokenizacion .tkc__shade{background:
    linear-gradient(180deg,var(--ink) 0%,rgba(5,9,15,.35) 14%,rgba(5,9,15,.62) 52%,rgba(5,9,15,.86) 78%,var(--ink) 100%)}
  #contacto-tokenizacion .tkc__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"win" "copy";row-gap:28px}
  #contacto-tokenizacion .tkc__win{justify-self:stretch;width:100%;max-width:520px;height:auto;aspect-ratio:4/5;max-height:52svh;margin-inline:auto}
  #contacto-tokenizacion .tkc__poster,#contacto-tokenizacion .tkc__video{object-position:50% 42%}
  #contacto-tokenizacion .tkc__copy{max-width:none}
  /* firma discreta: hilo dorado + FITAL en versalitas (el logotipo ya está en la barra) */
  #contacto-tokenizacion .tkc__logo{display:none}
  #contacto-tokenizacion .tkc__sig{display:flex;align-items:center;gap:10px;margin:0 0 16px;
    font:600 .8125rem/1 var(--sans,system-ui);letter-spacing:.22em;font-variant-caps:all-small-caps;color:var(--gold-2)}
  #contacto-tokenizacion .tkc__sig i{display:block;width:28px;height:1px;background:linear-gradient(90deg,rgba(216,166,70,0),var(--gold))}
  #contacto-tokenizacion .tkc__q{font-size:clamp(1.5rem,6.9vw,1.875rem);line-height:1.18;text-wrap:pretty}
  #contacto-tokenizacion .tkc__l + .tkc__l{margin-top:.22em}
  #contacto-tokenizacion .tkc__rule{width:100%;margin:28px 0}
  #contacto-tokenizacion .tkc__ctas{flex-direction:column;gap:12px}
  #contacto-tokenizacion .tkc__btn{width:100%;min-height:54px;white-space:normal;text-align:center;font-size:1rem}
}

@media (max-width:899px) and (max-height:700px){
  #contacto-tokenizacion .tkc__win{aspect-ratio:1/1;max-height:44svh;max-width:44svh}
}

/* ---------- Gama baja: sin filtros caros ---------- */
#contacto-tokenizacion.is-low .tkc__base{filter:none;opacity:.5}
#contacto-tokenizacion.is-low .btn--ghost.tkc__btn{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,9,15,.82)}