/* ==========================================================
   KONECTA CRYPTOS HOME APP V2

   REGLA PRINCIPAL:
   NO TOCAR:
   .service
   .kc-smart-hover
   .kc-smart-tool
   .kc-smart-drawer-live
   lógica individual de las operaciones
   ========================================================== */


html.kc-home-v2,
html.kc-home-v2 body{
  height:100%;
  overflow:hidden !important;
}


body.kc-home-v2{
  min-height:100dvh !important;
}


/* ==========================================================
   HOME = UNA PANTALLA
   ========================================================== */

body.kc-home-v2 main{
  position:relative !important;

  height:
    calc(
      100dvh -
      var(--kc-header-h,72px)
    ) !important;

  min-height:0 !important;

  overflow:hidden !important;

  padding:0 !important;
}


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

body.kc-home-v2
main > .hero-system{

  position:absolute !important;

  inset:0 !important;

  min-height:0 !important;

  height:100% !important;

  overflow:hidden !important;
}


body.kc-home-v2
.hero-system > .wrap{

  height:100% !important;

  min-height:0 !important;
}


/*
   Dejamos espacio inferior dinámico
   según altura REAL de #servicios
*/

body.kc-home-v2
.hero-slide{

  min-height:0 !important;

  height:100% !important;

  padding-bottom:
    calc(
      var(--kc-dock-h,250px)
      + 48px
    ) !important;
}


/* controles originales del hero */

body.kc-home-v2
.hero-controls{

  position:absolute !important;

  bottom:
    calc(
      var(--kc-dock-h,250px)
      + 18px
    ) !important;

  z-index:25 !important;
}


/* efectos del HERO.
   No afectan operaciones. */

body.kc-home-v2
.hero-slide.active
.hero-copy{

  animation:
    kcV2CopyIn
    .55s
    cubic-bezier(.2,.75,.2,1)
    both;
}


body.kc-home-v2
.hero-slide.active
.visual{

  animation:
    kcV2VisualIn
    .68s
    cubic-bezier(.2,.75,.2,1)
    both;
}


@keyframes kcV2CopyIn{

  from{
    opacity:.2;
    transform:translateX(-22px);
  }

  to{
    opacity:1;
    transform:none;
  }

}


@keyframes kcV2VisualIn{

  from{
    opacity:.15;

    transform:
      translateX(24px)
      scale(.975);
  }

  to{
    opacity:1;
    transform:none;
  }

}


/* ==========================================================
   PISO INFERIOR
   ========================================================== */

#kcHomeShelfV2{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:
    calc(
      (var(--kc-dock-h,250px) * .50)
      + 36px
    );

  z-index:18;

  pointer-events:none;

  border-top:
    1px solid
    rgba(75,177,255,.11);

  background:
    linear-gradient(
      180deg,
      rgba(5,19,32,.94),
      rgba(3,13,23,.995)
    );

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


#kcHomeShelfV2::before{

  content:"";

  position:absolute;

  top:0;
  left:50%;

  width:min(1000px,80%);
  height:1px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(53,170,255,.35),
      transparent
    );
}


/* ==========================================================
   CINCO OPERACIONES

   IMPORTANTE:
   SOLO MOVEMOS LA SECCION COMPLETA.
   NO TOCAMOS LAS TARJETAS INTERNAS.
   ========================================================== */

body.kc-home-v2
#servicios{

  position:absolute !important;

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

  bottom:32px !important;

  z-index:45 !important;

  margin:0 !important;

  padding:0 !important;

  background:
    transparent !important;

  border:0 !important;

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


@keyframes kcDockEnterV2{

  from{
    opacity:0;
    transform:translateY(24px);
  }

  to{
    opacity:1;
    transform:none;
  }

}


body.kc-home-v2
#servicios > .wrap{

  width:
    min(
      1420px,
      calc(100% - 46px)
    ) !important;

  max-width:none !important;

  margin:
    0 auto !important;
}


