/* HLV-inspired blue lettering and tangible geometry for the live HTML phone. */
#pago-anticipado #pagos h3.journey-live-title.has-lettering{position:relative;z-index:5;max-width:500px;width:100%;padding:0;margin:0 auto 24px;background:none;border:0;border-radius:0;box-shadow:none;font-size:0!important;line-height:1!important;transform:rotate(-1deg)}
#pago-anticipado #pagos .journey-lettering{display:block;width:100%;height:auto;filter:drop-shadow(3px 8px 6px #39281b21);max-width:none}
#pago-anticipado #pagos .journey-title-copy.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#pago-anticipado #pagos .phone-depth{position:relative;isolation:isolate;width:278px;max-width:100%;height:530px;margin:0 auto 22px;transform:perspective(1100px) rotateY(-12deg) rotateX(3deg) rotateZ(-3deg);transform-style:preserve-3d}
#pago-anticipado #pagos .phone-depth::before{content:'';position:absolute;inset:3px -10px -3px 10px;border-radius:39px;background:linear-gradient(90deg,#292521 2%,#827362 83%,#b8a68b 92%,#4b4135);transform:translateZ(-8px);box-shadow:18px 26px 34px -9px #39281b70,6px 7px 7px #39281b33;pointer-events:none}
#pago-anticipado #pagos .phone-depth::after{content:'';position:absolute;right:-8px;top:105px;width:3px;height:55px;border-radius:3px;background:#7c6c57;transform:translateZ(-3px);box-shadow:0 2px 2px #18141066;pointer-events:none}
#pago-anticipado #pagos .phone-depth .demo-phone{width:100%;max-width:none;height:530px;margin:0;transform:translateZ(1px);box-shadow:inset 1px 0 0 #c7b69b,0 1px 0 #181410;backface-visibility:hidden}
#pago-anticipado #pagos .payment-demo .demo-vicuna{z-index:4}
#pago-anticipado #pagos .payment-demo .demo-controls{position:relative;z-index:5}
@media(max-width:800px){
 #pago-anticipado #pagos h3.journey-live-title.has-lettering{max-width:410px;margin-bottom:23px}
}
@media(max-width:450px){
 #pago-anticipado #pagos h3.journey-live-title.has-lettering{width:calc(100% + 6px);max-width:none;margin-left:-3px;margin-bottom:20px}
 #pago-anticipado #pagos .phone-depth{width:250px;max-width:100%;transform:perspective(1000px) rotateY(-10deg) rotateX(2deg) rotateZ(-2deg);margin-bottom:20px}
 #pago-anticipado #pagos .phone-depth::before{inset:3px -8px -2px 8px;border-radius:38px;box-shadow:12px 20px 24px -9px #39281b70,4px 5px 5px #39281b33}
 #pago-anticipado #pagos .phone-depth::after{right:-6px}
}