/* ==========================================================
   VERC0MERCIALIZADORES
   ITERACION 32B.2

   PORTADA COMERCIAL LIMPIA
   RESPONSIVE REAL
   ========================================================== */


/* ----------------------------------------------------------
   BASE
   ---------------------------------------------------------- */

html{
  scroll-padding-top:86px;
}


body{
  overflow-x:hidden;
}


.vc32b2-legacy-right{
  display:none !important;
}


/*
 * El panel técnico 32B.1 ya no pertenece
 * al hero principal.
 *
 * La plataforma continúa accesible
 * desde el CTA correspondiente.
 */

.vc29-app-menu,
.vc32-product-panel{
  display:none !important;
}



/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.vc29-header{
  box-shadow:
    0 1px 0
    rgba(13,50,104,.08);
}


.vc29-brand-copy small{
  max-width:280px;
}


@media(min-width:1001px){

  .vc29-nav{
    gap:4px !important;
  }

  .vc29-nav a{
    padding:
      9px
      11px !important;

    white-space:nowrap;
  }

}



/* ----------------------------------------------------------
   HERO GRID NUEVO
   ---------------------------------------------------------- */

.vc32b2-hero-grid{

  width:
    min(
      1240px,
      calc(100% - 48px)
    ) !important;

  margin:
    0
    auto !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(390px,.92fr) !important;

  gap:
    clamp(
      36px,
      5vw,
      78px
    ) !important;

  align-items:center !important;

  padding:
    56px
    0
    48px !important;

}


.vc32b2-copy{

  min-width:0;

  position:relative;

  z-index:2;

}



/* ----------------------------------------------------------
   KICKER
   ---------------------------------------------------------- */

.vc29-kicker{

  margin-bottom:
    14px !important;

  color:
    #2177ef !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;

  letter-spacing:
    2px !important;

}



/* ----------------------------------------------------------
   TITULO
   ---------------------------------------------------------- */

#vc29-title{

  max-width:
    720px !important;

  margin:
    0 !important;

  color:
    #071f4e !important;

  font-size:
    clamp(
      45px,
      4.55vw,
      72px
    ) !important;

  font-weight:
    900 !important;

  line-height:
    .99 !important;

  letter-spacing:
    -2.8px !important;

}


#vc29-title span{

  color:
    #1474ef !important;

}



/* ----------------------------------------------------------
   TEXTO
   ---------------------------------------------------------- */

.vc29-lead{

  max-width:
    690px !important;

  margin:
    22px
    0
    0 !important;

  color:
    #526b8b !important;

  font-size:
    16px !important;

  line-height:
    1.62 !important;

}



/* ----------------------------------------------------------
   4 BENEFICIOS
   ---------------------------------------------------------- */

.vc29-features{

  display:grid !important;

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

  gap:
    10px !important;

  margin-top:
    27px !important;

}


.vc29-feature{

  min-width:0;

  padding:
    13px
    8px !important;

  border:
    1px solid
    #dce8f6 !important;

  border-radius:
    13px !important;

  background:
    rgba(
      255,
      255,
      255,
      .76
    ) !important;

  text-align:center;

  box-shadow:
    0 6px 18px
    rgba(
      18,
      59,
      110,
      .035
    ) !important;

}


.vc29-feature-icon{

  width:
    39px !important;

  height:
    39px !important;

  margin:
    0
    auto
    8px !important;

}


.vc29-feature strong{

  display:block;

  color:
    #0b3267 !important;

  font-size:
    11px !important;

}


.vc29-feature > span{

  display:block;

  margin-top:
    3px !important;

  color:
    #758ba6 !important;

  font-size:
    8px !important;

  line-height:
    1.3 !important;

}



/* ----------------------------------------------------------
   CTA
   ---------------------------------------------------------- */

.vc29-hero-actions{

  display:flex !important;

  flex-wrap:wrap !important;

  gap:
    11px !important;

  margin-top:
    24px !important;

}


.vc29-primary,
.vc29-secondary{

  min-height:
    50px !important;

  padding:
    0
    23px !important;

  border-radius:
    11px !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;

}


.vc29-primary{

  background:
    linear-gradient(
      135deg,
      #136df0,
      #0d82e8
    ) !important;

  box-shadow:
    0 12px 28px
    rgba(
      20,
      111,
      239,
      .18
    ) !important;

}


