/* ==========================================================
   KONECTA CRYPTOS
   HERO ALIGN V2

   WIDGET | PERSONA | TEXTO
   ========================================================== */

@media (min-width:1001px){

  /* ----------------------------------------------------------
     ESCENARIO GENERAL
     ---------------------------------------------------------- */

  #operaciones-kc .kc-operation{

    display:grid !important;

    grid-template-columns:
      minmax(300px,1.08fr)
      minmax(210px,.62fr)
      minmax(310px,.98fr) !important;

    grid-template-areas:
      "visual person copy" !important;

    column-gap:
      clamp(24px,3vw,48px) !important;

    align-items:center !important;

    min-height:
      clamp(300px,37vh,370px) !important;

    width:100% !important;

    position:relative !important;

    overflow:visible !important;
  }


  /* ----------------------------------------------------------
     COLUMNA 1
     WIDGET / GRAFICO
     ---------------------------------------------------------- */

  #operaciones-kc
  .kc-operation
  > .kc-op-visual{

    grid-area:visual !important;

    align-self:center !important;

    justify-self:stretch !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:100% !important;

    min-width:0 !important;

    margin:0 !important;

    position:relative !important;

    inset:auto !important;

    transform:none !important;
  }


  /* Los widgets interiores conservan su diseño,
     pero quedan centrados dentro de la columna. */

  #operaciones-kc
  .kc-operation
  > .kc-op-visual
  > *{

    max-width:100% !important;

    margin-left:auto !important;

    margin-right:auto !important;
  }


  /* ----------------------------------------------------------
     COLUMNA 2
     PERSONA
     ---------------------------------------------------------- */

  #operaciones-kc
  .kc-operation
  > .kc-hero-person-slot{

    grid-area:person !important;

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    align-self:center !important;

    justify-self:center !important;

    width:100% !important;

    height:
      clamp(260px,34vh,335px) !important;

    margin:0 !important;

    padding:0 !important;

    min-width:0 !important;

    overflow:visible !important;

    pointer-events:none !important;

    z-index:25 !important;
  }


  #operaciones-kc
  .kc-operation
  > .kc-hero-person-slot
  img{

    display:block !important;

    width:auto !important;

    height:100% !important;

    max-width:100% !important;

    max-height:100% !important;

    object-fit:contain !important;

    object-position:center center !important;

    margin:0 auto !important;

    transform:none !important;
  }


  /* ----------------------------------------------------------
     COLUMNA 3
     TEXTO
     ---------------------------------------------------------- */

  #operaciones-kc
  .kc-operation
  > .kc-op-copy{

    grid-area:copy !important;

    align-self:center !important;

    justify-self:start !important;

    position:relative !important;

    inset:auto !important;

    transform:none !important;

    width:100% !important;

    max-width:410px !important;

    min-width:0 !important;

    margin:0 !important;

    padding:0 !important;

    text-align:left !important;

    z-index:10 !important;
  }


  #operaciones-kc
  .kc-operation
  > .kc-op-copy
  h3{

    width:100% !important;

    max-width:390px !important;

    margin-left:0 !important;

    margin-right:0 !important;
  }


  #operaciones-kc
  .kc-operation
  > .kc-op-copy
  p{

    width:100% !important;

    max-width:390px !important;

    margin-left:0 !important;

    margin-right:0 !important;
  }


  /* ----------------------------------------------------------
     CONVERTIR
     Su widget V4 puede estar montado directamente.
     ---------------------------------------------------------- */

  #operaciones-kc
  .kc-operation-convert
  > #kcV42Convert{

    grid-area:visual !important;

    align-self:center !important;

    justify-self:center !important;

    margin:auto !important;

    position:relative !important;

    inset:auto !important;

    transform:none !important;
  }

}


/* ==========================================================
   TABLET / MOVIL
   NO CAMBIAR EL COMPORTAMIENTO EXISTENTE
   ========================================================== */

@media (max-width:1000px){

  #operaciones-kc
  .kc-operation
  > .kc-hero-person-slot{

    display:none !important;
  }

}


/* ==========================================================
   OVERRIDE SOLO VENDER
   PERSONA | TEXTO | VISUAL
   ========================================================== */

@media (min-width:1001px){

  #operaciones-kc
  .kc-operation[data-kc-operation-slide="vender"]{

    grid-template-columns:
      minmax(210px,.62fr)
      minmax(310px,.98fr)
      minmax(300px,1.08fr) !important;

    grid-template-areas:
      "person copy visual" !important;
  }

  #operaciones-kc
  .kc-operation[data-kc-operation-slide="vender"]
  > .kc-hero-person-slot{
    grid-area:person !important;
    justify-self:center !important;
    align-self:center !important;
  }

  #operaciones-kc
  .kc-operation[data-kc-operation-slide="vender"]
  > .kc-op-copy{
    grid-area:copy !important;
    justify-self:center !important;
    align-self:center !important;
    text-align:left !important;
    max-width:410px !important;
  }

  #operaciones-kc
  .kc-operation[data-kc-operation-slide="vender"]
  > .kc-op-visual{
    grid-area:visual !important;
    justify-self:stretch !important;
    align-self:center !important;
  }

  #operaciones-kc
  .kc-operation[data-kc-operation-slide="vender"]
  > .kc-op-visual
  > *{
    margin-left:auto !important;
    margin-right:auto !important;
  }

}


