/* =========================================================
   KONECTA CRYPTOS
   HOME LIVE MARKET V4

   SOLO:
   - HERO
   - POSICION DE #servicios
   - MARKET STRIP

   NO TOCAR:
   - #servicios .service internamente
   - kc-smart-hover
   - kc-smart-tool
   - kc-smart-drawer-live
   ========================================================= */


/* =========================================================
   QUITAR ROTULO PEQUEÑO ARRIBA DEL HERO
   ========================================================= */

body.kc-home-v4
.kc-operations-hero-label{
  display:none !important;
}


/* =========================================================
   HERO
   ========================================================= */

body.kc-home-v4
.kc-operations-hero{

  overflow:hidden !important;
}


body.kc-home-v4
.kc-ops-hero-slide{

  height:100% !important;

  min-height:0 !important;

  padding-top:
    clamp(
      14px,
      2.2vh,
      28px
    ) !important;

  padding-bottom:
    var(
      --kc-v4-hero-bottom,
      285px
    ) !important;
}


/* operación completa */

body.kc-home-v4
.kc-ops-hero-slide
.kc-operation{

  display:grid !important;

  grid-template-columns:
    minmax(310px,.72fr)
    minmax(500px,1.28fr) !important;

  align-items:center !important;

  gap:
    clamp(
      25px,
      3vw,
      54px
    ) !important;

  width:100% !important;

  max-width:none !important;

  min-height:0 !important;
}


/* texto izquierda */

body.kc-home-v4
.kc-op-copy{

  position:relative;

  z-index:5;

  max-width:
    480px !important;
}


body.kc-home-v4
.kc-op-copy h3{

  font-size:
    clamp(
      30px,
      3vw,
      52px
    ) !important;

  line-height:
    .99 !important;
}


body.kc-home-v4
.kc-op-copy > p{

  max-width:
    460px !important;

  line-height:
    1.5 !important;
}


/* =========================================================
   ZONA VISUAL ORIGINAL DEL HERO

   Conservamos los nodos antiguos en el HTML,
   pero los ocultamos en HOME V4.
   ========================================================= */

body.kc-home-v4
.kc-op-visual{

  position:relative !important;

  width:100% !important;

  height:
    clamp(
      255px,
      34vh,
      355px
    ) !important;

  min-height:
    255px !important;

  overflow:visible !important;
}


body.kc-home-v4
.kc-op-visual
> .kc-op-photo,

body.kc-home-v4
.kc-op-visual
> .kc-live-widget,

body.kc-home-v4
.kc-op-visual
> .kc-flow-widget,

body.kc-home-v4
.kc-op-visual
> .kc-withdraw-widget,

body.kc-home-v4
.kc-op-visual
> .kc-convert-widget{

  display:none !important;
}


/* =========================================================
   LIVE INTELLIGENCE CARD
   ========================================================= */

.kc-live-intel{

  --intel:
    #45b8ff;

  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  padding:
    clamp(
      15px,
      1.7vw,
      24px
    );

  overflow:hidden;

  border:
    1px solid
    rgba(108,190,255,.18);

  border-radius:
    22px;

  background:
    radial-gradient(
      circle at 78% 12%,
      rgba(42,142,241,.12),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(7,28,47,.97),
      rgba(3,15,27,.99)
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.35),
    inset 0 1px 0
    rgba(255,255,255,.035);

  backdrop-filter:
    blur(16px);

  animation:
    kcIntelIn
    .48s
    cubic-bezier(.2,.8,.2,1)
    both;
}


@keyframes kcIntelIn{

  from{
    opacity:0;

    transform:
      translateX(18px)
      scale(.985);
  }

  to{
    opacity:1;
    transform:none;
  }

}


.kc-live-intel::before{

  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--intel),
      transparent
    );

  opacity:.7;
}


/* =========================================================
   CABECERA LIVE
   ========================================================= */

.kc-intel-head{

  position:relative;

  z-index:3;

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:18px;
}


.kc-intel-kicker{

  display:flex;

  align-items:center;

  gap:7px;

  margin-bottom:5px;

  color:
    #6f8ca8;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .14em;
}