.vc29-secondary{

  background:
    rgba(
      255,
      255,
      255,
      .76
    ) !important;

}



/* ----------------------------------------------------------
   TRUST MUY CORTO
   ---------------------------------------------------------- */

.vc29-trust{

  display:flex !important;

  flex-wrap:wrap !important;

  gap:
    7px
    17px !important;

  margin-top:
    15px !important;

}


.vc29-trust span{

  font-size:
    8.5px !important;

  color:
    #607a99 !important;

}



/* ==========================================================
   NUEVA IMAGEN DERECHA
   ========================================================== */

.vc32b2-hero-visual{

  position:relative;

  min-width:0;

  width:100%;

  align-self:stretch;

  display:flex;

  align-items:center;

  justify-content:center;

}


.vc32b2-photo-frame{

  position:relative;

  width:100%;

  max-width:
    505px;

  height:
    545px;

  overflow:hidden;

  border:
    1px solid
    rgba(
      23,
      76,
      144,
      .10
    );

  border-radius:
    30px;

  background:
    linear-gradient(
      145deg,
      #f8fbff,
      #edf5ff
    );

  box-shadow:
    0 34px 70px
    rgba(
      12,
      46,
      97,
      .14
    );

}


.vc32b2-photo-frame::after{

  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

    linear-gradient(
      180deg,
      transparent 55%,
      rgba(
        4,
        31,
        76,
        .14
      )
    );

}


.vc32b2-photo-frame img{

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

  object-position:
    center
    34%;

}



/* ----------------------------------------------------------
   OVERLAY MUY SIMPLE
   ---------------------------------------------------------- */

.vc32b2-photo-message{

  position:absolute;

  left:
    -24px;

  bottom:
    27px;

  z-index:3;

  width:
    min(
      330px,
      calc(100% - 20px)
    );

  padding:
    16px
    18px;

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

  border-radius:
    15px;

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

  box-shadow:
    0 17px 45px
    rgba(
      7,
      45,
      99,
      .14
    );

  backdrop-filter:
    blur(10px);

}


.vc32b2-photo-message small{

  display:block;

  color:
    #1681e9;

  font-size:
    8px;

  font-weight:
    950;

  letter-spacing:
    1.3px;

}


.vc32b2-photo-message strong{

  display:block;

  margin-top:
    5px;

  color:
    #082d62;

  font-size:
    16px;

  line-height:
    1.2;

}


.vc32b2-photo-message span{

  display:block;

  margin-top:
    5px;

  color:
    #6a819d;

  font-size:
    9px;

  line-height:
    1.4;

}



/* ----------------------------------------------------------
   MINI BADGE
   ---------------------------------------------------------- */

.vc32b2-online{

  position:absolute;

  right:
    -11px;

  top:
    28px;

  z-index:4;

  padding:
    8px
    11px;

  border-radius:
    999px;

  border:
    1px solid
    #d7eadf;

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

  color:
    #14754a;

  box-shadow:
    0 10px 28px
    rgba(
      16,
      62,
      96,
      .10
    );

  font-size:
    8px;

  font-weight:
    900;

}


.vc32b2-online::before{

  content:"";

  display:inline-block;

  width:6px;

  height:6px;

  margin-right:
    5px;

  border-radius:
    50%;

  background:
    #20bd73;

}



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

@media(max-width:1100px){

  .vc32b2-hero-grid{

    grid-template-columns:
      minmax(0,1.05fr)
      minmax(330px,.95fr) !important;

    gap:
      28px !important;

  }


  #vc29-title{

    font-size:
      clamp(
        41px,
        5.2vw,
        58px
      ) !important;

  }


  .vc32b2-photo-frame{

    height:
      470px;

  }


  .vc29-features{

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

  }

}



/* ==========================================================
   TABLET / MINIATURA
   Acá resolvemos el problema que se veía en tu captura.
   ========================================================== */

