/* ==========================================================
   VERC0MERCIALIZADORES 32B.6
   HERO BANCARIO PROFESIONAL
   ========================================================== */


/* ----------------------------------------------------------
   El mensaje sigue siendo protagonista
   ---------------------------------------------------------- */

.vc32b2-hero-grid{
  grid-template-columns:
    minmax(0,1.28fr)
    minmax(360px,.72fr) !important;

  gap:
    clamp(34px,5vw,72px) !important;

  align-items:center !important;
}


.vc32b2-copy{
  position:relative;
  z-index:3;
}


/* ----------------------------------------------------------
   Fotografía integrada al fondo
   ---------------------------------------------------------- */

.vc32b2-hero-visual{
  position:relative !important;

  display:flex !important;

  align-items:center !important;

  justify-content:flex-end !important;

  min-width:0 !important;

  overflow:visible !important;
}


.vc32b2-photo-frame{
  position:relative !important;

  width:100% !important;

  max-width:480px !important;

  height:470px !important;

  overflow:hidden !important;

  border:0 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}


/*
 * Mezcla la fotografía con el fondo.
 * No parece una tarjeta pegada.
 */

.vc32b2-photo-frame{
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 14%,
      black 88%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 14%,
      black 88%,
      transparent 100%
    );
}


.vc32b2-photo-frame img{
  width:100% !important;

  height:100% !important;

  display:block !important;

  object-fit:cover !important;

  object-position:70% 35% !important;

  border:0 !important;

  border-radius:0 !important;

  box-shadow:none !important;

  filter:
    saturate(.90)
    contrast(.97)
    brightness(1.02) !important;
}


/*
 * Se elimina el velo viejo.
 */

.vc32b2-photo-frame::after{
  display:none !important;
}


/*
 * Nada flotando sobre la persona.
 */

.vc32b2-photo-message,
.vc32b2-online{
  display:none !important;
}


/* ----------------------------------------------------------
   Desktop intermedio
   ---------------------------------------------------------- */

@media(max-width:1100px){

  .vc32b2-hero-grid{
    grid-template-columns:
      minmax(0,1.18fr)
      minmax(320px,.82fr) !important;

    gap:28px !important;
  }


  .vc32b2-photo-frame{
    max-width:420px !important;
    height:420px !important;
  }

}


/* ----------------------------------------------------------
   Tablet / ventana partida
   ---------------------------------------------------------- */

@media(max-width:820px){

  .vc32b2-hero-grid{
    grid-template-columns:
      1fr !important;

    gap:18px !important;
  }


  .vc32b2-hero-visual{
    justify-content:flex-start !important;
  }


  .vc32b2-photo-frame{
    width:100% !important;

    max-width:560px !important;

    height:315px !important;
  }


  .vc32b2-photo-frame{
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to right,
        transparent 0%,
        black 8%,
        black 92%,
        transparent 100%
      );
  }


  .vc32b2-photo-frame img{
    object-position:70% 35% !important;
  }

}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media(max-width:640px){

  .vc32b2-photo-frame{
    max-width:100% !important;
    height:280px !important;
  }

}


/* ----------------------------------------------------------
   Mobile chico
   ---------------------------------------------------------- */

@media(max-width:420px){

  .vc32b2-photo-frame{
    height:245px !important;
  }

}


/* VC32B6-END */


/* Home office: a large scene with a diagonal fade beside the copy. */
.vc32b2-photo-frame img{object-fit:contain !important; object-position:center bottom !important; filter:none !important;}
@media(min-width:821px){
  .vc32b2-hero-grid{position:relative;isolation:isolate;}
  .vc32b2-copy{grid-column:1;}
  .vc32b2-hero-visual{
    position:absolute !important;top:0;right:-24px;bottom:0;
    width:66% !important;height:100% !important;z-index:1;pointer-events:none;
  }
  .vc32b2-photo-frame{
    width:100% !important;max-width:none !important;height:100% !important;
    -webkit-mask-image:linear-gradient(115deg,transparent 12%,rgba(0,0,0,.15) 30%,black 57%) !important;
    mask-image:linear-gradient(115deg,transparent 12%,rgba(0,0,0,.15) 30%,black 57%) !important;
  }
  .vc32b2-photo-frame img{object-fit:cover !important;object-position:right bottom !important;}
}
@media(min-width:821px) and (max-width:1100px){
  .vc32b2-photo-frame img{object-fit:contain !important;object-position:right center !important;transform:scale(1.25);transform-origin:right center;}
}
@media(max-width:820px){
  .vc32b2-hero-visual{justify-content:center !important;}
  .vc32b2-photo-frame{height:440px !important;max-width:100% !important;-webkit-mask-image:none !important;mask-image:none !important;}
}
@media(max-width:420px){.vc32b2-photo-frame{height:390px !important;}}

/* Home office v12 and signup access on maximized windows. */
.mobile-cta{display:flex;}
@media(min-width:981px){
  .mobile-cta{left:auto;right:92px;bottom:20px;width:260px;min-height:48px;}
  body{padding-bottom:84px;}
}