.diplopago{
  width:100%;
  display:flex;
  justify-content:center;
  padding:122px 20px 138px 20px;
  background-color:#173e50;
}

.diplopago .container{
  width:100%;
  max-width:1440px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.diplopago .title{
  font-size:39px;
  line-height:45px;
  text-transform:uppercase;
  text-align:center;
  color:white;
}

.diplopago .title span{
  color:#d7c46d;
}

.diplopago .subtitulo{
  margin-top:14px;
  max-width:840px;
  text-align:center;
  font-size:18px;
  line-height:26px;
  color:rgba(255,255,255,.92);
}

.diplopago .panel{
  width:100%;
  max-width:900px;
  margin-top:44px;
  display:flex;
  align-items:stretch;
  background-color:white;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
}

.diplopago .izquierda{
  width:100%;
  display:flex;
  flex-direction:column;
  padding:46px 52px 42px 52px;
}

.diplopago .derecha{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  padding:46px 36px 42px 36px;
  background-color:#f8f8f8;
  border-left:1px solid rgba(23,62,80,.08);
}

.diplopago .transferenciaPanel{
  max-width: 100%;
}

.diplopago .etiqueta{
  font-size:14px;
  line-height:18px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#d7c46d;
}

.diplopago .subtituloMetodo{
  margin-top:8px;
  font-size:24px;
  line-height:28px;
  color:#173e50;
}

.diplopago .compilado{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.diplopago .punto{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.diplopago .punto::before{
  content:"›";
  color:#d7c46d;
  font-size:26px;
  line-height:1;
  font-weight:700;
  margin-top:-1px;
  flex-shrink:0;
}

.diplopago .rasgo{
  font-size:15px;
  line-height:22px;
  color:#6b7280;
}

.diplopago .boton{
  margin-top:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:306px;
  min-height:42px;
  padding:12px 20px;
  border-radius:3px;
  background-color:#C9B96B;
  color:#173e50;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:13px;
  line-height:1;
}

.diplopago .boton:hover{
  background-color:#D7C56E;
}

.diplopago .boton img{
  width:14px;
  height:14px;
  object-fit:contain;
  flex-shrink:0;
}

.diplopago .nota{
  margin-top:18px;
  font-size:14px;
  line-height:20px;
  color:#6a7480;
  text-align:left;
  max-width:none;
}

.diplopago .qrBloque{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.diplopago .qr{
  width:186px;
  height:186px;
}

.diplopago .transferenciaTitulo{
  margin-top:8px;
  font-size:20px;
  line-height:24px;
  color:#173e50;
}

.diplopago .transferenciaLista{
  margin-top:18px;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.diplopago .transferenciaItem{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:#fff;
  border:1px solid rgba(23,62,80,.10);
  border-radius:8px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

.diplopago .transferenciaIcono{
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#173e50;
  color:#d7c46d;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  line-height:1;
}

.diplopago .transferenciaContenido{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
}

.diplopago .transferenciaLabel{
  font-size:12px;
  line-height:16px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#c8a93d;
}

.diplopago .transferenciaValor{
  font-size:15px;
  line-height:21px;
  color:#173e50;
  word-break:break-word;
}

.diplopago .transferenciaCopiar{
  width:22px;
  height:22px;
  flex:0 0 22px;
  margin-left:auto;
  border:0;
  background:transparent;
  position:relative;
  cursor:pointer;
}

.diplopago .transferenciaCopiar::before,
.diplopago .transferenciaCopiar::after{
  content:"";
  position:absolute;
  border:1.5px solid #7d8794;
  border-radius:2px;
  background:transparent;
}

.diplopago .transferenciaCopiar::before{
  width:9px;
  height:9px;
  left:7px;
  top:5px;
}

.diplopago .transferenciaCopiar::after{
  width:9px;
  height:9px;
  left:4px;
  top:8px;
}

.diplopago .transferenciaCopiar:hover::before,
.diplopago .transferenciaCopiar:hover::after,
.diplopago .transferenciaCopiar.is-copied::before,
.diplopago .transferenciaCopiar.is-copied::after{
  border-color:#c8a93d;
}

.diplopago .transferenciaBoton{
  margin-top:18px;
  width:100%;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border:1px solid rgba(23,62,80,.22);
  border-radius:6px;
  background:#fff;
  color:#173e50;
  text-transform:uppercase;
  letter-spacing:0.16em;
  font-size:12.5px;
  line-height:1.2;
  cursor:pointer;
}

.diplopago .transferenciaBoton:hover{
  background:#f7f7f2;
}

.diplopago .transferenciaBoton.is-copied{
  border-color:rgba(199,168,61,.5);
  background:#fbf8ec;
}

.diplopago .transferenciaBotonIcon{
  font-size:16px;
  line-height:1;
  color:#173e50;
}

.diplopago .transferenciaImportante{
  width:100%;
  margin-top:18px;
  padding:16px 16px 14px 16px;
  border:1px solid rgba(199,168,61,.24);
  border-radius:10px;
  background-color: white;
}

.diplopago .transferenciaImportanteTitulo{
  font-size:13px;
  line-height:18px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#c8a93d;
}

.diplopago .transferenciaImportanteLista{
  margin-top:10px;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  line-height:20px;
  color:#334155;
}

.diplopago .qr img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.diplopago .leyenda{
  margin-top:16px;
  max-width:250px;
  font-size:14px;
  line-height:20px;
  color:#607086;
  text-align:center;
}

@media(max-width:700px){

  .diplopago{
    padding:110px 20px 120px 20px;
  }

  .diplopago .panel{
    max-width:500px;
    flex-direction:column;
  }

  .diplopago .izquierda{
    padding:38px 36px 32px 36px;
  }

  .diplopago .derecha{
    max-width:none;
    padding:30px 36px 34px 36px;
    border-left:0;
    border-top:1px solid rgba(23,62,80,.08);
    flex-basis:auto;
  }

}

@media(max-width:600px){

  .diplopago{
    padding:78px 20px 84px 20px;
  }

  .diplopago .title{
    font-size:34px;
    line-height:39px;
  }

  .diplopago .subtitulo{
    font-size:15px;
    line-height:22px;
  }

  .diplopago .panel{
    margin-top:32px;
  }

  .diplopago .izquierda{
    padding:30px 20px 26px 20px;
  }

  .diplopago .derecha{
    padding:24px 20px 26px 20px;
  }

  .diplopago .etiqueta{
    font-size:12px;
    line-height:16px;
  }

  .diplopago .subtituloMetodo{
    font-size:21px;
    line-height:24px;
  }

  .diplopago .compilado{
    margin-top:20px;
    gap:8px;
  }

  .diplopago .rasgo{
    font-size:14px;
    line-height:20px;
  }

  .diplopago .boton{
    max-width:100%;
    padding:12px 16px;
    font-size:12.5px;
    letter-spacing:0.12em;
  }

  .diplopago .nota{
    font-size:13px;
    line-height:18px;
  }

  .diplopago .transferenciaTitulo{
    font-size:18px;
    line-height:22px;
  }

  .diplopago .transferenciaLista{
    margin-top:14px;
    gap:10px;
  }

  .diplopago .transferenciaItem{
    padding:10px 12px;
  }

  .diplopago .transferenciaValor{
    font-size:14px;
    line-height:20px;
  }

  .diplopago .transferenciaBoton{
    font-size:11.5px;
    letter-spacing:0.12em;
  }

  .diplopago .transferenciaImportante{
    padding:14px 14px 12px 14px;
  }

  .diplopago .transferenciaImportanteLista{
    margin-top:8px;
    gap:7px;
    font-size:13px;
    line-height:18px;
  }

  .diplopago .qr{
    width:154px;
    height:154px;
  }

  .diplopago .leyenda{
    max-width:100%;
    font-size:13px;
    line-height:18px;
    margin-top:14px;
  }

}