/* ==========================================================
   VENDER - ORDEN ESPECIAL REAL
   PERSONA | TEXTO | GRAFICO
   ========================================================== */

@media (min-width:1001px){

  #operaciones-kc #vender{

    display:grid !important;

    grid-template-columns:
      minmax(210px,.62fr)
      minmax(310px,.98fr)
      minmax(300px,1.08fr) !important;

    grid-template-areas:
      "person copy visual" !important;

    column-gap:
      clamp(24px,3vw,48px) !important;

    align-items:center !important;
  }


  #operaciones-kc
  #vender
  > .kc-hero-person-slot{

    grid-area:person !important;

    align-self:center !important;
    justify-self:center !important;
  }


  #operaciones-kc
  #vender
  > .kc-op-copy{

    grid-area:copy !important;

    align-self:center !important;
    justify-self:start !important;

    width:100% !important;
    max-width:390px !important;

    margin:0 !important;

    text-align:left !important;
  }


  #operaciones-kc
  #vender
  > .kc-op-visual{

    grid-area:visual !important;

    align-self:center !important;
    justify-self:stretch !important;

    width:100% !important;

    margin:0 !important;
  }

}


/* ==========================================================
   DEPOSITAR - ORDEN ESPECIAL
   TEXTO | GRAFICO | PERSONA
   ========================================================== */

@media (min-width:1001px){

  #operaciones-kc #depositar{

    display:grid !important;

    grid-template-columns:
      minmax(310px,.98fr)
      minmax(300px,1.08fr)
      minmax(210px,.62fr) !important;

    grid-template-areas:
      "copy visual person" !important;

    column-gap:
      clamp(24px,3vw,48px) !important;

    align-items:center !important;
  }


  #operaciones-kc
  #depositar
  > .kc-op-copy{

    grid-area:copy !important;

    align-self:center !important;
    justify-self:start !important;

    width:100% !important;
    max-width:390px !important;

    margin:0 !important;

    text-align:left !important;
  }


  #operaciones-kc
  #depositar
  > .kc-op-visual{

    grid-area:visual !important;

    align-self:center !important;
    justify-self:center !important;

    width:100% !important;

    margin:0 !important;
  }

  #operaciones-kc
  #depositar
  > .kc-op-visual
  > *{

    margin-left:auto !important;
    margin-right:auto !important;
    max-width:100% !important;
  }


  #operaciones-kc
  #depositar
  > .kc-hero-person-slot{

    grid-area:person !important;

    align-self:center !important;
    justify-self:center !important;
  }

}


/* ==========================================================
   CONVERTIR - IGUAL QUE VENDER
   PERSONA | TEXTO | GRAFICO
   ========================================================== */

@media (min-width:1001px){

  #operaciones-kc #convertir{

    display:grid !important;

    grid-template-columns:
      minmax(210px,.62fr)
      minmax(310px,.98fr)
      minmax(300px,1.08fr) !important;

    grid-template-areas:
      "person copy visual" !important;

    column-gap:
      clamp(24px,3vw,48px) !important;

    align-items:center !important;
  }


  #operaciones-kc
  #convertir
  > .kc-hero-person-slot{

    grid-area:person !important;

    align-self:center !important;
    justify-self:center !important;
  }


  #operaciones-kc
  #convertir
  > .kc-op-copy{

    grid-area:copy !important;

    align-self:center !important;
    justify-self:start !important;

    width:100% !important;
    max-width:390px !important;

    margin:0 !important;

    text-align:left !important;
  }


  #operaciones-kc
  #convertir
  > .kc-op-visual{

    grid-area:visual !important;

    align-self:center !important;
    justify-self:stretch !important;

    width:100% !important;

    margin:0 !important;
  }

}


/* ==========================================================
   HERO PERSONAS
   DIFUMINADO INFERIOR SUAVE
   APLICA A LAS 5 OPERACIONES
   ========================================================== */

@media (min-width:1001px){

  #operaciones-kc
  .kc-operation
  > .kc-hero-person-slot
  img{

    -webkit-mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 84%,
        rgba(0,0,0,.92) 88%,
        rgba(0,0,0,.70) 92%,
        rgba(0,0,0,.38) 96%,
        rgba(0,0,0,0) 100%
      ) !important;

    mask-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 84%,
        rgba(0,0,0,.92) 88%,
        rgba(0,0,0,.70) 92%,
        rgba(0,0,0,.38) 96%,
        rgba(0,0,0,0) 100%
      ) !important;

    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;

    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
  }

}