/*
  Solo hacemos compacta la CABECERA.
  Las tarjetas quedan intactas.
*/

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

  margin:
    0 0 3px !important;

  opacity:1 !important;
  transform:none !important;
}


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

  max-width:none !important;

  margin:
    0 0 7px !important;

  font-size:
    clamp(
      22px,
      1.8vw,
      31px
    ) !important;

  line-height:1 !important;

  opacity:1 !important;
  transform:none !important;
}


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

  display:none !important;
}


/*
  NO HAY reglas aquí para:
  #servicios .service
  .kc-smart-hover
  .kc-smart-tool
  .kc-smart-drawer-live
*/


/* ==========================================================
   BOTON INFORMACION GENERAL
   LADO IZQUIERDO PARA SEPARARLO VISUALMENTE
   DE LAS OPERACIONES
   ========================================================== */

#kcGeneralLauncher{

  position:absolute;

  left:0;
  top:48%;

  z-index:75;

  min-height:112px;

  display:flex;

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

  gap:8px;

  padding:14px 9px;

  writing-mode:vertical-rl;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(83,179,255,.22);

  border-left:0;

  border-radius:
    0 15px 15px 0;

  background:
    rgba(6,23,39,.94);

  color:#eaf7ff;

  font:inherit;

  font-size:10px;
  font-weight:800;

  letter-spacing:.12em;

  cursor:pointer;

  backdrop-filter:blur(14px);

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

  transition:
    transform .2s,
    background .2s,
    border-color .2s;
}


#kcGeneralLauncher:hover{

  transform:
    translateY(-50%)
    translateX(3px);

  background:
    rgba(8,35,59,.98);

  border-color:
    rgba(70,182,255,.5);
}


#kcGeneralLauncher span:first-child{

  writing-mode:horizontal-tb;

  color:#53c6ff;

  font-size:17px;
}


/* ==========================================================
   BACKDROP SOLO PARA INFO/FOOTER GENERAL
   ========================================================== */

#kcGeneralBackdrop{

  position:absolute;

  inset:0;

  z-index:120;

  opacity:0;
  visibility:hidden;

  background:
    rgba(0,6,13,.57);

  backdrop-filter:
    blur(7px);

  transition:
    opacity .28s,
    visibility .28s;
}


body.kc-general-open
#kcGeneralBackdrop{

  opacity:1;
  visibility:visible;
}


/* ==========================================================
   DRAWER INFORMACION GENERAL
   NO ES EL DRAWER DE OPERACIONES
   ========================================================== */

#kcGeneralDrawer{

  position:absolute;

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

  z-index:130;

  width:
    min(
      1120px,
      92vw
    );

  display:flex;

  flex-direction:column;

  overflow:hidden;

  transform:
    translateX(-102%);

  border-right:
    1px solid
    rgba(82,179,255,.18);

  background:
    linear-gradient(
      180deg,
      rgba(5,19,33,.99),
      rgba(3,12,22,.995)
    );

  box-shadow:
    35px 0 100px
    rgba(0,0,0,.48);

  transition:
    transform .42s
    cubic-bezier(.2,.8,.2,1);
}


#kcGeneralDrawer.kc-open{
  transform:none;
}


.kc-general-head{

  flex:0 0 70px;

  display:flex;

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

  padding:
    12px 18px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}


.kc-general-head small{

  display:block;

  margin-bottom:3px;

  color:#49baff;

  font-size:9px;

  font-weight:800;

  letter-spacing:.16em;
}


.kc-general-head strong{

  font-size:18px;

  color:#fff;
}


.kc-general-close{

  width:40px;
  height:40px;

  display:flex;

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

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

  border-radius:11px;

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

  color:#fff;

  font-size:20px;

  cursor:pointer;
}


/* ==========================================================
   TABS
   ========================================================== */

.kc-general-tabs{

  flex:0 0 auto;

  display:flex;

  gap:7px;

  overflow-x:auto;

  padding:
    9px 13px;

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

  scrollbar-width:none;
}


.kc-general-tabs::-webkit-scrollbar{
  display:none;
}


