:root{--blue:#0873e6;--cyan:#0aa7d8;--navy:#073b67;--orange:#ff5a0a;--ink:#10263c;--muted:#60758a;--line:#d9e6f1;--bg:#f3f8fc;--white:#fff}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#f7fbff 0,#edf7fc 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}
button{font:inherit}
.brandbar{height:92px;padding:14px clamp(20px,5vw,64px);background:#fff;display:flex;align-items:center;justify-content:center;gap:26px;border-bottom:1px solid #e4edf5}
.pixel-logo{width:min(260px,48vw);height:58px;object-fit:contain}
.cebys-logo{width:min(180px,34vw);height:58px;object-fit:contain}
.divider{height:42px;width:1px;background:#d9e5ef}
main{width:min(100% - 32px,980px);margin:0 auto;padding:44px 0 34px}
.intro{position:relative;min-height:170px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;margin-bottom:28px;padding:28px 34px;border-radius:22px;background:linear-gradient(120deg,#0873e6,#0a91e9 65%,#15c9bb);color:#fff;box-shadow:0 12px 32px rgba(7,91,171,.2)}.intro-copy{position:relative;z-index:1;max-width:590px}.eyebrow{display:inline-block;color:#95ffdb;font-size:.78rem;font-weight:800;letter-spacing:.16em}.intro h1{font-size:clamp(2rem,5vw,3rem);margin:7px 0 5px;letter-spacing:-.04em}.intro p{margin:0;color:#eaf8ff;font-size:1.05rem}.anniversary{position:absolute;right:-30px;bottom:-80px;width:300px;opacity:.19;mix-blend-mode:screen;transform:rotate(-2deg)}
.banks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.payment-card,.wallet-card{background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px rgba(7,59,103,.08)}
.payment-card{padding:22px;border-top:4px solid var(--blue)}.payment-card.interbank{border-top-color:#15a051}.payment-card.nation{border-top-color:#d71920}.payment-card.bbva{border-top-color:#072f61}.payment-card.scotia{border-top-color:#ed1b2f}.payment-card.paypal{border-top-color:#0070ba}
.card-title{display:flex;gap:14px;align-items:center;margin-bottom:20px}.card-title small{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}.card-title h2{font-size:1.1rem;margin:2px 0 0}.bank-logo{width:94px;height:46px;object-fit:contain}.account-holder{border-top:1px solid #e5edf4;margin:0;padding-top:13px}.account-holder span{display:block;color:var(--muted);font-size:.82rem}.account-holder strong{font-size:.94rem}.paypal-logo{font-size:1.55rem;font-weight:900;color:#0070ba}.paypal-logo i{color:#003087}.paypal-text{color:var(--muted);line-height:1.5}.pay-button,.download-qr{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;border-radius:11px}.pay-button{background:#0070ba;color:#fff;padding:13px 18px;width:100%;margin-top:8px}.download-qr{color:#78158b;background:#f5eafa;padding:10px 14px;margin-top:12px;width:100%}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid #e5edf4}.field div{min-width:0}.field span,.phone-row span,.holder span{display:block;color:var(--muted);font-size:.82rem;margin-bottom:3px}.field strong{font-size:1rem;overflow-wrap:anywhere;letter-spacing:.02em}
.copy{border:1px solid #bcd3e8;background:#edf6ff;color:var(--blue);padding:10px 15px;border-radius:11px;font-weight:800;cursor:pointer;min-height:44px;transition:.2s}.copy:hover{background:#dceeff}.copy:active{transform:scale(.97)}
.wallet-card{margin-top:18px;padding:26px;display:grid;grid-template-columns:1fr 240px;gap:30px;align-items:center;border-top:4px solid #7b168f}.wallet-logos{display:flex;align-items:center;gap:10px}.wallet-logos img{height:54px;width:54px;object-fit:contain}.wallet-logos span{color:var(--muted);font-weight:700}.wallet-copy h2{font-size:1.7rem;margin:12px 0 4px}.wallet-sub{color:var(--muted);margin:0 0 20px;max-width:540px}.phone-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;background:#f5f0fa;border:1px solid #e3cfea;border-radius:14px}.phone-row strong{font-size:1.45rem;letter-spacing:.04em}.primary{color:#fff;background:#78158b;border-color:#78158b}.primary:hover{background:#641074}.holder{margin:15px 0 0}.holder strong{font-size:1rem}
.qr-box{border:1px solid #dccbe3;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:13px;box-shadow:0 8px 24px rgba(79,19,94,.1)}.qr-box img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:12px}.qr-box strong{margin-top:10px}.qr-box small{color:var(--muted);margin-top:3px}
.notice{display:flex;align-items:center;gap:13px;background:#e9f9f1;color:#145d39;border:1px solid #bfe7d1;border-radius:16px;padding:16px 19px;margin-top:18px}.notice>span{background:#20a563;color:#fff;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-weight:900;flex:0 0 auto}.notice p{margin:0 0 7px;line-height:1.5}.whatsapp{display:inline-flex;align-items:center;gap:7px;color:#087b45;font-weight:800;text-decoration:underline;text-underline-offset:3px}.whatsapp img{width:25px;height:25px;object-fit:cover;border-radius:50%}.address{margin-top:15px!important;line-height:1.55;color:#405d75}footer{text-align:center;padding:25px 20px 38px;color:var(--navy)}footer p{margin:0 0 6px}footer small{color:var(--muted)}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,100px);opacity:0;background:#10263c;color:#fff;padding:13px 20px;border-radius:999px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:.25s;z-index:10}#toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:720px){.brandbar{height:76px;gap:14px;padding:10px 18px}.pixel-logo,.cebys-logo{height:48px}.divider{height:34px}main{width:min(100% - 22px,980px);padding-top:24px}.intro{min-height:180px;padding:25px}.anniversary{width:260px;right:-75px;bottom:-65px}.intro-copy{max-width:75%}.banks{grid-template-columns:1fr}.wallet-card{grid-template-columns:1fr;padding:21px}.qr-box{width:260px;max-width:100%;margin:auto}.phone-row{align-items:stretch;flex-direction:column}.primary{width:100%}.intro p{font-size:.98rem}.payment-card{padding:18px}}
@media(max-width:390px){.cebys-logo{width:120px}.pixel-logo{width:170px}.card-title{align-items:flex-start}.field{align-items:flex-start;flex-direction:column}.copy{width:100%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Diseño corporativo compacto Pixel */
body{background:radial-gradient(circle at 8% 12%,rgba(10,167,216,.18),transparent 28%),radial-gradient(circle at 92% 42%,rgba(21,201,187,.14),transparent 25%),linear-gradient(145deg,#eaf5ff 0,#f6fbff 48%,#e8f8f7 100%)}
.brandbar{height:82px;padding:10px clamp(20px,5vw,64px);background:linear-gradient(100deg,#fff 0,#f0f9ff 100%);justify-content:space-between;gap:24px;border-bottom:3px solid var(--cyan);box-shadow:0 5px 20px rgba(7,59,103,.09)}
.parent-brand{display:flex;align-items:center;gap:12px}.parent-brand>span{color:#526b82;font-size:.82rem;font-weight:750;white-space:nowrap}.cebys-logo{width:min(150px,31vw);height:50px}
main{width:min(100% - 28px,1080px);padding:24px 0 26px}
.intro{min-height:138px;margin-bottom:14px;padding:22px 30px;border-radius:18px;background:linear-gradient(120deg,#0559b8,#087ce8 57%,#08bca9)}
.intro h1{font-size:clamp(1.8rem,4vw,2.55rem)}.anniversary{width:265px;bottom:-75px}
.banks{gap:12px}.payment-card,.wallet-card{background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(242,249,255,.97));border-color:#c8dfee;border-radius:16px;box-shadow:0 7px 20px rgba(7,59,103,.1)}
.payment-card{padding:16px 18px}.card-title{gap:12px;margin-bottom:11px}.field{padding:10px 0}.account-holder{padding-top:10px}.copy{padding:8px 13px;min-height:40px}
.wallet-card{margin-top:12px;padding:20px 24px;grid-template-columns:1fr 220px;gap:22px}.wallet-copy h2{margin-top:8px}.wallet-sub{margin-bottom:14px}.phone-row{padding:13px}.notice{margin-top:12px;padding:13px 17px;border-radius:14px;background:linear-gradient(100deg,#ddf8eb,#edfdf7);box-shadow:0 5px 15px rgba(20,93,57,.07)}
footer{padding-top:18px}
@media(max-width:720px){.brandbar{height:76px;gap:9px;padding:8px 13px}.parent-brand{gap:5px}.parent-brand>span{font-size:.65rem}.cebys-logo{width:105px}.pixel-logo{width:165px}.intro{min-height:145px;padding:20px;margin-bottom:12px}.anniversary{width:230px}.wallet-card{padding:17px}.payment-card{padding:15px}}

/* Tarjetas con identidad visual y adaptación total */
html,body{max-width:100%;overflow-x:hidden}
.payment-card{position:relative;overflow:hidden;border:0;border-left:5px solid var(--blue);background:linear-gradient(135deg,#e8f4ff 0%,#f6fbff 62%,#dff4ff 100%)}
.payment-card::after{content:"";position:absolute;right:-45px;top:-55px;width:135px;height:135px;border-radius:50%;background:rgba(8,115,230,.07);pointer-events:none}
.payment-card.interbank{border-left-color:#009b4d;background:linear-gradient(135deg,#e2f8ea,#f7fdf9 62%,#ddf6e8)}
.payment-card.nation{border-left-color:#e51b2a;background:linear-gradient(135deg,#ffebed,#fffafa 62%,#ffe5e7)}
.payment-card.bbva{border-left-color:#075395;background:linear-gradient(135deg,#e2f1fb,#f7fbff 62%,#dcecf8)}
.payment-card.scotia{border-left-color:#ed1b2f;background:linear-gradient(135deg,#ffeaed,#fff9fa 62%,#ffe1e5)}
.payment-card.paypal{border-left-color:#087cc1;background:linear-gradient(135deg,#e1f3ff,#f7fbff 62%,#d8efff)}
.card-title,.field,.account-holder,.paypal-text,.pay-button{position:relative;z-index:1}
.field{border-color:rgba(60,100,135,.17)}.field strong{color:#092f50}.account-holder{border-color:rgba(60,100,135,.17)}
.wallet-card{background:linear-gradient(135deg,#f0e1f5 0%,#fcf8fd 58%,#dffafb 100%);border:1px solid #d8bde2}
.qr-box{background:rgba(255,255,255,.8)}

@media(max-width:720px){
  .brandbar{height:auto;min-height:72px;flex-wrap:wrap;justify-content:center;padding:9px 12px}
  .pixel-logo{width:min(205px,55vw);height:48px}
  .parent-brand{width:auto;max-width:100%;justify-content:center}.parent-brand>span{font-size:.72rem}.cebys-logo{width:min(132px,34vw);height:42px}
  main{width:calc(100% - 20px);padding:14px 0 20px}
  .intro{min-height:128px;padding:18px;border-radius:15px}.intro-copy{max-width:78%}.intro h1{font-size:1.72rem;line-height:1.05}.intro p{font-size:.9rem;line-height:1.35}.anniversary{right:-80px;bottom:-70px;width:215px}
  .banks{grid-template-columns:minmax(0,1fr);gap:10px}
  .payment-card{width:100%;min-width:0;padding:14px;border-radius:14px}
  .card-title{align-items:center}.bank-logo{width:82px;height:38px;flex:0 0 82px}.card-title h2{font-size:1rem;line-height:1.2}.card-title small{font-size:.72rem}
  .field{min-width:0;gap:8px}.field>div{min-width:0;flex:1}.field strong{display:block;font-size:.94rem;overflow-wrap:anywhere;word-break:break-word;letter-spacing:0}
  .copy{flex:0 0 auto;white-space:nowrap}
  .wallet-card{grid-template-columns:minmax(0,1fr);width:100%;min-width:0;padding:15px;gap:15px}.wallet-sub{font-size:.94rem}.phone-row{width:100%}.qr-box{width:min(250px,100%)}
  .notice{align-items:flex-start;font-size:.93rem}.notice>span{margin-top:2px}
  footer{padding:15px 14px 28px;font-size:.94rem}
}
@media(max-width:430px){
  .brandbar{display:grid;grid-template-columns:1fr;gap:3px;text-align:center}.pixel-logo{width:195px;margin:auto}.parent-brand{gap:7px}.parent-brand>span{font-size:.7rem}.cebys-logo{width:125px}
  main{width:calc(100% - 16px)}.intro-copy{max-width:82%}.intro h1{font-size:1.55rem}.intro p{font-size:.84rem}.eyebrow{font-size:.68rem}
  .field{align-items:stretch;flex-direction:column}.copy{width:100%;min-height:42px}.phone-row{align-items:stretch;flex-direction:column}.primary{width:100%}
  .account-holder strong{overflow-wrap:anywhere}.wallet-logos img{width:46px;height:46px}.wallet-copy h2{font-size:1.4rem}
}
@media(min-width:721px) and (max-width:1024px){main{width:calc(100% - 36px)}.banks{grid-template-columns:repeat(2,minmax(0,1fr))}.field strong{font-size:.92rem;overflow-wrap:anywhere}.brandbar{padding-inline:28px}}
.payment-card.bcp{order:1}.payment-card.interbank{order:2}.payment-card.bbva{order:3}.payment-card.nation{order:4}.payment-card.scotia{order:5}.payment-card.paypal{order:6}
.socials{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:17px auto 14px}.social{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(7,59,103,.14);border-radius:999px;background:rgba(255,255,255,.72);color:var(--navy);text-decoration:none;box-shadow:0 4px 12px rgba(7,59,103,.07);transition:transform .2s,box-shadow .2s}.social:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(7,59,103,.13)}.social span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;color:#fff;font-size:1.05rem;font-weight:900}.social b{font-size:.84rem}.facebook span{background:#1877f2;font-family:Arial;font-size:1.35rem}.tiktok span{background:#111;text-shadow:2px 1px #22e4e7,-2px -1px #ff2c55}.instagram span{background:linear-gradient(135deg,#6544d5,#d82c7d 55%,#f6a52d);font-size:1.3rem}
@media(max-width:430px){.socials{gap:8px}.social{padding:7px 10px}.social b{font-size:.78rem}.social span{width:25px;height:25px}}
.social img{width:26px;height:26px;display:block}.social span{display:none}

/* Corrección móvil: cabecera horizontal y tarjetas reducidas */
@media(max-width:600px){
  .brandbar{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;height:62px;min-height:62px;padding:6px 10px;gap:8px}
  .pixel-logo{width:128px;height:43px;flex:0 0 128px}
  .parent-brand{display:flex;width:auto;min-width:0;flex:1;justify-content:flex-end;gap:5px;white-space:nowrap}
  .parent-brand>span{font-size:.58rem;line-height:1.05}.cebys-logo{width:96px;height:39px;flex:0 0 96px}
  main{width:calc(100% - 12px);padding-top:9px}.intro{min-height:105px;padding:14px;margin-bottom:8px}.intro h1{font-size:1.42rem}.intro p{font-size:.78rem}.anniversary{width:180px;right:-66px}
  .banks{gap:7px}.payment-card{padding:10px 11px;border-left-width:4px;border-radius:11px}.payment-card::after{width:90px;height:90px;right:-34px;top:-40px}
  .card-title{margin-bottom:5px;gap:8px}.bank-logo{width:67px;height:30px;flex-basis:67px}.card-title small{font-size:.62rem;letter-spacing:.035em}.card-title h2{font-size:.88rem}
  .field{flex-direction:row;align-items:center;padding:7px 0;gap:6px}.field span{font-size:.7rem;margin-bottom:1px}.field strong{font-size:.82rem}.copy{width:auto;min-width:64px;min-height:34px;padding:6px 9px;font-size:.78rem;border-radius:8px}
  .account-holder{padding-top:7px}.account-holder span{font-size:.7rem}.account-holder strong{font-size:.82rem}.paypal-text{font-size:.85rem;margin:7px 0}.pay-button{padding:9px 12px;margin-top:3px;font-size:.86rem}
  .wallet-card{margin-top:8px;padding:12px;gap:10px}.wallet-logos img{width:38px;height:38px}.wallet-copy h2{font-size:1.25rem;margin:5px 0 2px}.wallet-sub{font-size:.82rem;margin-bottom:9px}.phone-row{padding:9px}.phone-row strong{font-size:1.12rem}.primary{width:auto}.qr-box{width:205px;padding:9px}.download-qr{padding:8px;font-size:.82rem}
  .notice{margin-top:8px;padding:10px;font-size:.82rem}.notice>span{width:24px;height:24px}.socials{margin:12px auto 10px;gap:7px}.social{padding:6px 9px;gap:6px}.social img{width:22px;height:22px}.social b{font-size:.72rem}
}
@media(max-width:350px){.pixel-logo{width:112px;flex-basis:112px}.parent-brand>span{font-size:.51rem}.cebys-logo{width:84px;flex-basis:84px}.field strong{font-size:.75rem}.copy{min-width:57px;padding-inline:6px}.social b{display:none}.social{padding:7px}}
@media(max-width:600px){.wallet-copy{text-align:center}.wallet-logos{justify-content:center}.wallet-sub{margin-left:auto;margin-right:auto}.phone-row>div{text-align:center}.holder{text-align:center}.qr-box{justify-self:center}}
