/*
==============================================================
 KONECTA CRYPTOS
 OPERATIONS ART DIRECTION V2

 OBJETIVO:
 - quitar sensación de cajas repetidas
 - cada operación tiene composición diferente
 - conservar HTML, funciones y simuladores existentes
==============================================================
*/


/* ==========================================================
   GENERAL
========================================================== */

.kc-ops-experience{
  padding:
    80px 0
    150px !important;

  overflow:hidden;

  position:relative;
}

.kc-ops-experience:before{
  content:"";

  width:900px;
  height:900px;

  position:absolute;

  top:5%;
  left:-550px;

  border-radius:50%;

  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(38,144,255,.07),
      transparent 68%
    );
}

.kc-ops-heading{
  margin-bottom:100px !important;
}

.kc-ops-heading h2{
  max-width:880px;
}

.kc-ops-heading p{
  max-width:690px !important;
}


/* ==========================================================
   ELIMINAMOS LA "CAJA GRANDE" COMÚN
========================================================== */

.kc-operation{
  width:100%;

  min-height:690px !important;

  margin:
    0 0
    120px !important;

  overflow:visible !important;

  border:0 !important;

  border-radius:0 !important;

  box-shadow:none !important;

  background:none !important;

  position:relative;

  isolation:isolate;
}

.kc-operation:hover{
  border-color:transparent !important;
}


/* línea decorativa entre operaciones */

.kc-operation:not(:last-child):after{
  content:"";

  height:1px;

  position:absolute;

  left:6%;
  right:6%;
  bottom:-60px;

  opacity:.38;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(70,174,255,.20),
      rgba(255,255,255,.08),
      transparent
    );
}


/* número gigante de fondo */

.kc-operation:before{
  position:absolute;

  z-index:-1;

  font-size:
    clamp(160px,19vw,330px);

  font-weight:900;

  line-height:.75;

  letter-spacing:-18px;

  color:
    rgba(255,255,255,.018);

  pointer-events:none;
}

.kc-operation-buy:before{
  content:"01";

  left:-15px;
  top:8%;
}

.kc-operation-sell:before{
  content:"02";

  right:-20px;
  top:6%;
}

.kc-operation-deposit:before{
  content:"03";

  left:50%;
  top:0;

  transform:
    translateX(-50%);
}

.kc-operation-withdraw:before{
  content:"04";

  left:-10px;
  bottom:3%;
}

.kc-operation-convert:before{
  content:"05";

  right:0;
  top:7%;
}


/* ==========================================================
   COPY
========================================================== */

.kc-op-copy{
  padding:
    55px 55px !important;

  position:relative;
}

.kc-op-copy h3{
  max-width:600px;

  font-size:
    clamp(43px,4.7vw,68px) !important;

  line-height:.98 !important;

  letter-spacing:
    -3.5px !important;
}

.kc-op-copy p{
  max-width:520px !important;

  font-size:14px !important;

  line-height:1.78 !important;
}

.kc-op-number{
  display:flex;

  align-items:center;

  gap:10px;

  color:#5cbfff !important;

  font-size:9px !important;

  letter-spacing:1.4px !important;
}

.kc-op-number:before{
  content:"";

  width:28px;
  height:1px;

  background:
    currentColor;
}


/* ==========================================================
   PILLS MENOS "CARD"
========================================================== */

.kc-op-bullets{
  gap:13px !important;

  margin-top:25px !important;
}

.kc-op-bullet{
  padding:
    0 0 5px !important;

  border:0 !important;

  border-radius:0 !important;

  background:none !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.11) !important;

  color:#8097ab !important;
}


/* ==========================================================
   PHOTO GENERAL
========================================================== */

.kc-op-visual{
  min-height:650px !important;

  overflow:visible !important;

  position:relative;

  padding:
    25px !important;
}

.kc-op-photo{
  height:560px !important;

  overflow:hidden;

  border:0 !important;

  box-shadow:
    0 45px 110px
    rgba(0,0,0,.30) !important;

  position:relative;

  background:#07111c;
}

