/* ==========================================================
   KC HERO LAYOUT V1
   3 ZONAS:
   WIDGET | TEXTO | FUTURO PNG
   ========================================================== */

@media (min-width: 1001px){

  #operaciones-kc .kc-operation{

    display:grid !important;

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

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

    column-gap:
      clamp(18px, 2vw, 34px) !important;

    align-items:center !important;

    width:100% !important;

    max-width:none !important;

    position:relative !important;

    overflow:visible !important;
  }


  /* ==========================
     ZONA 1 - WIDGET / GRAFICO
     ========================== */

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

    grid-area:visual !important;

    width:100% !important;

    max-width:none !important;

    min-width:0 !important;

    position:relative !important;

    inset:auto !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    transform:none !important;

    margin:0 !important;

    align-self:center !important;

    z-index:5 !important;
  }


  /* ==========================
     ZONA 2 - TITULO / TEXTO
     ========================== */

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

    grid-area:copy !important;

    position:relative !important;

    inset:auto !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    transform:none !important;

    width:100% !important;

    max-width:none !important;

    min-width:0 !important;

    margin:0 !important;

    padding:0 4px !important;

    align-self:center !important;

    z-index:10 !important;
  }


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

    width:100% !important;

    max-width:390px !important;

    margin-left:0 !important;
    margin-right:0 !important;
  }


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

    width:100% !important;

    max-width:390px !important;

    margin-left:0 !important;
    margin-right:0 !important;
  }


  /* ======================================================
     ZONA 3
     QUEDA VACIA POR AHORA.
     DESPUES AQUI METEMOS EL PNG.
     ====================================================== */


  /* Convertir V4.4 puede estar montado directo */
  #operaciones-kc .kc-operation-convert > #kcV42Convert{

    grid-area:visual !important;

    width:100% !important;

    max-width:none !important;

    position:relative !important;

    inset:auto !important;

    transform:none !important;

    margin:0 !important;

    z-index:15 !important;
  }


  /* Retirar puede estar montado directo */
  #operaciones-kc .kc-operation-withdraw > #kcV42Withdraw{

    grid-area:visual !important;

    width:100% !important;

    max-width:none !important;

    position:relative !important;

    inset:auto !important;

    transform:none !important;

    margin:0 !important;

    z-index:15 !important;
  }

}


/* ==========================================================
   PANTALLAS MEDIANAS
   ========================================================== */

@media (min-width: 1001px) and (max-width: 1250px){

  #operaciones-kc .kc-operation{

    grid-template-columns:
      minmax(270px, 1fr)
      minmax(270px, .9fr)
      minmax(175px, .5fr) !important;

    column-gap:15px !important;
  }

}


/* ==========================================================
   MOVIL / TABLET
   NO FORZAR TERCERA COLUMNA
   ========================================================== */

@media (max-width: 1000px){

  #operaciones-kc .kc-operation{

    grid-template-columns:1fr !important;

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

}