.kc-intel-live-dot{

  width:6px;
  height:6px;

  border-radius:50%;

  background:
    var(--intel);

  box-shadow:
    0 0 10px
    var(--intel);

  animation:
    kcLivePulse
    1.5s infinite;
}


@keyframes kcLivePulse{

  50%{
    opacity:.35;
  }

}


.kc-intel-title{

  display:block;

  color:#fff;

  font-size:
    clamp(
      13px,
      1.2vw,
      17px
    );

  font-weight:
    850;
}


.kc-intel-source{

  flex:0 0 auto;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(255,255,255,.075);

  border-radius:
    9px;

  background:
    rgba(255,255,255,.025);

  color:
    #718ba5;

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


/* =========================================================
   PRICE HEADER
   ========================================================= */

.kc-intel-price-row{

  position:relative;

  z-index:3;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:20px;

  margin-top:
    clamp(
      8px,
      1.4vh,
      14px
    );
}


.kc-intel-price{

  color:#f4f9ff;

  font-size:
    clamp(
      25px,
      2.5vw,
      39px
    );

  font-weight:
    900;

  letter-spacing:
    -.045em;

  line-height:1;
}


.kc-intel-change{

  padding:
    6px 9px;

  border-radius:
    9px;

  font-size:
    10px;

  font-weight:
    850;
}


.kc-intel-change.up{

  color:#43dba9;

  background:
    rgba(34,203,151,.09);

  border:
    1px solid
    rgba(34,203,151,.15);
}


.kc-intel-change.down{

  color:#ff6d82;

  background:
    rgba(255,87,115,.09);

  border:
    1px solid
    rgba(255,87,115,.15);
}


/* =========================================================
   REAL GRAPH
   ========================================================= */

.kc-intel-chart{

  position:relative;

  flex:
    1 1 auto;

  min-height:
    75px;

  margin:
    8px 0 5px;

  overflow:hidden;

  border-radius:
    12px;

  background:
    linear-gradient(
      rgba(255,255,255,.023) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.023) 1px,
      transparent 1px
    );

  background-size:
    100% 25%,
    12.5% 100%;
}


.kc-intel-chart svg{

  position:absolute;

  inset:0;

  width:100%;
  height:100%;
}


.kc-intel-chart
.kc-live-line{

  fill:none;

  stroke:
    var(--intel);

  stroke-width:2.2;

  stroke-linecap:round;

  stroke-linejoin:round;

  vector-effect:
    non-scaling-stroke;

  filter:
    drop-shadow(
      0 0 5px
      color-mix(
        in srgb,
        var(--intel) 40%,
        transparent
      )
    );
}


.kc-intel-chart
.kc-live-area{

  fill:
    color-mix(
      in srgb,
      var(--intel) 10%,
      transparent
    );

  stroke:none;
}


/* =========================================================
   METRICS
   ========================================================= */

.kc-intel-metrics{

  position:relative;

  z-index:3;

  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:
    7px;
}


.kc-intel-metric{

  min-width:0;

  padding:
    8px 9px;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:
    10px;

  background:
    rgba(255,255,255,.018);
}


.kc-intel-metric small{

  display:block;

  margin-bottom:3px;

  overflow:hidden;

  color:
    #637c94;

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  white-space:nowrap;

  text-overflow:ellipsis;
}


.kc-intel-metric strong{

  display:block;

  overflow:hidden;

  color:#dcecff;

  font-size:
    clamp(
      9px,
      .85vw,
      12px
    );

  white-space:nowrap;

  text-overflow:ellipsis;
}


/* =========================================================
   RANGE 24H
   ========================================================= */

.kc-market-range{

  position:relative;

  margin-top:7px;
}


.kc-market-range-track{

  position:relative;

  height:5px;

  border-radius:
    20px;

  background:
    rgba(255,255,255,.065);
}


.kc-market-range-fill{

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  border-radius:
    20px;

  background:
    linear-gradient(
      90deg,
      rgba(61,190,255,.30),
      var(--intel)
    );
}