@media(max-width:900px){

  .vc32b2-hero-grid{

    width:
      min(
        760px,
        calc(100% - 32px)
      ) !important;

    grid-template-columns:
      1fr !important;

    gap:
      27px !important;

    padding:
      38px
      0
      34px !important;

  }


  .vc32b2-copy{

    width:100%;

  }


  #vc29-title{

    max-width:
      680px !important;

    font-size:
      clamp(
        40px,
        8vw,
        59px
      ) !important;

  }


  .vc29-lead{

    max-width:
      650px !important;

  }


  .vc32b2-hero-visual{

    order:
      2;

    width:100%;

  }


  .vc32b2-photo-frame{

    width:100%;

    max-width:none;

    height:
      420px;

  }


  .vc32b2-photo-frame img{

    object-position:
      center
      30%;

  }


  .vc32b2-photo-message{

    left:
      18px;

    bottom:
      18px;

  }


  .vc32b2-online{

    right:
      18px;

  }

}



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

@media(max-width:640px){

  .vc32b2-hero-grid{

    width:
      calc(
        100% - 28px
      ) !important;

    padding:
      29px
      0
      28px !important;

    gap:
      22px !important;

  }


  .vc29-kicker{

    font-size:
      9px !important;

    letter-spacing:
      1.5px !important;

  }


  #vc29-title{

    max-width:100% !important;

    font-size:
      clamp(
        34px,
        10.3vw,
        46px
      ) !important;

    line-height:
      1.01 !important;

    letter-spacing:
      -1.7px !important;

  }


  .vc29-lead{

    margin-top:
      17px !important;

    font-size:
      14px !important;

    line-height:
      1.55 !important;

  }


  .vc29-features{

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

    margin-top:
      20px !important;

  }


  .vc29-feature{

    padding:
      11px
      7px !important;

  }


  .vc29-hero-actions{

    display:grid !important;

    grid-template-columns:
      1fr !important;

    width:100% !important;

  }


  .vc29-primary,
  .vc29-secondary{

    width:
      100% !important;

    min-height:
      48px !important;

  }


  .vc29-trust{

    display:grid !important;

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

  }


  .vc32b2-photo-frame{

    height:
      390px;

    border-radius:
      21px;

  }


  .vc32b2-photo-frame img{

    object-position:
      center
      30%;

  }


  .vc32b2-photo-message{

    left:
      12px;

    right:
      12px;

    bottom:
      12px;

    width:auto;

  }


  .vc32b2-online{

    top:
      12px;

    right:
      12px;

  }

}



/* ==========================================================
   CELULARES CHICOS
   ========================================================== */

@media(max-width:420px){

  #vc29-title{

    font-size:
      32px !important;

  }


  .vc29-features{

    gap:
      7px !important;

  }


  .vc29-feature strong{

    font-size:
      9.5px !important;

  }


  .vc29-feature > span{

    font-size:
      7.5px !important;

  }


  .vc29-trust{

    grid-template-columns:
      1fr !important;

  }


  .vc32b2-photo-frame{

    height:
      345px;

  }


  .vc32b2-photo-message strong{

    font-size:
      14px;

  }

}



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

   Evita el menú enorme que cubría casi toda la portada.
   ========================================================== */

@media(max-width:1000px){

  header.vc29-header details{

    position:relative;

  }


  header.vc29-header details > div{

    position:absolute !important;

    top:
      calc(
        100% + 8px
      ) !important;

    right:
      0 !important;

    left:
      auto !important;

    width:
      min(
        305px,
        calc(
          100vw - 24px
        )
      ) !important;

    max-height:
      calc(
        100vh - 110px
      ) !important;

    overflow-y:
      auto !important;

    padding:
      10px !important;

    border-radius:
      14px !important;

    box-shadow:
      0 24px 60px
      rgba(
        9,
        38,
        79,
        .18
      ) !important;

  }


  header.vc29-header details > div a{

    min-height:
      42px !important;

    padding:
      10px
      12px !important;

    display:flex;

    align-items:center;

    border-radius:
      9px;

    font-size:
      13px !important;

  }

}



/* ==========================================================
   REDUCIR ANIMACIONES
   ========================================================== */

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

  *,
  *::before,
  *::after{

    scroll-behavior:auto !important;

    transition:none !important;

    animation:none !important;

  }

}


/* VC32B2-HOME-END */



/* ==========================================================
   ITERACION 32B.3
   HERO CORPORATIVO / FINANCIERO
   ========================================================== */


/*
 * El producto y el texto mandan.
 * La fotografía acompaña.
 */

.vc32b2-hero-grid{

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(300px,.65fr) !important;

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

}



/* ----------------------------------------------------------
   FOTO MENOS PROTAGONISTA
   ---------------------------------------------------------- */

.vc32b2-hero-visual{

  align-items:center !important;

  justify-content:flex-end !important;

}