.kc-op-photo img{
  opacity:.80 !important;

  filter:
    saturate(.88)
    contrast(1.06) !important;

  transform:scale(1.01);

  transition:
    transform 1.2s
    cubic-bezier(.2,.75,.2,1),
    filter .5s,
    opacity .5s !important;
}

.kc-operation:hover
.kc-op-photo img{
  transform:scale(1.065) !important;

  filter:
    saturate(1)
    contrast(1.08) !important;
}


/* ==========================================================
   COMPRAR
   abierto, limpio, imagen flotando
========================================================== */

.kc-operation-buy{
  grid-template-columns:
    .78fr
    1.22fr !important;

  align-items:center;
}

.kc-operation-buy
.kc-op-copy{
  padding-left:30px !important;

  transform:
    translateY(-20px);
}

.kc-operation-buy
.kc-op-photo{
  width:92%;

  margin-left:auto;

  border-radius:
    38px 6px 38px 38px !important;

  clip-path:
    polygon(
      4% 0,
      100% 0,
      100% 94%,
      93% 100%,
      0 100%,
      0 8%
    );
}

.kc-operation-buy
.kc-op-visual:before{
  content:"";

  width:420px;
  height:420px;

  position:absolute;

  right:-35px;
  top:45px;

  z-index:-1;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(42,151,255,.22),
      rgba(42,151,255,.035) 55%,
      transparent 73%
    );

  animation:
    kcAura 6s
    ease-in-out infinite;
}

.kc-operation-buy
.kc-live-widget{
  right:-10px !important;
  bottom:4px !important;

  transform:
    rotate(-1deg);

  border-color:
    rgba(66,176,255,.17) !important;
}


/* ==========================================================
   VENDER
   foto casi full bleed a la izquierda
   copy más estrecho a la derecha
========================================================== */

.kc-operation-sell{
  grid-template-columns:
    1.28fr
    .72fr !important;

  min-height:750px !important;
}

.kc-operation-sell
.kc-op-copy{
  padding:
    60px 15px
    60px 55px !important;

  transform:
    translateY(35px);
}

.kc-operation-sell
.kc-op-copy h3{
  font-size:
    clamp(42px,4.4vw,63px) !important;
}

.kc-operation-sell
.kc-op-visual{
  padding-left:0 !important;
}

.kc-operation-sell
.kc-op-photo{
  width:105%;

  height:650px !important;

  transform:
    translateX(-8%);

  border-radius:
    8px 70px 8px 70px !important;

  clip-path:
    polygon(
      0 0,
      93% 0,
      100% 9%,
      100% 100%,
      7% 100%,
      0 91%
    );
}

.kc-operation-sell
.kc-op-photo:after{
  background:
    linear-gradient(
      90deg,
      rgba(3,12,13,.04),
      rgba(3,12,13,.13) 58%,
      rgba(3,12,13,.84)
    ) !important;
}

.kc-operation-sell
.kc-live-widget{
  left:auto !important;

  right:-38px !important;

  bottom:40px !important;

  transform:
    rotate(1.2deg);
}

.kc-operation-sell
.kc-op-visual:after{
  content:"SELL";

  position:absolute;

  left:3%;
  bottom:-20px;

  z-index:5;

  color:
    rgba(42,223,167,.11);

  font-size:80px;
  font-weight:900;
  letter-spacing:-5px;
}


/* ==========================================================
   DEPOSITAR
   composición horizontal / cinematográfica
========================================================== */

.kc-operation-deposit{
  grid-template-columns:1fr !important;

  text-align:center;

  padding-top:20px;
}

.kc-operation-deposit
.kc-op-copy{
  width:min(880px,100%);

  margin:auto;

  padding:
    30px 25px
    15px !important;
}

.kc-operation-deposit
.kc-op-copy h3,
.kc-operation-deposit
.kc-op-copy p{
  margin-left:auto;
  margin-right:auto;
}