.kc-market-range-marker{

  position:absolute;

  top:50%;

  width:10px;
  height:10px;

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

  border-radius:50%;

  background:#fff;

  border:
    2px solid
    var(--intel);

  box-shadow:
    0 0 10px
    var(--intel);
}


.kc-market-range-labels{

  display:flex;

  justify-content:space-between;

  margin-top:4px;

  color:
    #587087;

  font-size:
    7px;
}


/* =========================================================
   CONTEXT / SIGNAL
   ========================================================= */

.kc-market-context{

  display:flex;

  align-items:center;

  gap:7px;

  margin-top:
    7px;

  color:
    #afc5d9;

  font-size:
    8px;

  line-height:1.3;
}


.kc-market-context
i{

  flex:
    0 0 6px;

  width:6px;
  height:6px;

  border-radius:50%;

  background:
    var(--intel);

  box-shadow:
    0 0 9px
    var(--intel);
}


/* =========================================================
   NETWORK BARS
   ========================================================= */

.kc-fee-graph{

  flex:
    1 1 auto;

  display:flex;

  align-items:flex-end;

  justify-content:center;

  gap:
    clamp(
      15px,
      3vw,
      38px
    );

  min-height:
    100px;

  padding:
    12px 10px 2px;
}


.kc-fee-column{

  flex:
    0 1 85px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:flex-end;

  height:100%;
}


.kc-fee-value{

  margin-bottom:5px;

  color:
    #dcecff;

  font-size:
    10px;

  font-weight:
    850;
}


.kc-fee-bar-wrap{

  display:flex;

  align-items:flex-end;

  width:
    clamp(
      27px,
      3vw,
      45px
    );

  height:
    70px;

  padding:
    3px;

  border-radius:
    9px;

  background:
    rgba(255,255,255,.035);
}


.kc-fee-bar{

  width:100%;

  min-height:5px;

  border-radius:
    6px;

  background:
    linear-gradient(
      180deg,
      var(--intel),
      color-mix(
        in srgb,
        var(--intel) 28%,
        transparent
      )
    );
}


.kc-fee-name{

  margin-top:6px;

  color:
    #617990;

  font-size:
    7px;

  font-weight:
    800;

  text-align:center;
}


/* =========================================================
   CONVERSION / COIN MATRIX
   ========================================================= */

.kc-convert-grid{

  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:7px;

  margin-top:
    10px;
}


.kc-convert-coin{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  padding:
    9px 10px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:
    11px;

  background:
    rgba(255,255,255,.02);
}


.kc-convert-symbol{

  display:flex;

  align-items:center;

  gap:7px;

  min-width:0;
}


.kc-coin-icon{

  flex:
    0 0 25px;

  width:25px;
  height:25px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:8px;

  background:
    rgba(255,255,255,.05);

  color:#dcecff;

  font-size:12px;

  font-weight:900;
}


.kc-convert-symbol strong{

  color:#e7f3ff;

  font-size:10px;
}


.kc-convert-price{

  text-align:right;
}


.kc-convert-price strong{

  display:block;

  color:#e7f3ff;

  font-size:10px;
}


.kc-convert-price small{

  font-size:8px;

  font-weight:800;
}


/* =========================================================
   LOADING
   ========================================================= */

.kc-intel-loading{

  position:absolute;

  inset:50% auto auto 50%;

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

  color:
    #70879e;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


/* =========================================================
   TARJETAS
   SOLO POSICIONAMOS #servicios COMPLETO.
   NO CAMBIAMOS .service.
   ========================================================= */

body.kc-home-v4
#servicios{

  position:absolute !important;

  left:0 !important;
  right:0 !important;

  top:
    var(
      --kc-v4-services-top,
      auto
    ) !important;

  bottom:
    auto !important;

  z-index:
    45 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  background:
    transparent !important;
}


/* cabecera del dock */

body.kc-home-v4
#servicios .section-text{

  display:none !important;
}


body.kc-home-v4
#servicios .section-label{

  margin-bottom:
    3px !important;
}


body.kc-home-v4
#servicios .section-title{

  margin-bottom:
    7px !important;

  line-height:
    1 !important;
}