.vc32b2-photo-frame{

  width:
    min(
      100%,
      390px
    ) !important;

  max-width:
    390px !important;

  height:
    430px !important;

  border-radius:
    22px !important;

  border:
    1px solid
    #d7e1ec !important;

  background:
    #eef3f8 !important;

  box-shadow:
    0 22px 52px
    rgba(
      11,
      42,
      80,
      .12
    ) !important;

}


.vc32b2-photo-frame::after{

  background:

    linear-gradient(
      180deg,
      transparent 72%,
      rgba(
        4,
        31,
        67,
        .09
      )
    ) !important;

}


.vc32b2-photo-frame img{

  object-fit:
    cover !important;

  object-position:
    center center !important;

}



/*
 * Sacamos el bloque publicitario
 * que estaba flotando encima de la foto.
 */

.vc32b2-photo-message{

  display:none !important;

}



/*
 * Badge pequeño, secundario.
 */

.vc32b2-online{

  top:
    14px !important;

  right:
    14px !important;

  padding:
    6px
    9px !important;

  font-size:
    7px !important;

  box-shadow:
    0 6px 17px
    rgba(
      16,
      62,
      96,
      .08
    ) !important;

}



/* ----------------------------------------------------------
   TEXTO: MÁS IMPORTANCIA
   ---------------------------------------------------------- */

.vc32b2-copy{

  max-width:
    760px;

}


#vc29-title{

  max-width:
    720px !important;

}


.vc29-lead{

  max-width:
    660px !important;

}



/* ==========================================================
   VENTANA MEDIANA
   ========================================================== */

@media(max-width:1050px){

  .vc32b2-hero-grid{

    grid-template-columns:
      minmax(0,1.2fr)
      minmax(270px,.8fr) !important;

    gap:
      26px !important;

  }


  .vc32b2-photo-frame{

    max-width:
      340px !important;

    height:
      390px !important;

  }

}



/* ==========================================================
   TABLET / PANTALLA DIVIDIDA
   ========================================================== */

@media(max-width:820px){

  .vc32b2-hero-grid{

    width:
      min(
        700px,
        calc(
          100% - 30px
        )
      ) !important;

    grid-template-columns:
      1fr !important;

    gap:
      22px !important;

  }


  .vc32b2-hero-visual{

    justify-content:
      flex-start !important;

  }


  .vc32b2-photo-frame{

    width:
      100% !important;

    max-width:
      none !important;

    height:
      285px !important;

  }


  .vc32b2-photo-frame img{

    object-position:
      center 36% !important;

  }

}



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

@media(max-width:640px){

  .vc32b2-photo-frame{

    height:
      245px !important;

    border-radius:
      16px !important;

  }


  /*
   * La foto queda después de la propuesta,
   * beneficios y botones.
   */

  .vc32b2-hero-visual{

    margin-top:
      2px;

  }

}



/* ==========================================================
   CELULAR PEQUEÑO
   ========================================================== */

@media(max-width:420px){

  .vc32b2-photo-frame{

    height:
      215px !important;

  }

}


/* VC32B3-CORPORATE-HERO-END */


/* VC32B4-HERO-PRO-START */

/* ==========================================================
   ITERACION 32B.4
   HERO BANCARIO / PROFESIONAL
   ========================================================== */

.vc32b2-photo-frame {
  width: min(100%, 370px) !important;
  max-width: 370px !important;
  height: 420px !important;
  border-radius: 22px !important;
  background: #eef3f8 !important;
}

.vc32b2-photo-frame img {
  object-fit: cover !important;
  object-position: center 24% !important;
}

.vc32b2-online {
  top: 14px !important;
  right: 14px !important;
}

@media(max-width:1050px) {
  .vc32b2-photo-frame {
    max-width: 330px !important;
    height: 385px !important;
  }
}

@media(max-width:820px) {
  .vc32b2-photo-frame {
    width: 100% !important;
    max-width: none !important;
    height: 285px !important;
  }

  .vc32b2-photo-frame img {
    object-position: center 22% !important;
  }
}

@media(max-width:640px) {
  .vc32b2-photo-frame {
    height: 235px !important;
  }
}

@media(max-width:420px) {
  .vc32b2-photo-frame {
    height: 210px !important;
  }
}

/* VC32B4-HERO-PRO-END */