.kc-operation-deposit
.kc-op-number{
  justify-content:center;
}

.kc-operation-deposit
.kc-op-bullets,
.kc-operation-deposit
.kc-op-actions{
  justify-content:center;
}

.kc-operation-deposit
.kc-op-visual{
  width:min(1280px,100%);

  min-height:570px !important;

  margin:auto;

  padding:
    15px 35px !important;
}

.kc-operation-deposit
.kc-op-photo{
  width:100%;

  height:500px !important;

  border-radius:
    90px 20px 90px 20px !important;

  clip-path:
    inset(
      0
      round
      90px 20px
      90px 20px
    );
}

.kc-operation-deposit
.kc-op-photo img{
  object-position:center 47%;
}

.kc-operation-deposit
.kc-op-photo:after{
  background:
    linear-gradient(
      180deg,
      rgba(5,7,18,.15),
      rgba(5,7,18,.18) 45%,
      rgba(5,7,18,.75)
    ) !important;
}

.kc-operation-deposit
.kc-flow-widget{
  width:min(720px,82%) !important;

  left:50% !important;
  right:auto !important;

  bottom:-10px !important;

  transform:
    translateX(-50%);

  padding:
    20px 28px !important;

  border-radius:25px !important;

  background:
    rgba(11,11,31,.86) !important;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.36);
}

.kc-operation-deposit
.kc-flow-line{
  gap:18px !important;
}

.kc-operation-deposit
.kc-flow-dot{
  border-radius:50% !important;

  width:48px !important;
  height:48px !important;

  box-shadow:
    0 0 25px
    rgba(146,115,255,.12);
}


/* ==========================================================
   RETIRAR
   timeline editorial
========================================================== */

.kc-operation-withdraw{
  grid-template-columns:
    .9fr
    1.1fr !important;

  min-height:760px !important;
}

.kc-operation-withdraw
.kc-op-copy{
  padding:
    60px 40px
    60px 45px !important;

  align-self:center;
}

.kc-operation-withdraw
.kc-op-visual{
  order:-1 !important;

  padding:
    30px 15px
    30px 5px !important;
}

.kc-operation-withdraw
.kc-op-photo{
  width:88%;

  height:615px !important;

  margin-left:0;

  border-radius:
    100px 22px 22px 22px !important;

  clip-path:
    polygon(
      0 7%,
      7% 0,
      100% 0,
      100% 100%,
      0 100%
    );
}

.kc-operation-withdraw
.kc-withdraw-widget{
  width:350px !important;

  left:auto !important;

  right:-15px !important;

  bottom:70px !important;

  padding:
    17px 19px !important;

  border:0 !important;

  border-left:
    2px solid
    rgba(255,194,75,.28) !important;

  border-radius:
    0 18px 18px 0 !important;

  background:
    linear-gradient(
      90deg,
      rgba(26,18,6,.96),
      rgba(12,12,12,.94)
    ) !important;
}

.kc-operation-withdraw
.kc-withdraw-row{
  padding:
    11px 0 !important;
}

.kc-operation-withdraw
.kc-withdraw-num{
  border-radius:50% !important;
}


/* ==========================================================
   CONVERTIR
   composición futurista circular
========================================================== */

.kc-operation-convert{
  grid-template-columns:
    .82fr
    1.18fr !important;

  min-height:760px !important;
}

.kc-operation-convert
.kc-op-copy{
  padding-left:25px !important;
}

.kc-operation-convert
.kc-op-visual{
  min-height:700px !important;
}

.kc-operation-convert
.kc-op-photo{
  width:77%;

  height:540px !important;

  margin-left:auto;
  margin-right:7%;

  border-radius:
    50% 50%
    22% 50% !important;

  clip-path:
    ellipse(
      48% 48%
      at 50% 50%
    );
}

.kc-operation-convert
.kc-op-photo:after{
  background:
    radial-gradient(
      circle,
      transparent 22%,
      rgba(17,7,27,.25) 53%,
      rgba(17,7,27,.76) 100%
    ) !important;
}