/*
   INTENCIONALMENTE NO HAY
   ninguna regla para:

   #servicios .service
   .kc-smart-hover
   .kc-smart-tool
   .kc-smart-drawer-live
*/


/* =========================================================
   PISO 50/50
   ========================================================= */

body.kc-home-v4
#kcHomeShelfV2{

  top:
    var(
      --kc-v4-boundary,
      auto
    ) !important;

  bottom:
    0 !important;

  height:
    auto !important;
}


/* =========================================================
   CONTROLES HERO
   ========================================================= */

body.kc-home-v4
.kc-operations-hero-controls{

  position:absolute !important;

  top:
    var(
      --kc-v4-controls-top,
      auto
    ) !important;

  bottom:
    auto !important;

  z-index:
    43 !important;
}


/* =========================================================
   TICKER DE MONEDAS
   ========================================================= */

body.kc-home-v4
main > .market-strip.kc-live-coin-strip{

  position:absolute !important;

  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  z-index:
    60 !important;

  width:100% !important;

  margin:0 !important;

  overflow:hidden !important;

  border-top:
    1px solid
    rgba(81,181,255,.12);

  background:
    rgba(2,11,20,.99);

  box-shadow:
    0 -12px 35px
    rgba(0,0,0,.18);
}


body.kc-home-v4
.kc-live-coin-strip
.market-track{

  align-items:center;
}


.kc-coin-ticker{

  min-width:
    190px !important;
}


.kc-coin-ticker-left{

  display:flex;

  align-items:center;

  gap:8px;
}


.kc-coin-ticker
.kc-coin-icon{

  flex:
    0 0 27px;

  width:27px;
  height:27px;
}


.kc-coin-ticker
strong{

  display:block;

  color:#eaf5ff;

  font-size:10px;
}


.kc-coin-ticker
small{

  display:block;

  color:#5e758c;

  font-size:7px;
}


.kc-coin-ticker-price{

  margin-left:auto;

  text-align:right;
}


.kc-coin-ticker-price
b{

  display:block;

  color:#dcecff;

  font-size:9px;
}


.kc-coin-ticker-price
em{

  display:block;

  margin-top:2px;

  font-size:7px;

  font-style:normal;

  font-weight:850;
}


.kc-ticker-up{
  color:#3bd9a3 !important;
}


.kc-ticker-down{
  color:#ff6379 !important;
}


/* footer arrow away from ticker */

body.kc-home-v4
#kcFooterLauncherV2{

  left:auto !important;

  right:
    12px !important;

  bottom:
    9px !important;

  z-index:
    80 !important;

  transform:none !important;
}


/* =========================================================
   DESKTOP BAJO
   ========================================================= */

@media
(max-height:800px)
and
(min-width:901px){

  body.kc-home-v4
  .kc-op-copy h3{

    font-size:
      clamp(
        28px,
        2.7vw,
        43px
      ) !important;
  }


  body.kc-home-v4
  .kc-op-copy > p{

    font-size:
      10px !important;
  }


  body.kc-home-v4
  .kc-op-visual{

    height:
      clamp(
        230px,
        31vh,
        290px
      ) !important;

    min-height:
      225px !important;
  }


  .kc-live-intel{

    padding:
      13px;
  }


  .kc-intel-chart{

    min-height:
      58px;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

  body.kc-home-v4
  .kc-ops-hero-slide
  .kc-operation{

    grid-template-columns:
      .8fr 1.2fr !important;

    gap:
      18px !important;
  }


  .kc-intel-metrics{

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}


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

@media(max-width:800px){

  body.kc-home-v4
  .kc-ops-hero-slide
  .kc-operation{

    grid-template-columns:
      1fr !important;
  }


  body.kc-home-v4
  .kc-op-copy{

    display:none !important;
  }


  body.kc-home-v4
  .kc-op-visual{

    width:100% !important;

    height:
      min(
        36vh,
        285px
      ) !important;
  }


  .kc-live-intel{

    border-radius:
      17px;
  }


  .kc-intel-price{

    font-size:
      25px;
  }


  .kc-intel-metric:nth-child(n+3){

    display:none;
  }


  .kc-convert-grid{

    grid-template-columns:
      1fr 1fr;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

  .kc-live-intel,
  .kc-intel-live-dot{

    animation:none !important;
  }

}



/* =========================================================
   KC V4 - SEÑALADOR DE OPERACION ACTIVA
   ========================================================= */

#kcOperationPointerV4{

  --kc-pointer-color:#45b8ff;

  position:absolute;

  left:0;
  top:0;

  z-index:70;

  width:34px;
  height:43px;

  pointer-events:none;

  opacity:0;

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

  transition:
    left .60s cubic-bezier(.2,.8,.2,1),
    top .35s ease,
    opacity .25s ease;

  filter:
    drop-shadow(
      0 0 10px
      color-mix(
        in srgb,
        var(--kc-pointer-color) 55%,
        transparent
      )
    );
}


/* punto superior */

#kcOperationPointerV4
.kc-pointer-dot{

  position:absolute;

  left:50%;
  top:0;

  width:7px;
  height:7px;

  transform:
    translateX(-50%);

  border-radius:50%;

  background:
    var(--kc-pointer-color);

  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--kc-pointer-color) 15%,
      transparent
    ),
    0 0 15px
    var(--kc-pointer-color);
}