.kc-general-tab{

  flex:0 0 auto;

  height:36px;

  padding:
    0 13px;

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

  border-radius:10px;

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

  color:
    rgba(235,246,255,.68);

  font:inherit;

  font-size:10px;

  font-weight:800;

  cursor:pointer;
}


.kc-general-tab.kc-active{

  color:#fff;

  border-color:
    rgba(55,174,255,.38);

  background:
    rgba(27,132,225,.18);
}


/* ==========================================================
   CONTENIDO DEL PANEL GENERAL
   ========================================================== */

#kcGeneralContent{

  flex:1 1 auto;

  min-height:0;

  overflow:hidden;
}


.kc-general-pane{

  display:none;

  width:100%;
  height:100%;

  overflow-y:auto;
  overflow-x:hidden;

  overscroll-behavior:contain;
}


.kc-general-pane.kc-active{

  display:block;

  animation:
    kcGeneralPane
    .3s ease both;
}


@keyframes kcGeneralPane{

  from{
    opacity:0;
    transform:translateX(-12px);
  }

  to{
    opacity:1;
    transform:none;
  }

}


/*
  Mantener diseño original de cada sección.
*/

.kc-general-pane
> section{

  display:block !important;

  margin:0 !important;
}


.kc-general-pane.kc-active
.reveal,

.kc-general-pane.kc-active
.kpx-reveal{

  opacity:1 !important;

  visibility:visible !important;

  transform:none !important;
}


/* ==========================================================
   BOTON FOOTER
   ========================================================== */

#kcFooterLauncherV2{

  position:absolute;

  left:50%;
  bottom:4px;

  z-index:80;

  width:43px;
  height:30px;

  display:flex;

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

  transform:
    translateX(-50%);

  border:
    1px solid
    rgba(80,181,255,.26);

  border-radius:
    14px 14px 8px 8px;

  background:
    rgba(7,25,42,.96);

  color:#58c9ff;

  font-size:20px;

  cursor:pointer;
}


/* ==========================================================
   FOOTER ORIGINAL DESPLEGABLE
   ========================================================== */

#kcFooterSheetV2{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  z-index:135;

  max-height:
    min(
      80dvh,
      800px
    );

  display:flex;

  flex-direction:column;

  overflow:hidden;

  transform:
    translateY(103%);

  border-top:
    1px solid
    rgba(85,184,255,.18);

  border-radius:
    23px 23px 0 0;

  background:#040e18;

  box-shadow:
    0 -35px 100px
    rgba(0,0,0,.5);

  transition:
    transform .43s
    cubic-bezier(.2,.8,.2,1);
}


#kcFooterSheetV2.kc-open{
  transform:none;
}


.kc-footer-v2-bar{

  position:relative;

  flex:
    0 0 42px;

  display:flex;

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

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


.kc-footer-v2-grip{

  width:52px;
  height:4px;

  border-radius:20px;

  background:
    rgba(190,225,248,.32);
}


#kcFooterCloseV2{

  position:absolute;

  top:6px;
  right:14px;

  width:31px;
  height:31px;

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

  border-radius:9px;

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

  color:#fff;

  cursor:pointer;
}


.kc-footer-v2-scroll{

  flex:1 1 auto;

  min-height:0;

  overflow-y:auto;
}


.kc-footer-v2-scroll
#footer{

  display:block !important;

  margin:0 !important;
}


.kc-footer-v2-scroll
#footer .reveal{

  opacity:1 !important;

  visibility:visible !important;

  transform:none !important;
}


/* ==========================================================
   MOVIL
   ========================================================== */

@media(max-width:900px){

  #kcGeneralDrawer{
    width:100%;
  }

  #kcGeneralLauncher{
    min-height:90px;
  }

  #kcFooterSheetV2{
    max-height:88dvh;
  }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

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

  body.kc-home-v2
  .hero-copy,

  body.kc-home-v2
  .visual,

  body.kc-home-v2
  #servicios,

  #kcGeneralDrawer,

  #kcFooterSheetV2,

  .kc-general-pane{

    animation:none !important;
    transition:none !important;
  }

}