.kc-operation-convert
.kc-op-visual:before,
.kc-operation-convert
.kc-op-visual:after{
  content:"";

  position:absolute;

  border-radius:50%;

  pointer-events:none;
}

.kc-operation-convert
.kc-op-visual:before{
  width:580px;
  height:580px;

  right:1%;
  top:7%;

  border:
    1px solid
    rgba(238,100,210,.13);

  animation:
    kcRotate 28s linear infinite;
}

.kc-operation-convert
.kc-op-visual:after{
  width:650px;
  height:650px;

  right:-3%;
  top:2%;

  border:
    1px dashed
    rgba(117,109,255,.09);

  animation:
    kcRotate 42s
    linear infinite reverse;
}

.kc-operation-convert
.kc-convert-widget{
  right:auto !important;

  left:4% !important;

  bottom:47px !important;

  width:360px !important;

  transform:
    rotate(-1.3deg);

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.38);
}


/* ==========================================================
   DECORATIVE ORBS / PARTICLES
========================================================== */

.kc-operation
.kc-op-copy:after{
  content:"";

  width:7px;
  height:7px;

  position:absolute;

  border-radius:50%;

  box-shadow:
    0 0 22px
    currentColor;

  opacity:.7;

  animation:
    kcFloatingParticle
    5s ease-in-out infinite;
}

.kc-operation-buy
.kc-op-copy:after{
  color:#32a6ff;

  right:10%;
  top:9%;
}

.kc-operation-sell
.kc-op-copy:after{
  color:#35dba3;

  right:13%;
  top:17%;
}

.kc-operation-deposit
.kc-op-copy:after{
  color:#9677ff;

  right:22%;
  top:4%;
}

.kc-operation-withdraw
.kc-op-copy:after{
  color:#ffc44f;

  right:15%;
  top:10%;
}

.kc-operation-convert
.kc-op-copy:after{
  color:#ed68d3;

  right:13%;
  top:13%;
}


/* ==========================================================
   BUTTON EFFECT
========================================================== */

.kc-op-btn{
  position:relative;

  overflow:hidden;
}

.kc-op-btn:before{
  content:"";

  width:45px;
  height:160%;

  position:absolute;

  top:-30%;
  left:-80px;

  transform:
    rotate(20deg);

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.16),
      transparent
    );

  transition:
    left .7s ease;
}

.kc-op-btn:hover:before{
  left:130%;
}


/* ==========================================================
   INTRO / SCROLL
========================================================== */

.kc-art-reveal{
  opacity:0;

  transform:
    translateY(45px);

  filter:
    blur(3px);

  transition:
    opacity .9s ease,
    transform .9s
    cubic-bezier(.2,.7,.2,1),
    filter .9s ease;
}

.kc-art-reveal.kc-art-visible{
  opacity:1;

  transform:none;

  filter:none;
}

.kc-operation
.kc-op-copy.kc-art-reveal{
  transition-delay:.05s;
}

.kc-operation
.kc-op-visual.kc-art-reveal{
  transition-delay:.15s;
}


/* ==========================================================
   FLOATING MOTION
========================================================== */

.kc-live-widget,
.kc-flow-widget,
.kc-withdraw-widget,
.kc-convert-widget{
  animation:
    kcWidgetFloat
    5s ease-in-out infinite;
}

.kc-operation-sell
.kc-live-widget{
  animation-delay:-1s;
}

.kc-flow-widget{
  animation-delay:-2s;
}

.kc-withdraw-widget{
  animation-delay:-3s;
}

.kc-convert-widget{
  animation-delay:-4s;
}


/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes kcAura{

  0%,100%{
    transform:scale(1);

    opacity:.65;
  }

  50%{
    transform:scale(1.07);

    opacity:1;
  }

}

@keyframes kcWidgetFloat{

  0%,100%{
    translate:0 0;
  }

  50%{
    translate:0 -9px;
  }

}