/* línea */

#kcOperationPointerV4
.kc-pointer-line{

  position:absolute;

  left:50%;
  top:8px;

  width:1px;
  height:20px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      var(--kc-pointer-color),
      transparent
    );
}


/* flecha apuntando hacia la tarjeta */

#kcOperationPointerV4
.kc-pointer-arrow{

  position:absolute;

  left:50%;
  bottom:2px;

  width:11px;
  height:11px;

  border-right:
    2px solid
    var(--kc-pointer-color);

  border-bottom:
    2px solid
    var(--kc-pointer-color);

  transform:
    translateX(-50%)
    rotate(45deg);

  animation:
    kcPointerBounceV4
    1.3s ease-in-out
    infinite;
}


@keyframes kcPointerBounceV4{

  0%,
  100%{
    translate:0 -2px;
    opacity:.65;
  }

  50%{
    translate:0 3px;
    opacity:1;
  }

}


/* señal visual MUY ligera sobre tarjeta activa */

body.kc-home-v4
#servicios
.service.kc-current-operation-v4{

  outline:
    1px solid
    color-mix(
      in srgb,
      var(--kc-chart,#45b8ff) 48%,
      transparent
    );

  outline-offset:2px;

  filter:
    brightness(1.045);
}


/*
   IMPORTANTE:
   no modificamos:
   transform
   hover
   click
   smart drawer
*/



/* ==========================================================
   KC HOME LIVE MARKET V4.2
   WIDGETS INDEPENDIENTES:
   RETIRAR + CONVERTIR
   ========================================================== */


/*
   Ocultar únicamente el widget dinámico V4 anterior
   dentro de estos DOS slides.

   NO se toca ninguna tarjeta #servicios.
*/

.kc-ops-hero-slide[data-kc-operation-slide="retirar"]
.kc-op-visual
> .kc-live-intel,

.kc-ops-hero-slide[data-kc-operation-slide="convertir"]
.kc-op-visual
> .kc-live-intel{

  display:none !important;
}


/* ==========================================================
   CONTENEDOR V4.2

   IMPORTANTE:
   NO usa clase .kc-live-intel,
   por lo que V4 original nunca puede reemplazarlo.
   ========================================================== */

.kc-v42-widget{

  --intel:#45b8ff;

  position:absolute;

  inset:0;

  z-index:20;

  display:flex;

  flex-direction:column;

  min-width:0;

  padding:
    clamp(
      15px,
      1.7vw,
      24px
    );

  overflow:hidden;

  border:
    1px solid
    rgba(108,190,255,.18);

  border-radius:22px;

  background:
    radial-gradient(
      circle at 78% 12%,
      color-mix(
        in srgb,
        var(--intel) 12%,
        transparent
      ),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(7,28,47,.98),
      rgba(3,15,27,.995)
    );

  box-shadow:
    0 28px 70px
    rgba(0,0,0,.34),
    inset 0 1px 0
    rgba(255,255,255,.035);

  animation:
    kcV42Enter
    .38s
    cubic-bezier(.2,.8,.2,1)
    both;
}


.kc-v42-widget::before{

  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--intel),
      transparent
    );

  opacity:.75;
}


@keyframes kcV42Enter{

  from{
    opacity:0;
    transform:
      translateX(12px)
      scale(.988);
  }

  to{
    opacity:1;
    transform:none;
  }
}


/* ==========================================================
   RETIRAR
   ========================================================== */

#kcV42Withdraw{

  --intel:#ffc455;
}


.kc-v42-fees{

  flex:1 1 auto;

  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  align-items:end;

  gap:
    clamp(
      9px,
      1.4vw,
      18px
    );

  min-height:105px;

  margin-top:8px;
}


.kc-v42-fee{

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  align-items:center;

  min-width:0;

  height:100%;
}


.kc-v42-fee-usd{

  margin-bottom:4px;

  color:#eef7ff;

  font-size:
    clamp(
      9px,
      .9vw,
      12px
    );

  font-weight:850;

  white-space:nowrap;
}


.kc-v42-fee-barbox{

  display:flex;

  align-items:flex-end;

  width:
    clamp(
      28px,
      3vw,
      45px
    );

  height:70px;

  padding:3px;

  border-radius:9px;

  background:
    rgba(255,255,255,.045);
}


.kc-v42-fee-bar{

  width:100%;

  min-height:7px;

  border-radius:6px;

  background:
    linear-gradient(
      180deg,
      #ffc455,
      rgba(255,196,85,.18)
    );

  box-shadow:
    0 0 13px
    rgba(255,196,85,.15);
}


.kc-v42-fee-rate{

  margin-top:5px;

  color:#7f94aa;

  font-size:7px;

  font-weight:800;

  text-align:center;

  line-height:1.35;
}


/* ==========================================================
   CONVERTIR
   ========================================================== */

#kcV42Convert{

  --intel:#ef68d5;
}


.kc-v42-coins{

  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:8px;

  margin-top:
    clamp(
      10px,
      2vh,
      18px
    );
}


.kc-v42-coin{

  display:flex;

  align-items:center;

  justify-content:space-between;

  min-width:0;

  gap:10px;

  padding:
    10px 11px;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:11px;

  background:
    rgba(255,255,255,.025);
}


.kc-v42-coin-left{

  display:flex;

  align-items:center;

  gap:8px;
}


.kc-v42-icon{

  width:28px;
  height:28px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex:0 0 28px;

  border-radius:8px;

  background:
    rgba(255,255,255,.055);

  color:#f2f7ff;

  font-size:13px;

  font-weight:900;
}


.kc-v42-symbol{

  color:#edf6ff;

  font-size:10px;

  font-weight:850;
}


.kc-v42-price{

  min-width:0;

  text-align:right;
}


.kc-v42-price strong{

  display:block;

  color:#edf7ff;

  font-size:
    clamp(
      9px,
      .9vw,
      12px
    );

  white-space:nowrap;
}


.kc-v42-price small{

  display:block;

  margin-top:2px;

  font-size:8px;

  font-weight:850;
}


/* ==========================================================
   MENSAJES
   ========================================================== */

.kc-v42-status{

  display:flex;

  align-items:center;

  justify-content:center;

  flex:1 1 auto;

  min-height:100px;

  color:#71889e;

  font-size:9px;

  font-weight:800;

  letter-spacing:.06em;
}


.kc-v42-error{

  color:#ff8293;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:800px){

  .kc-v42-widget{

    padding:13px;

    border-radius:17px;
  }


  .kc-v42-fees{

    gap:6px;
  }


  .kc-v42-coins{

    gap:6px;
  }

}


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

  .kc-v42-widget{
    animation:none !important;
  }

}



/* ==========================================================
   KC HOME V4.3
   VISIBILIDAD EXPLICITA RETIRAR / CONVERTIR
   ========================================================== */


/*
   El console ya confirmó:
   CONVERTIR OK.

   Por tanto aseguramos que el widget cargado
   no pueda quedar oculto por CSS previo.
*/