@keyframes kcRotate{

  to{
    transform:rotate(360deg);
  }

}

@keyframes kcFloatingParticle{

  0%,100%{
    transform:
      translate(0,0)
      scale(1);
  }

  50%{
    transform:
      translate(13px,-13px)
      scale(1.35);
  }

}


/* ==========================================================
   CURSOR GLOW
========================================================== */

.kc-mouse-glow{
  width:330px;
  height:330px;

  position:fixed;

  left:0;
  top:0;

  z-index:-1;

  pointer-events:none;

  opacity:.24;

  border-radius:50%;

  transform:
    translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(40,153,255,.18),
      rgba(130,86,255,.05) 45%,
      transparent 70%
    );

  transition:
    opacity .2s;
}


/* ==========================================================
   PROGRESS LINE
========================================================== */

.kc-scroll-progress{
  height:2px;

  position:fixed;

  left:0;
  top:0;

  z-index:30000;

  width:0%;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      #279aff,
      #38dcd3,
      #9674ff,
      #ed68d3,
      #ffc34d
    );

  box-shadow:
    0 0 15px
    rgba(64,176,255,.35);
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:1100px){

  .kc-operation-buy,
  .kc-operation-sell,
  .kc-operation-withdraw,
  .kc-operation-convert{
    grid-template-columns:1fr !important;
  }

  .kc-operation-sell
  .kc-op-visual,
  .kc-operation-withdraw
  .kc-op-visual{
    order:initial !important;
  }

  .kc-operation-sell
  .kc-op-copy,
  .kc-operation-withdraw
  .kc-op-copy{
    transform:none;
  }

  .kc-operation-sell
  .kc-op-photo{
    width:94%;

    transform:none;

    margin:auto;
  }

  .kc-operation-buy
  .kc-op-photo{
    width:94%;

    margin:auto;
  }

  .kc-operation-convert
  .kc-op-photo{
    margin:auto;
  }

}


@media(max-width:720px){

  .kc-operation{
    margin-bottom:
      90px !important;
  }

  .kc-operation:not(:last-child):after{
    bottom:-45px;
  }

  .kc-op-copy{
    padding:
      38px 22px
      5px !important;
  }

  .kc-op-copy h3{
    font-size:
      43px !important;

    letter-spacing:
      -2.7px !important;
  }

  .kc-op-visual{
    min-height:
      530px !important;

    padding:
      18px 8px !important;
  }

  .kc-op-photo,
  .kc-operation-sell
  .kc-op-photo,
  .kc-operation-deposit
  .kc-op-photo,
  .kc-operation-withdraw
  .kc-op-photo,
  .kc-operation-convert
  .kc-op-photo{
    width:100%;

    height:
      455px !important;

    margin:auto;

    border-radius:
      26px !important;

    clip-path:none !important;
  }

  .kc-operation-convert
  .kc-op-visual:before,
  .kc-operation-convert
  .kc-op-visual:after{
    display:none;
  }

  .kc-operation-deposit
  .kc-flow-widget{
    width:
      calc(100% - 28px) !important;
  }

  .kc-operation-withdraw
  .kc-withdraw-widget,
  .kc-operation-convert
  .kc-convert-widget,
  .kc-operation-buy
  .kc-live-widget,
  .kc-operation-sell
  .kc-live-widget{
    width:
      calc(100% - 28px) !important;

    left:14px !important;
    right:14px !important;

    transform:none !important;
  }

  .kc-operation:before{
    font-size:150px;
  }

  .kc-mouse-glow{
    display:none;
  }

}


@media(prefers-reduced-motion:reduce){

  .kc-live-widget,
  .kc-flow-widget,
  .kc-withdraw-widget,
  .kc-convert-widget,
  .kc-operation-convert
  .kc-op-visual:before,
  .kc-operation-convert
  .kc-op-visual:after,
  .kc-operation
  .kc-op-copy:after{
    animation:none !important;
  }

  .kc-art-reveal{
    opacity:1;

    transform:none;

    filter:none;
  }

}