body.kc-home-v4
.kc-ops-hero-slide[data-kc-operation-slide="convertir"].active
.kc-op-visual,

body.kc-home-v4
.kc-ops-hero-slide[data-kc-operation-slide="retirar"].active
.kc-op-visual{

  display:block !important;

  position:relative !important;

  opacity:1 !important;

  visibility:visible !important;

  overflow:visible !important;
}


body.kc-home-v4
.kc-ops-hero-slide[data-kc-operation-slide="convertir"].active
#kcV42Convert,

body.kc-home-v4
.kc-ops-hero-slide[data-kc-operation-slide="retirar"].active
#kcV42Withdraw{

  display:flex !important;

  position:absolute !important;

  inset:0 !important;

  width:100% !important;

  height:100% !important;

  min-width:0 !important;

  min-height:0 !important;

  opacity:1 !important;

  visibility:visible !important;

  z-index:50 !important;

  transform:none !important;
}


/*
   Los widgets antiguos de esos dos slides
   permanecen ocultos para que nunca queden
   por encima del widget LIVE.
*/

body.kc-home-v4
.kc-ops-hero-slide[data-kc-operation-slide="convertir"]
.kc-op-visual
> .kc-convert-widget,

body.kc-home-v4
.kc-ops-hero-slide[data-kc-operation-slide="retirar"]
.kc-op-visual
> .kc-withdraw-widget{

  display:none !important;
}


/*
   Nada de esto aplica a #servicios.
   Las tarjetas quedan intactas.
*/



/* ==========================================================
   KC V4.4
   CONVERTIR - POSICION DIRECTA EN EL ARTICLE
   ========================================================== */

body.kc-home-v4
.kc-operation-convert{

  position:relative !important;
}


/*
   El widget ya NO depende de .kc-op-visual.
*/

body.kc-home-v4
.kc-operation-convert
> #kcV42Convert{

  display:flex !important;

  position:absolute !important;

  left:auto !important;

  right:0 !important;

  top:50% !important;

  bottom:auto !important;

  width:
    min(
      57%,
      760px
    ) !important;

  height:
    clamp(
      245px,
      34vh,
      355px
    ) !important;

  min-height:
    245px !important;

  transform:
    translateY(-50%) !important;

  opacity:1 !important;

  visibility:visible !important;

  pointer-events:auto !important;

  z-index:250 !important;
}


/*
   Dejamos la columna visual del grid,
   pero ocultamos solamente lo viejo
   en Convertir.
*/

body.kc-home-v4
.kc-operation-convert
> .kc-op-visual{

  visibility:hidden !important;

  pointer-events:none !important;
}


body.kc-home-v4
.kc-operation-convert
> #kcV42Convert{

  visibility:visible !important;

  pointer-events:auto !important;
}


/* móvil */

@media(max-width:800px){

  body.kc-home-v4
  .kc-operation-convert
  > #kcV42Convert{

    left:0 !important;

    right:0 !important;

    top:50% !important;

    width:100% !important;

    max-width:none !important;

    height:
      min(
        36vh,
        300px
      ) !important;

  }

}



/* ==========================================================
   TICKER INFERIOR
   ICONOS REALES DE MONEDAS
   ========================================================== */

.kc-live-coin-strip
.kc-real-coin-icon{

  flex:0 0 32px;

  width:32px;
  height:32px;

  display:flex;

  align-items:center;
  justify-content:center;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:50%;

  background:
    #fff;

  box-shadow:
    0 4px 14px
    rgba(0,0,0,.22);
}


.kc-live-coin-strip
.kc-real-coin-icon img{

  display:block;

  width:20px;
  height:20px;

  max-width:20px;
  max-height:20px;

  object-fit:contain;
}


/* XRP necesita un poco más de presencia */

.kc-live-coin-strip
.kc-coin-ticker-left{

  gap:9px;
}


/* movimiento suave al pasar */

.kc-live-coin-strip
.market-item:hover
.kc-real-coin-icon{

  transform:
    scale(1.08);

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.30);
}


.kc-live-coin-strip
.kc-real-coin-icon{

  transition:
    transform .20s ease,
    box-shadow .20s ease;
}