:root{
  --navy:#07143f; --navy2:#0b1d58; --violet:#6c3df1; --blue:#3186ff; --pink:#ff1d68;
  --text:#09143a; --muted:#5f6780; --line:#e5e8f0; --soft:#f7f8fc;
}
*{box-sizing:border-box} body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:#fff}
a{text-decoration:none;color:inherit}.topbar{height:92px;background:linear-gradient(90deg,#06133e,#0a1a4f);color:#fff;display:flex;align-items:center;padding:0 5.2vw;gap:32px;position:sticky;top:0;z-index:10;box-shadow:0 4px 20px #06133e18}
.brand{display:flex;align-items:center;gap:10px;min-width:270px}.brand-mark{font-size:52px;font-weight:900;line-height:1;background:linear-gradient(145deg,#4d8cff,#8c44ef 55%,#ff4d9c);-webkit-background-clip:text;color:transparent}
.brand b{font-size:26px}.brand b span{color:#7b52f6}.brand small{display:block;font-size:11px;margin-top:-2px}
.topbar nav{display:flex;gap:38px;margin-left:auto}.topbar nav a{font-weight:650;font-size:14px;padding:29px 0 25px;border-bottom:3px solid transparent}.topbar nav a.active{border-color:#3c8bff}
.ghost,.outline{border:1px solid #7655ff;background:transparent;color:#fff;border-radius:22px;padding:11px 20px;font-weight:700}.outline{color:#5b39df;background:#fff}
main{max-width:1180px;margin:auto}.hero{min-height:430px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:46px 48px;background:radial-gradient(circle at 70% 20%,#f0f3ff,transparent 42%),#fff}
.hero-copy h1,.pay-hero h1{font-size:48px;line-height:1.08;margin:0 0 18px}.hero-copy em,.pay-hero em{font-style:normal;color:#6752f6}.hero-copy p{font-size:17px;color:var(--muted);max-width:420px;margin-bottom:28px}
.primary{display:inline-block;background:linear-gradient(90deg,#6d3cf0,#3b8bfd);color:white;border:0;border-radius:8px;padding:14px 26px;font-weight:800}
.hero-art{height:300px;position:relative;display:flex;justify-content:center;align-items:center}.phone{width:165px;height:295px;border-radius:30px;background:#0b1234;padding:9px;transform:rotate(7deg);box-shadow:0 30px 60px #24306640}.phone-screen{height:100%;border-radius:23px;background:linear-gradient(150deg,#171b57,#5131cf);display:grid;place-items:center;font-size:72px;color:#72ffa9}.floating-card{position:absolute;right:28px;bottom:42px;background:#fff;padding:14px 18px;border-radius:14px;box-shadow:0 12px 30px #15245925;font-weight:700}
.trust{margin:-22px 24px 20px;background:linear-gradient(90deg,#08133f,#0a1c56);color:#fff;border-radius:12px;padding:22px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.trust div{display:flex;flex-direction:column;font-size:13px}.trust span{opacity:.78;font-size:12px;margin-top:4px}
.section{padding:36px 34px}.section h1,.section h2{text-align:center;margin:0;font-size:31px}.sub{text-align:center;color:var(--muted);margin:8px 0 28px}.grid-categories{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.category{min-height:154px;border:1px solid var(--line);border-radius:13px;padding:18px 15px;display:flex;flex-direction:column;gap:8px;transition:.2s;background:#fff}.category:hover{transform:translateY(-3px);box-shadow:0 10px 25px #24306613}.category b{font-size:15px}.category small{color:var(--muted);line-height:1.35}.icon{font-size:31px}.pink{color:#ff1e68}.blue{color:#2886ff}.yellow{color:#ffb20c}.green{color:#19ad52}.purple{color:#693eea}.teal{color:#09a996}.orange{color:#ff7c1d}
.branch{margin:0 34px 16px;background:#fff3f7;border-radius:12px;display:flex;align-items:center;gap:18px;padding:16px}.branch>span{font-size:30px;color:#6b45ee}.branch div{display:flex;flex-direction:column;flex:1}.branch small{color:var(--muted)}
.app-banner{margin:0 34px 22px;background:linear-gradient(90deg,#07133f,#1a1460);border-radius:12px;color:#fff;padding:24px 28px;display:flex;justify-content:space-between;align-items:center}.app-banner h3{font-size:28px;margin:0}.stores span{background:#020617;border:1px solid #ffffff30;padding:8px 14px;border-radius:7px;margin-right:8px}.mini-phones{font-size:74px}
.payments{padding:0 34px 28px}.payments>div{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}.payments span{border:1px solid var(--line);padding:10px 14px;border-radius:9px;font-weight:800;color:#273159}
footer{max-width:1180px;margin:auto;border-top:1px solid var(--line);min-height:84px;padding:26px 34px;display:flex;align-items:center;justify-content:space-between;color:#5f6780;font-size:13px}
.pay-page{max-width:1180px}.pay-hero{min-height:360px;display:grid;grid-template-columns:1.2fr .8fr;padding:54px 56px 30px;background:linear-gradient(100deg,#fff 0 55%,#eef2ff 100%)}.pay-hero h1{font-size:38px}.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}.choice{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;display:flex;align-items:center;gap:16px;box-shadow:0 8px 25px #17204c0b}.choice p{color:var(--muted);font-size:13px}.big-icon{font-size:46px;color:#ff1764}.person-card{display:grid;place-items:center}.person-illustration{font-size:150px;filter:drop-shadow(0 18px 24px #0c17421b)}.compact{padding-top:28px}.compact label,.search-block label{display:block;font-weight:700;margin-bottom:8px}.location-input,.search-block input{width:100%;border:1px solid #cfd5e1;border-radius:7px;padding:14px 16px;font-size:15px}.left-title{text-align:left!important;font-size:18px!important;margin:28px 0 14px!important}.shortcuts{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}.shortcuts a{text-align:center;font-size:12px}.shortcuts span{width:58px;height:58px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;font-size:26px}.barcode-card{margin-top:30px;background:#faf9ff;border-radius:14px;padding:28px;display:flex;justify-content:space-between;align-items:center}.barcode{font-family:monospace;font-size:25px;background:white;padding:24px;border-radius:10px;color:#7e8493;letter-spacing:2px}.benefits{margin-top:28px;background:#fbfbfe;border-radius:14px;padding:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.benefits div{display:flex;gap:12px;align-items:center}.benefits b{font-size:28px;color:#6244ee}.benefits span{font-size:13px}
.recharge-page{max-width:1180px;padding:28px 34px 0}.back{font-weight:700}.flow{padding:18px 0 40px}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:30px 0 48px}.steps div{text-align:center;position:relative}.steps div:not(:last-child):after{content:"";position:absolute;top:19px;left:58%;width:84%;height:2px;background:#e0e2e9}.steps b{width:40px;height:40px;border-radius:50%;border:2px solid #d7dbe4;display:grid;place-items:center;margin:auto;background:#fff;position:relative;z-index:2;color:#a5a9b3}.steps span{display:block;margin-top:10px;font-size:12px;color:#7a8091}.steps .active b{background:linear-gradient(135deg,#7045ef,#3387ff);color:#fff;border-color:transparent}.steps .active span{font-weight:800;color:var(--text)}.search-block{max-width:860px;margin:0 auto 34px}.provider-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.provider-grid button{height:100px;border:1px solid var(--line);background:#fff;border-radius:13px;cursor:pointer}.provider-grid button:hover{box-shadow:0 8px 20px #27315912}.logo{font-weight:900;font-size:19px}.claro{color:#fff;background:#ed1c24;border-radius:50%;width:58px;height:58px;display:inline-grid;place-items:center}.movistar{color:#1598dc;font-size:36px}.personal{color:#111}.tuenti{color:#5c2bd3}.directv{color:#0b91d0}.grid-categories.small{grid-template-columns:repeat(4,1fr)}.grid-categories.small .category{min-height:125px;align-items:center;text-align:center}
.empty{max-width:600px;margin:50px auto;text-align:center;background:#fafafe;border:1px solid var(--line);border-radius:16px;padding:50px;display:flex;flex-direction:column;gap:14px}
@media(max-width:800px){
 .topbar{height:auto;min-height:76px;padding:12px 18px;flex-wrap:wrap}.brand{min-width:0}.brand b{font-size:21px}.brand-mark{font-size:40px}.topbar nav{order:3;width:100%;overflow:auto;margin:0;gap:24px}.topbar nav a{padding:10px 0}.ghost{margin-left:auto}
 main{width:100%}.hero,.pay-hero{grid-template-columns:1fr;padding:34px 20px}.hero-copy h1,.pay-hero h1{font-size:36px}.hero-art{height:250px}.trust{grid-template-columns:1fr 1fr;margin:-5px 14px 16px}.section{padding:28px 16px}.grid-categories,.grid-categories.small{grid-template-columns:1fr 1fr}.branch,.app-banner{margin-left:16px;margin-right:16px}.app-banner{align-items:flex-start}.mini-phones{display:none}.payments{padding:0 16px 22px}.choice-row{grid-template-columns:1fr}.person-card{display:none}.shortcuts{grid-template-columns:repeat(3,1fr)}.barcode-card{flex-direction:column;align-items:flex-start;gap:20px}.benefits{grid-template-columns:1fr 1fr}.steps{overflow-x:auto;grid-template-columns:repeat(5,140px)}.provider-grid{grid-template-columns:1fr 1fr}.recharge-page{padding:22px 16px 0} footer{padding:20px 16px;gap:15px;flex-wrap:wrap}
}


/* ===== Renovación responsive del INDEX ===== */
html,body{max-width:100%;overflow-x:hidden}
img,svg{max-width:100%;height:auto}
.topbar{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.renewed-hero{
  max-width:none;
  width:100%;
  min-height:560px;
  border-radius:0;
  background:
    linear-gradient(90deg,rgba(3,11,47,.92) 0%,rgba(3,11,47,.62) 43%,rgba(11,13,75,.15) 72%),
    url("../img/hero-fixed.svg") center/cover no-repeat;
  color:#fff;
  padding:72px clamp(28px,6vw,92px);
  position:relative;
  overflow:hidden;
}
.renewed-hero .hero-copy h1{font-size:clamp(44px,5.5vw,78px);max-width:760px;color:#fff;letter-spacing:-2px}
.renewed-hero .hero-copy em{background:linear-gradient(90deg,#c94cff,#1fc3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.primary.xl{font-size:20px;padding:18px 30px;border-radius:10px;box-shadow:0 14px 35px rgba(74,76,255,.35)}
.primary.xl span{font-size:28px;margin-left:14px}
.device-stage{min-height:420px}
.modern-phone{width:210px;height:390px;border-radius:36px;padding:10px;box-shadow:0 35px 70px rgba(0,0,0,.35);background:#091137}
.modern-phone .phone-screen{background:linear-gradient(160deg,#17175d,#6235dc 78%);font-size:94px;color:#7dffa7}
.renewed-hero .floating-card{right:8%;bottom:23%;font-size:17px;padding:16px 22px}
.renewed-hero .floating-card span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:2px solid #24c76f;color:#24c76f;margin-right:6px}
.trust{position:relative;margin:-42px 3.8vw 26px;z-index:2;border:1px solid rgba(116,143,255,.2);box-shadow:0 18px 35px rgba(11,19,75,.18)}
.icon-circle{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:31px;background:#f5f7ff}
.category{align-items:flex-start;position:relative;min-height:210px;padding:24px 22px 54px}
.category .go{position:absolute;bottom:18px;left:22px;width:34px;height:34px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:900}
.pink-bg{background:#ff1e68}.blue-bg{background:#2077ff}.yellow-bg{background:#ffad00}.green-bg{background:#10af50}.purple-bg{background:#7b39f4}.teal-bg{background:#00a985}.orange-bg{background:#ff6d12}
.branch{background:linear-gradient(90deg,#fff2f8,#f3ecff)}
.renewed-app{
  min-height:245px;
  background:
    linear-gradient(90deg,rgba(4,14,59,.96),rgba(25,17,102,.68)),
    url("../img/app-fixed.svg") center/cover no-repeat;
  overflow:hidden;
}
.renewed-app h3{font-size:34px}
.payments span{background:#fff;min-height:48px;display:inline-flex;align-items:center}
footer{background:#07143f;color:#fff;border:0;max-width:none;padding-left:clamp(22px,6vw,90px);padding-right:clamp(22px,6vw,90px)}

@media (max-width: 980px){
  .topbar{gap:18px}.topbar nav{gap:22px}
  .renewed-hero{grid-template-columns:1fr 1fr;min-height:500px;padding:58px 30px}
  .modern-phone{width:175px;height:330px}.device-stage{min-height:330px}
  .grid-categories{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr);margin:-26px 20px 22px}
}
@media (max-width: 720px){
  .topbar{position:relative;align-items:center;padding-top:12px;padding-bottom:10px}
  .brand{min-width:0}.brand small{display:none}
  .topbar nav{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;order:3}
  .topbar nav a{text-align:center;font-size:12px;padding:9px 4px;line-height:1.15}
  .ghost{padding:9px 13px}
  .renewed-hero{
    grid-template-columns:1fr;
    min-height:780px;
    background:
      linear-gradient(180deg,rgba(3,11,47,.95) 0%,rgba(3,11,47,.78) 48%,rgba(9,14,75,.18) 100%),
      url("../img/hero-fixed.svg") center/cover no-repeat;
    padding:42px 20px 38px;
  }
  .renewed-hero .hero-copy{text-align:left}
  .renewed-hero .hero-copy h1{font-size:clamp(42px,12vw,58px);line-height:1.02;letter-spacing:-1.5px}
  .device-stage{min-height:360px;margin-top:8px}
  .modern-phone{width:170px;height:325px}
  .renewed-hero .floating-card{right:4%;bottom:18%;font-size:14px}
  .trust{grid-template-columns:1fr 1fr;margin:-16px 12px 20px;padding:18px 16px}
  .grid-categories{grid-template-columns:1fr 1fr;gap:12px}
  .category{min-height:190px;padding:18px 16px 50px}
  .icon-circle{width:54px;height:54px;font-size:26px}
  .branch{margin-left:16px;margin-right:16px;align-items:flex-start;flex-wrap:wrap}
  .branch .outline{margin-left:auto}
  .renewed-app{margin-left:16px;margin-right:16px;min-height:250px;background-position:center}
  .renewed-app h3{font-size:27px}
  .stores{display:flex;gap:8px;flex-wrap:wrap}.stores span{margin:0}
}
@media (max-width: 430px){
  .brand b{font-size:19px}.brand-mark{font-size:38px}.ghost{font-size:12px}
  .renewed-hero{min-height:740px}
  .grid-categories{grid-template-columns:1fr}
  .category{min-height:150px}
  .trust{grid-template-columns:1fr}
  .payments>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .payments span{justify-content:center;text-align:center}
}

/* V3 dark landing + parking */
body{background:radial-gradient(circle at 15% 35%,rgba(86,28,218,.16),transparent 30%),radial-gradient(circle at 85% 60%,rgba(0,118,255,.12),transparent 32%),#f8f9ff}
body>main{position:relative}
.renewed-hero{max-width:1180px;margin:auto}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.secondary-xl{display:inline-flex;align-items:center;gap:18px;border:1px solid #c955ff;color:#fff;padding:17px 34px;border-radius:10px;font-size:20px;font-weight:800;background:rgba(18,18,74,.45);backdrop-filter:blur(8px)}
.promo-cashback{margin:20px 34px 14px;border:1px solid #7140ef;border-radius:16px;background:linear-gradient(105deg,#34116d,#191061 55%,#07194f);color:#fff;display:grid;grid-template-columns:150px 1fr 110px;align-items:center;gap:20px;padding:22px 30px;overflow:hidden;box-shadow:0 18px 45px rgba(38,17,112,.18)}
.promo-emoji{font-size:76px;text-align:center}.promo-copy h3{font-size:28px;margin:0 0 6px}.promo-copy p{font-size:21px;margin:0 0 4px}.promo-copy strong{color:#54f2a0;font-size:32px}.promo-copy small{opacity:.8}.promo-percent{font-size:80px;color:#9d68ff;font-weight:900;text-align:center}
.dark-branch{background:linear-gradient(90deg,#07153f,#10174f);color:#fff;border:1px solid #243a78}.dark-branch small{color:#cbd4f3}
.dark-page{background:radial-gradient(circle at 12% 20%,rgba(111,46,245,.22),transparent 32%),radial-gradient(circle at 90% 50%,rgba(0,125,255,.16),transparent 35%),#050d2b;color:#fff;min-height:100vh}
.parking-main{max-width:1180px;padding:34px 24px 70px}.back.light{color:#dce5ff;display:inline-block;margin-bottom:24px}.parking-shell,.checkout-shell{border:1px solid #293c7a;background:linear-gradient(145deg,rgba(12,26,79,.94),rgba(22,14,74,.94));border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.25);padding:34px}.parking-head{display:flex;gap:18px;align-items:center;margin-bottom:30px}.parking-head h1,.checkout-shell h1{font-size:34px;margin:0 0 7px}.parking-head p,.muted-light{color:#bdc8eb;margin:0}.parking-symbol{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#8a36ff,#198cff);font-size:38px;font-weight:900}
.parking-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field label{display:block;font-weight:750;margin-bottom:8px}.field input,.field select{width:100%;min-height:52px;border:1px solid #344a89;border-radius:11px;background:#08163f;color:#fff;padding:0 15px;font-size:16px;outline:none}.field input:focus,.field select:focus{border-color:#7d5cff;box-shadow:0 0 0 3px rgba(125,92,255,.15)}.field.full,.full{grid-column:1/-1}.hours{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.hours button{min-height:54px;border:1px solid #40528c;border-radius:12px;background:#091841;color:#fff;font-weight:800;cursor:pointer}.hours button.selected{background:linear-gradient(135deg,#713df3,#2389ff);border-color:transparent;box-shadow:0 8px 25px rgba(67,84,255,.3)}.parking-note{padding:15px 17px;border-radius:12px;background:rgba(88,70,218,.16);color:#dce4ff}.parking-submit{width:100%;font-size:17px;cursor:pointer}
.checkout-shell{display:grid;grid-template-columns:1.5fr .75fr;gap:30px}.eyebrow{font-size:12px;letter-spacing:2px;color:#7cc7ff;font-weight:900}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}.summary-grid div{background:#08163f;border:1px solid #263b78;border-radius:12px;padding:15px}.summary-grid span{display:block;color:#9facd3;font-size:12px;margin-bottom:5px}.checkout-card{background:#fff;color:#0a153c;border-radius:18px;padding:24px}.summary-line{display:flex;justify-content:space-between;margin:18px 0}.checkout-card hr{border:0;border-top:1px solid #e5e8f1}.tiny{font-size:12px;color:#69718b;line-height:1.45}
@media(max-width:720px){.promo-cashback{grid-template-columns:70px 1fr;margin:14px 16px;padding:18px}.promo-emoji{font-size:48px}.promo-percent{display:none}.promo-copy h3{font-size:21px}.promo-copy p{font-size:16px}.promo-copy strong{font-size:24px}.parking-form,.checkout-shell{grid-template-columns:1fr}.field.full,.full{grid-column:auto}.hours{grid-template-columns:repeat(3,1fr)}.summary-grid{grid-template-columns:1fr}.parking-shell,.checkout-shell{padding:22px 16px}.parking-head h1,.checkout-shell h1{font-size:28px}}


/* ===== HOTFIX INDEX v3: coincide con el diseño aprobado ===== */
body{
  background:
    radial-gradient(circle at 12% 18%, rgba(123,55,255,.28), transparent 26%),
    radial-gradient(circle at 86% 24%, rgba(0,153,255,.20), transparent 28%),
    radial-gradient(circle at 50% 78%, rgba(87,26,210,.22), transparent 34%),
    linear-gradient(180deg,#050b2a 0%,#081447 48%,#09123b 100%);
  background-attachment:fixed;
}
body > main{
  max-width:none;
}
.topbar{
  max-width:none;
  width:100%;
  background:rgba(4,11,40,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(103,85,255,.15);
}
.topbar .ghost{display:none!important;}
.renewed-hero{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  min-height:600px;
  padding-left:clamp(40px,10vw,200px);
  padding-right:clamp(40px,10vw,200px);
  border-radius:0!important;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
.renewed-hero .hero-copy{
  align-self:center;
}
.hero-actions{
  display:flex!important;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.secondary-xl{
  min-width:185px;
  justify-content:center;
  transition:.2s ease;
}
.secondary-xl:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(192,55,255,.22);
}
.trust{
  max-width:1180px;
  margin:-46px auto 24px;
}
.section{
  max-width:1180px;
  margin:0 auto;
  color:#fff;
}
.section .sub{color:#c9d1ef}
.category{
  color:#09143a;
  background:rgba(255,255,255,.97);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.promo-cashback,.dark-branch{
  max-width:1112px;
  margin-left:auto;
  margin-right:auto;
}
footer{
  background:#040b28!important;
}
@media(max-width:980px){
  .renewed-hero{
    padding-left:32px;
    padding-right:32px;
  }
}
@media(max-width:720px){
  body{background-attachment:scroll}
  .renewed-hero{
    min-height:780px;
    padding-left:20px;
    padding-right:20px;
  }
  .trust{margin:-20px 12px 20px}
  .section{padding-left:16px;padding-right:16px}
}


/* ===== FINAL INDEX ===== */
.final-index{
  min-height:100vh;
  color:#fff;
  background:
    radial-gradient(circle at 10% 18%,rgba(119,35,244,.28),transparent 28%),
    radial-gradient(circle at 90% 30%,rgba(0,130,255,.18),transparent 30%),
    linear-gradient(180deg,#040a24 0%,#07133d 58%,#060d2e 100%);
}
.final-index main{max-width:none}
.final-topbar{
  position:relative;
  min-height:104px;
  padding:14px 5vw;
  background:#040a24;
  border-bottom:1px solid rgba(94,91,255,.12);
}
.top-actions{
  display:flex!important;
  gap:20px!important;
  align-items:center;
  margin-left:auto!important;
}
.top-actions .nav-pill{
  min-width:170px;
  padding:14px 18px!important;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.15)!important;
  background:rgba(8,18,55,.82);
  text-align:center;
  font-weight:800;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  transition:.2s ease;
  border-bottom-width:2px!important;
}
.top-actions .nav-pill:hover{transform:translateY(-2px)}
.nav-pink{border-color:#be4cff!important;box-shadow:0 0 0 1px rgba(190,76,255,.15),0 12px 26px rgba(145,36,255,.15)!important}
.nav-blue{border-color:#188bff!important;box-shadow:0 0 0 1px rgba(24,139,255,.15),0 12px 26px rgba(24,139,255,.13)!important}
.nav-green{border-color:#21c778!important;box-shadow:0 0 0 1px rgba(33,199,120,.15),0 12px 26px rgba(33,199,120,.11)!important}
.nav-ico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;margin-right:7px;border:1px solid currentColor}
.final-hero{
  max-width:none!important;
  min-height:620px!important;
  width:100%!important;
  margin:0!important;
  padding:56px clamp(28px,8vw,160px)!important;
  background:
    linear-gradient(90deg,rgba(3,9,35,.92),rgba(7,13,61,.58) 46%,rgba(6,10,49,.12)),
    url("../img/hero-fixed.svg") center/cover no-repeat!important;
}
.final-hero .hero-copy h1{max-width:720px;font-size:clamp(48px,5.3vw,78px)!important;line-height:1.03}
.success-card{display:flex!important;align-items:center;gap:13px!important;padding:16px 21px!important;font-size:17px!important}
.success-box{
  width:44px!important;height:44px!important;border:2px solid #16b85b!important;
  border-radius:6px!important;display:grid!important;place-items:center!important;
  color:#16b85b!important;font-size:28px!important;margin:0!important
}
.final-trust{max-width:1140px;margin:-48px auto 26px!important}
.final-categories{max-width:1140px;margin:0 auto;padding-top:32px!important}
.mobile-stack-categories{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stack-btn{
  min-height:94px;
  border:1px solid #24396e;
  border-radius:14px;
  padding:14px 18px;
  display:grid;
  grid-template-columns:64px 1fr 38px;
  align-items:center;
  gap:14px;
  background:linear-gradient(90deg,rgba(9,25,66,.98),rgba(10,28,69,.9));
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
.stack-btn:hover{transform:translateY(-2px);border-color:#4f6cc8}
.stack-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:#101d4c}
.stack-copy{display:flex;flex-direction:column;gap:4px}
.stack-copy b{font-size:16px}
.stack-copy small{color:#cad3ef;font-size:13px;line-height:1.35}
.stack-go{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:900}
.final-promo{
  max-width:1140px;
  margin:22px auto 34px!important;
  min-height:150px;
  border-radius:18px;
  background:
    radial-gradient(circle at 10% 50%,rgba(190,51,255,.25),transparent 22%),
    linear-gradient(100deg,#331172,#1c105f 54%,#07174e)!important;
  border:1px solid #713fff;
  grid-template-columns:180px 1fr 120px!important;
}
.promo-wallet{position:relative;text-align:center}
.wallet{font-size:76px;filter:drop-shadow(0 15px 22px rgba(0,0,0,.25))}
.coin{position:absolute;left:90px;bottom:0;font-size:42px}
.final-promo .promo-copy h3{font-size:30px}
.final-promo .promo-copy p{font-size:22px}
.final-promo .promo-copy strong{display:inline-flex;gap:10px;align-items:center;color:#53f3a0;font-size:36px}
.final-promo .promo-copy strong span{font-size:14px;background:#53f3a0;color:#07253b;padding:7px 10px;border-radius:20px}
.final-footer{max-width:none!important;background:#030820!important;color:#fff!important;padding-left:5vw!important;padding-right:5vw!important}
.final-footer b span{color:#7a4cf4}

@media(max-width:900px){
  .final-topbar{padding:12px 18px}
  .top-actions{width:100%;order:3;display:grid!important;grid-template-columns:1fr 1fr 1fr}
  .top-actions .nav-pill{min-width:0}
  .final-hero{padding:42px 24px!important}
  .mobile-stack-categories{grid-template-columns:1fr}
}

@media(max-width:720px){
  .final-topbar{gap:12px}
  .brand{width:100%;justify-content:center}
  .top-actions{grid-template-columns:1fr;gap:9px!important}
  .top-actions .nav-pill{padding:12px 14px!important}
  .final-hero{
    min-height:760px!important;
    grid-template-columns:1fr!important;
    padding:34px 18px 28px!important;
  }
  .final-hero .hero-copy h1{font-size:clamp(42px,12vw,57px)!important;letter-spacing:-1px}
  .hero-actions{gap:10px!important}
  .primary.xl,.secondary-xl{flex:1;min-width:0;font-size:16px!important;padding:15px 16px!important}
  .device-stage{min-height:330px!important}
  .modern-phone{width:160px!important;height:306px!important}
  .success-card{right:1%!important;bottom:16%!important;font-size:14px!important;padding:12px 14px!important}
  .success-box{width:36px!important;height:36px!important;font-size:23px!important}
  .final-trust{grid-template-columns:1fr 1fr!important;margin:-14px 12px 18px!important;padding:16px!important}
  .final-categories{padding:24px 14px!important}
  .mobile-stack-categories{gap:10px}
  .stack-btn{grid-template-columns:54px 1fr 34px;min-height:86px;padding:12px 14px}
  .stack-icon{width:46px;height:46px;font-size:24px}
  .stack-copy b{font-size:15px}.stack-copy small{font-size:12px}
  .final-promo{
    grid-template-columns:84px 1fr!important;
    margin:14px 14px 24px!important;
    padding:16px!important;
    min-height:130px;
  }
  .promo-wallet .wallet{font-size:52px}.promo-wallet .coin{font-size:28px;left:47px}
  .final-promo .promo-percent{display:none}
  .final-promo .promo-copy h3{font-size:21px}
  .final-promo .promo-copy p{font-size:16px}
  .final-promo .promo-copy strong{font-size:27px;display:flex;flex-wrap:wrap}
  .final-promo .promo-copy strong span{font-size:11px;padding:5px 8px}
  .final-footer{gap:12px;justify-content:center!important;text-align:center}
}

@media(max-width:430px){
  .final-trust{grid-template-columns:1fr!important}
  .stack-btn{grid-template-columns:50px 1fr 30px}
}


/* ===== MOCKUP-ACCURATE INDEX ===== */
.mock-index{
  margin:0;
  min-height:100vh;
  color:#fff;
  background:
    radial-gradient(circle at 5% 25%,rgba(119,38,255,.2),transparent 22%),
    radial-gradient(circle at 92% 25%,rgba(22,106,255,.18),transparent 24%),
    linear-gradient(180deg,#040a22 0%,#07133b 60%,#050c29 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.mock-topbar{
  min-height:104px;
  padding:14px clamp(24px,5.2vw,86px);
  display:flex;
  align-items:center;
  gap:28px;
  background:#03091f;
  border-bottom:1px solid rgba(111,81,255,.12);
}
.mock-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.mock-brand-mark{
  font-size:58px;font-weight:950;line-height:1;
  background:linear-gradient(145deg,#3d9cff,#7d43ff 55%,#ee44ca);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.mock-brand-copy strong{display:block;font-size:31px;line-height:1}
.mock-brand-copy strong span{color:#8a4bf5}
.mock-brand-copy small{font-size:12px;opacity:.9}
.mock-nav{margin-left:auto;display:flex;gap:18px}
.mock-nav-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 24px;border-radius:13px;
  color:#fff;text-decoration:none;font-weight:800;font-size:15px;
  background:linear-gradient(180deg,rgba(10,20,59,.98),rgba(8,18,52,.98));
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.mock-nav-btn span{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;border:1px solid currentColor}
.mock-nav-btn.pink{border:1px solid #bc54ff;box-shadow:0 0 0 1px rgba(188,84,255,.1),0 0 20px rgba(188,84,255,.12)}
.mock-nav-btn.blue{border:1px solid #1d8cff;box-shadow:0 0 0 1px rgba(29,140,255,.1),0 0 20px rgba(29,140,255,.10)}
.mock-nav-btn.green{border:1px solid #27cb83;box-shadow:0 0 0 1px rgba(39,203,131,.1),0 0 20px rgba(39,203,131,.09)}

.mock-main{max-width:none!important}
.mock-hero{
  min-height:560px;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  padding:38px clamp(34px,9vw,168px) 56px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 72% 42%,rgba(90,31,217,.38),transparent 20%),
    radial-gradient(circle at 86% 56%,rgba(0,111,255,.28),transparent 17%),
    linear-gradient(90deg,rgba(4,10,37,.99),rgba(7,20,74,.87) 48%,rgba(37,22,126,.9)),
    url("../img/hero-fixed.svg") center/cover no-repeat;
}
.mock-hero:before{
  content:"";position:absolute;inset:auto -80px 70px -80px;height:180px;
  border-radius:50%;border-top:1px solid rgba(48,137,255,.25);transform:rotate(-5deg)
}
.mock-copy{position:relative;z-index:2}
.mock-copy h1{font-size:clamp(52px,5.4vw,82px);line-height:1.02;letter-spacing:-2px;margin:0 0 30px;max-width:760px}
.mock-copy h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#c046ff,#18b8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.mock-hero-actions{display:flex;gap:18px;flex-wrap:wrap}
.mock-primary,.mock-secondary{
  min-width:210px;height:58px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:24px;
  color:#fff;text-decoration:none;font-size:18px;font-weight:850
}
.mock-primary{background:linear-gradient(90deg,#8136f7,#12a5ff);box-shadow:0 16px 34px rgba(49,95,255,.28)}
.mock-secondary{border:1px solid #df51ff;background:rgba(9,14,55,.62);box-shadow:0 16px 30px rgba(124,43,217,.16)}
.mock-primary b,.mock-secondary b{font-size:26px}
.mock-device-wrap{position:relative;min-height:430px;display:grid;place-items:center}
.mock-halo{
  position:absolute;width:360px;height:360px;border-radius:50%;
  border:2px solid rgba(42,159,255,.65);
  box-shadow:0 0 45px rgba(0,118,255,.34),inset 0 0 45px rgba(171,43,255,.18)
}
.mock-halo:after{
  content:"";position:absolute;inset:18px;border-radius:50%;border:2px solid rgba(215,50,255,.55)
}
.mock-phone{
  width:190px;height:360px;border-radius:34px;padding:10px;background:#070d2d;
  transform:rotate(8deg);box-shadow:0 34px 65px rgba(0,0,0,.42);position:relative;z-index:2
}
.mock-phone-screen{
  width:100%;height:100%;border-radius:27px;display:grid;place-items:center;
  background:linear-gradient(160deg,#13176a 0%,#512ad6 68%,#791fe6 100%)
}
.mock-phone-screen span{
  width:110px;height:110px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:72px;border:4px solid #28beff;
  box-shadow:0 0 28px rgba(30,180,255,.75),inset 0 0 20px rgba(208,44,255,.45)
}
.mock-success{
  position:absolute;z-index:4;right:8%;bottom:20%;
  display:flex;align-items:center;gap:14px;background:#fff;color:#09143a;
  border-radius:14px;padding:16px 22px;box-shadow:0 16px 38px rgba(0,0,0,.28);font-size:18px
}
.mock-success-box{width:46px;height:46px;border:2px solid #19b963;border-radius:6px;display:grid;place-items:center;color:#19b963;font-size:29px}

.mock-benefits{
  max-width:1140px;margin:-42px auto 20px;position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid #27417c;border-radius:15px;background:rgba(4,17,57,.95);box-shadow:0 18px 40px rgba(0,0,0,.2)
}
.mock-benefits>div{display:flex;align-items:center;gap:15px;padding:20px 24px;position:relative}
.mock-benefits>div:not(:last-child):after{content:"";position:absolute;right:0;top:20%;height:60%;width:1px;background:#263a70}
.mock-benefits i{font-style:normal;font-size:38px}
.mock-benefits .violet{color:#904cff}.mock-benefits .blue{color:#1c89ff}.mock-benefits .cyan{color:#20d4d8}.mock-benefits .pink{color:#ff4d9f}
.mock-benefits span{display:flex;flex-direction:column;gap:4px}.mock-benefits b{font-size:15px}.mock-benefits small{font-size:12px;color:#c7d0ee}

.mock-categories{max-width:1140px;margin:0 auto;padding:8px 0 0}
.mock-categories h2{text-align:center;font-size:34px;margin:0 0 3px}
.mock-categories>p{text-align:center;color:#cbd3ee;margin:0 0 20px}
.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mock-cat{
  min-height:96px;border:1px solid #32477c;border-radius:14px;padding:13px 16px;
  display:grid;grid-template-columns:56px 1fr 34px;align-items:center;gap:12px;
  color:#fff;text-decoration:none;background:linear-gradient(90deg,rgba(9,24,66,.98),rgba(8,22,61,.94));
  box-shadow:0 9px 25px rgba(0,0,0,.12)
}
.mock-cat b{display:block;font-size:15px;margin-bottom:4px}.mock-cat small{display:block;color:#cbd4ef;font-size:12px;line-height:1.35}
.mock-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:25px;background:#122353}
.mock-icon.pink{background:#f41c72}.mock-icon.blue{background:#177cf1}.mock-icon.yellow{background:#ffad00}.mock-icon.green{background:#12a84f}.mock-icon.violet{background:#7137ec}
.mock-arrow{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900}
.mock-arrow.pink{background:#f41c72}.mock-arrow.blue{background:#177cf1}.mock-arrow.yellow{background:#ffad00}.mock-arrow.green{background:#12a84f}.mock-arrow.violet{background:#7137ec}

.mock-promo{
  max-width:1140px;margin:20px auto 30px;min-height:150px;border:1px solid #7541ff;border-radius:16px;
  display:grid;grid-template-columns:190px 1fr 120px;align-items:center;gap:20px;padding:18px 28px;
  background:
    radial-gradient(circle at 12% 50%,rgba(186,35,255,.28),transparent 20%),
    linear-gradient(95deg,#311071,#1d105e 55%,#081a50);
  box-shadow:0 20px 42px rgba(0,0,0,.16)
}
.mock-wallet{position:relative;font-size:80px;text-align:center;filter:drop-shadow(0 14px 20px rgba(0,0,0,.26))}
.mock-wallet span{position:absolute;font-size:40px;right:30px;bottom:6px}
.mock-promo-copy h3{font-size:30px;margin:0 0 8px}.mock-promo-copy p{font-size:21px;margin:0 0 5px}
.mock-promo-copy strong{color:#51f29e;font-size:36px}.mock-promo-copy strong em{font-style:normal;font-size:13px;background:#51f29e;color:#06263c;padding:7px 10px;border-radius:18px;margin-left:8px}
.mock-promo-copy small{color:#d4daf0}.mock-percent{font-size:82px;font-weight:900;color:#9d67ff;text-align:center}

.mock-footer{
  min-height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(28px,5vw,80px);
  background:#02071b;color:#fff;font-size:13px
}
.mock-footer b{font-size:17px}.mock-footer b span{color:#8050ef}.mock-footer a{color:#fff;text-decoration:none}

@media(max-width:1020px){
  .mock-nav{gap:10px}.mock-nav-btn{padding:0 16px;font-size:13px}
  .mock-hero{padding-left:32px;padding-right:32px}
  .mock-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .mock-topbar{padding:13px 14px;flex-wrap:wrap}
  .mock-brand{width:100%;justify-content:center}
  .mock-brand-mark{font-size:48px}.mock-brand-copy strong{font-size:25px}
  .mock-nav{width:100%;display:grid;grid-template-columns:1fr;margin:0}
  .mock-nav-btn{min-height:48px}
  .mock-hero{
    min-height:820px;grid-template-columns:1fr;padding:32px 18px 38px;text-align:left
  }
  .mock-copy h1{font-size:clamp(44px,12vw,58px);letter-spacing:-1px}
  .mock-hero-actions{gap:10px}.mock-primary,.mock-secondary{min-width:0;flex:1;height:54px;font-size:16px}
  .mock-device-wrap{min-height:350px}
  .mock-phone{width:160px;height:308px}
  .mock-halo{width:280px;height:280px}
  .mock-phone-screen span{width:90px;height:90px;font-size:58px}
  .mock-success{right:1%;bottom:18%;font-size:14px;padding:12px 14px}.mock-success-box{width:38px;height:38px;font-size:24px}
  .mock-benefits{grid-template-columns:1fr 1fr;margin:-12px 12px 18px}
  .mock-benefits>div{padding:16px 14px}.mock-benefits>div:nth-child(2):after{display:none}
  .mock-categories{padding:0 14px}.mock-grid{grid-template-columns:1fr;gap:10px}
  .mock-cat{min-height:86px;grid-template-columns:50px 1fr 32px;padding:11px 13px}
  .mock-icon{width:44px;height:44px;font-size:22px}
  .mock-promo{grid-template-columns:76px 1fr;margin:16px 14px 24px;padding:15px}
  .mock-wallet{font-size:50px}.mock-wallet span{font-size:27px;right:1px}
  .mock-promo-copy h3{font-size:21px}.mock-promo-copy p{font-size:16px}.mock-promo-copy strong{font-size:28px}.mock-percent{display:none}
  .mock-footer{flex-wrap:wrap;justify-content:center;gap:14px;text-align:center;padding:22px 16px}
}
@media(max-width:430px){
  .mock-benefits{grid-template-columns:1fr}.mock-benefits>div:after{display:none!important}
  .mock-primary,.mock-secondary{width:100%;flex-basis:100%}
}


/* ===== APPROVED MOCKUP EXACT STYLE ===== */
.approved-index{
  margin:0;
  min-height:100vh;
  color:#fff;
  background:
    radial-gradient(circle at 4% 30%,rgba(115,30,255,.22),transparent 22%),
    radial-gradient(circle at 92% 40%,rgba(22,101,255,.18),transparent 25%),
    linear-gradient(180deg,#030820 0%,#06133a 58%,#050b27 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.approved-topbar{
  height:92px;padding:0 clamp(28px,5.5vw,90px);
  display:flex;align-items:center;gap:28px;background:#02071c;border-bottom:1px solid rgba(90,80,255,.12)
}
.approved-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.approved-brand-mark{
  font-size:56px;font-weight:950;line-height:1;
  background:linear-gradient(150deg,#29a8ff,#7e43ff 56%,#f03fd1);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.approved-brand strong{display:block;font-size:30px;line-height:1}
.approved-brand strong span{color:#8b4df4}
.approved-brand small{display:block;font-size:11px;margin-top:2px}
.approved-nav{margin-left:auto;display:flex;gap:18px}
.approved-nav-btn{
  min-height:50px;padding:0 22px;border-radius:12px;display:flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;background:#071233;font-size:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.22)
}
.approved-nav-icon{
  width:28px;height:28px;border-radius:7px;display:grid;place-items:center;border:1px solid currentColor
}
.approved-nav-icon svg{width:18px;height:18px}
.approved-nav-btn.nav-pink{color:#fff;border:1px solid #bd50ff;box-shadow:0 0 18px rgba(189,80,255,.12)}
.approved-nav-btn.nav-blue{color:#fff;border:1px solid #168bff;box-shadow:0 0 18px rgba(22,139,255,.1)}
.approved-nav-btn.nav-green{color:#fff;border:1px solid #24c878;box-shadow:0 0 18px rgba(36,200,120,.1)}
.approved-nav-btn.nav-pink .approved-nav-icon{color:#d65cff}
.approved-nav-btn.nav-blue .approved-nav-icon{color:#2e9bff}
.approved-nav-btn.nav-green .approved-nav-icon{color:#33d990}

.approved-main{max-width:none!important}
.approved-hero{
  min-height:520px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  padding:34px clamp(34px,10vw,170px) 48px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 70% 45%,rgba(77,30,213,.34),transparent 20%),
    radial-gradient(circle at 85% 53%,rgba(0,120,255,.25),transparent 18%),
    linear-gradient(90deg,rgba(4,10,37,.98),rgba(7,19,74,.88) 50%,rgba(38,20,125,.9)),
    url("../img/hero-fixed.svg") center/cover no-repeat
}
.approved-hero-copy h1{
  margin:0 0 28px;font-size:clamp(50px,5vw,74px);line-height:1.02;letter-spacing:-2px;max-width:700px
}
.approved-hero-copy h1 em{
  font-style:normal;background:linear-gradient(90deg,#c549ff,#1db8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.approved-hero-actions{display:flex;gap:18px;flex-wrap:wrap}
.approved-primary,.approved-secondary{
  min-width:210px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:24px;
  color:#fff;text-decoration:none;font-weight:850;font-size:17px
}
.approved-primary{background:linear-gradient(90deg,#7d35f7,#13a6ff);box-shadow:0 15px 34px rgba(52,89,255,.25)}
.approved-secondary{background:rgba(7,15,55,.7);border:1px solid #d74fff;box-shadow:0 14px 28px rgba(125,38,216,.14)}
.approved-secondary span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #db54ff;border-radius:50%;color:#db54ff}
.approved-secondary span svg{width:17px;height:17px}

.approved-phone-zone{min-height:390px;position:relative;display:grid;place-items:center}
.approved-ring{position:absolute;border-radius:50%}
.approved-ring-a{width:360px;height:360px;border:2px solid rgba(22,152,255,.7);box-shadow:0 0 35px rgba(22,152,255,.25)}
.approved-ring-b{width:310px;height:310px;border:2px solid rgba(218,43,255,.62);box-shadow:0 0 30px rgba(218,43,255,.2)}
.approved-phone{
  width:178px;height:340px;border-radius:32px;padding:9px;background:#060c2d;
  transform:rotate(8deg);position:relative;z-index:2;box-shadow:0 32px 62px rgba(0,0,0,.4)
}
.approved-screen{
  width:100%;height:100%;border-radius:25px;display:grid;place-items:center;
  background:linear-gradient(160deg,#111767,#4c2ed5 70%,#751ce4)
}
.approved-screen-check{
  width:105px;height:105px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:70px;
  border:4px solid #25bdff;box-shadow:0 0 28px rgba(37,189,255,.7),inset 0 0 22px rgba(211,45,255,.45)
}
.approved-success{
  position:absolute;right:5%;bottom:18%;z-index:4;display:flex;align-items:center;gap:14px;
  padding:16px 22px;border-radius:13px;background:#fff;color:#071337;font-size:17px;
  box-shadow:0 15px 36px rgba(0,0,0,.25)
}
.approved-success-icon{width:44px;height:44px;border:2px solid #1bbd63;border-radius:6px;display:grid;place-items:center;color:#1bbd63;font-size:28px}

.approved-benefits{
  max-width:1140px;margin:-40px auto 14px;position:relative;z-index:5;
  display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #294278;border-radius:14px;background:#06143f;
  box-shadow:0 16px 38px rgba(0,0,0,.18)
}
.approved-benefits>div{display:flex;align-items:center;gap:14px;padding:18px 22px;position:relative}
.approved-benefits>div:not(:last-child):after{content:"";position:absolute;right:0;top:22%;height:56%;width:1px;background:#2a3c6f}
.benefit-icon{width:42px;height:42px;display:grid;place-items:center}
.benefit-icon svg{width:36px;height:36px}
.benefit-icon.violet{color:#8d46ff}.benefit-icon.blue{color:#1b88ff}.benefit-icon.cyan{color:#1ed1d6}.benefit-icon.pink{color:#ff4e9f}
.approved-benefits span:last-child{display:flex;flex-direction:column;gap:4px}
.approved-benefits b{font-size:14px}.approved-benefits small{font-size:11px;color:#cad3ef}

.approved-categories{max-width:1140px;margin:0 auto;padding:8px 0 0}
.approved-categories h2{text-align:center;margin:0 0 2px;font-size:31px}
.approved-categories>p{text-align:center;margin:0 0 16px;color:#cbd4ef}
.approved-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.approved-cat{
  min-height:82px;border:1px solid #334778;border-radius:13px;padding:11px 14px;display:grid;
  grid-template-columns:52px 1fr 32px;align-items:center;gap:12px;text-decoration:none;color:#fff;
  background:linear-gradient(90deg,#091a4b,#091944)
}
.approved-cat b{display:block;font-size:14px;margin-bottom:3px}
.approved-cat small{display:block;color:#cad4ef;font-size:11px}
.cat-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:23px}
.cat-icon svg{width:24px;height:24px}
.cat-icon.pink{background:#f01b71}.cat-icon.blue{background:#197cf0}.cat-icon.yellow{background:#ffae00}.cat-icon.green{background:#12aa4f}.cat-icon.violet{background:#7138ed}
.cat-go{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900}
.cat-go.pink{background:#f01b71}.cat-go.blue{background:#197cf0}.cat-go.yellow{background:#ffae00}.cat-go.green{background:#12aa4f}.cat-go.violet{background:#7138ed}

.approved-promo{
  max-width:1140px;min-height:132px;margin:14px auto 28px;padding:16px 24px;border-radius:14px;
  display:grid;grid-template-columns:190px 1fr 120px;align-items:center;gap:22px;
  border:1px solid #7442ff;
  background:radial-gradient(circle at 13% 50%,rgba(193,37,255,.28),transparent 22%),linear-gradient(95deg,#30106f,#1c105d 55%,#07184c)
}
.promo-visual{display:grid;place-items:center}
.wallet-shape{position:relative;width:150px;height:100px}
.wallet-body{position:absolute;left:24px;top:38px;width:108px;height:63px;border-radius:15px;background:linear-gradient(145deg,#7b38ee,#4620ad);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.card{position:absolute;width:34px;height:52px;border-radius:7px;top:3px}
.card.c1{left:40px;background:#ff7f50;transform:rotate(-12deg)}
.card.c2{left:72px;background:#48b5ff;transform:rotate(2deg)}
.card.c3{left:102px;background:#ef55cf;transform:rotate(13deg)}
.wallet-coin{position:absolute;right:5px;bottom:0;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#f9a61a;color:#fff;font-size:25px;font-weight:900;border:5px solid #ffc747;box-shadow:0 7px 16px rgba(0,0,0,.18)}
.approved-promo-copy h3{font-size:28px;margin:0 0 6px}
.approved-promo-copy p{font-size:19px;margin:0 0 4px}
.approved-promo-copy strong{font-size:34px;color:#51f29f}
.approved-promo-copy em{font-style:normal;font-weight:900;font-size:12px;background:#51f29f;color:#06253c;padding:6px 10px;border-radius:18px;margin-left:8px}
.approved-promo-copy small{color:#d5daf0}
.percent-badge{font-size:76px;font-weight:900;color:#9b65ff;text-align:center;text-shadow:0 0 20px rgba(155,101,255,.25)}

.approved-footer{
  min-height:76px;background:#02071a;color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(28px,5vw,80px);font-size:12px
}
.approved-footer b{font-size:16px}.approved-footer b span{color:#8350ee}.approved-footer a{color:#fff;text-decoration:none}

@media(max-width:900px){
  .approved-topbar{padding:12px 18px;height:auto;min-height:92px;flex-wrap:wrap}
  .approved-brand{width:100%;justify-content:center}
  .approved-nav{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
  .approved-nav-btn{padding:0 10px;font-size:12px}
  .approved-hero{padding-left:28px;padding-right:28px}
}
@media(max-width:720px){
  .approved-nav{grid-template-columns:1fr}
  .approved-hero{min-height:780px;grid-template-columns:1fr;padding:30px 18px}
  .approved-hero-copy h1{font-size:clamp(44px,12vw,58px);letter-spacing:-1px}
  .approved-hero-actions{gap:10px}.approved-primary,.approved-secondary{min-width:0;flex:1;height:52px;font-size:15px}
  .approved-phone-zone{min-height:330px}.approved-phone{width:154px;height:296px}.approved-ring-a{width:270px;height:270px}.approved-ring-b{width:232px;height:232px}
  .approved-screen-check{width:86px;height:86px;font-size:56px}
  .approved-success{right:1%;bottom:18%;font-size:13px;padding:11px 13px}.approved-success-icon{width:36px;height:36px;font-size:23px}
  .approved-benefits{grid-template-columns:1fr 1fr;margin:-10px 12px 15px}
  .approved-benefits>div{padding:14px 12px}.approved-benefits>div:nth-child(2):after{display:none}
  .approved-categories{padding:0 13px}.approved-grid{grid-template-columns:1fr}
  .approved-cat{min-height:78px}
  .approved-promo{grid-template-columns:78px 1fr;margin:14px 13px 24px;padding:14px}
  .wallet-shape{transform:scale(.65);transform-origin:center}.percent-badge{display:none}
  .approved-promo-copy h3{font-size:20px}.approved-promo-copy p{font-size:15px}.approved-promo-copy strong{font-size:26px}
  .approved-footer{flex-wrap:wrap;gap:12px;justify-content:center;text-align:center;padding:20px 14px}
}
@media(max-width:430px){
  .approved-benefits{grid-template-columns:1fr}.approved-benefits>div:after{display:none!important}
  .approved-primary,.approved-secondary{width:100%;flex-basis:100%}
}


/* ===== ICONOS DE SERVICIOS ACTUALIZADOS ===== */
.approved-cat .cat-icon{
  color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.09);
}
.approved-cat .cat-icon svg{
  width:27px;
  height:27px;
  display:block;
}
.approved-cat .cat-icon.pink{
  background:linear-gradient(145deg,#ff297d,#e60067);
  box-shadow:0 0 18px rgba(255,41,125,.18);
}
.approved-cat .cat-icon.blue{
  background:linear-gradient(145deg,#2496ff,#1266e8);
  box-shadow:0 0 18px rgba(36,150,255,.16);
}
.approved-cat .cat-icon.yellow{
  background:linear-gradient(145deg,#ffc21a,#ff9300);
  box-shadow:0 0 18px rgba(255,174,0,.14);
}
.approved-cat .cat-icon.green{
  background:linear-gradient(145deg,#20c969,#079341);
  box-shadow:0 0 18px rgba(32,201,105,.14);
}
.approved-cat .cat-icon.violet{
  background:linear-gradient(145deg,#8947ff,#6229db);
  box-shadow:0 0 18px rgba(137,71,255,.16);
}


/* ===== Flechas visibles en botones circulares ===== */
.approved-cat .cat-go{
  color:#fff !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:900 !important;
  display:grid !important;
  place-items:center !important;
  text-indent:0 !important;
}


/* ===== PAGOS DE SERVICIOS + BUSCADOR DESPLEGABLE ===== */
.service-pay-page{
  margin:0;color:#fff;min-height:100vh;
  background:
    radial-gradient(circle at 76% 15%,rgba(84,22,208,.3),transparent 24%),
    radial-gradient(circle at 92% 60%,rgba(0,112,255,.15),transparent 30%),
    linear-gradient(180deg,#030820,#071541 68%,#040a25);
}
.service-topbar{
  min-height:86px;padding:0 clamp(24px,5vw,78px);display:flex;align-items:center;
  background:#02071c;border-bottom:1px solid rgba(108,76,255,.13)
}
.service-nav{margin-left:auto;display:flex;gap:28px;align-items:center}
.service-nav a{color:#fff;text-decoration:none;font-weight:750;font-size:14px}
.service-nav-active{padding:13px 20px;border-radius:9px;background:linear-gradient(90deg,#713bf2,#288cff);box-shadow:0 0 24px rgba(91,62,255,.32)}
.service-main{max-width:1160px!important;margin:auto;padding-bottom:30px}
.service-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:25px;align-items:center;padding:42px 34px 20px}
.service-copy h1{font-size:48px;line-height:1.03;margin:0 0 12px}.service-copy h1 em{font-style:normal;color:#8148f6}.service-copy>p{font-size:19px;color:#d3d9ed;margin:0 0 25px}
.service-choice-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.service-choice{min-height:112px;border:1px solid #324878;border-radius:13px;padding:15px;display:grid;grid-template-columns:52px 1fr 22px;gap:12px;align-items:center;color:#fff;background:#081847}
.service-choice-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:24px}.service-choice-icon.pink{background:#f01b70}.service-choice-icon.blue{background:#1684f4}.service-choice span:nth-child(2){display:flex;flex-direction:column;gap:4px}.service-choice small{font-size:11px;color:#cbd4ed;line-height:1.4}.service-choice i{font-style:normal;font-size:25px}
.service-visual{min-height:330px;position:relative;display:grid;place-items:center}.service-orb{position:absolute;width:285px;height:285px;border-radius:50%;background:radial-gradient(circle,#5123c9 0,#251276 55%,transparent 70%)}.service-person{position:relative;z-index:2;font-size:145px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.25))}
.float-card,.float-wifi,.float-bill,.float-ok{position:absolute;z-index:3;font-size:34px}.float-card{left:17%;top:51%;transform:rotate(-13deg)}.float-wifi{left:27%;top:18%;color:#55bfff}.float-bill{right:22%;top:12%;font-size:54px;color:#eee8ff}.float-ok{right:16%;bottom:24%;width:52px;height:52px;border-radius:12px;background:#fff;color:#27cd73;display:grid;place-items:center}
.service-location,.service-search-box,.service-barcode,.service-benefits{margin:0 34px 18px;border:1px solid #283f74;border-radius:14px;background:rgba(7,24,66,.92)}
.service-location{padding:14px 20px;display:flex;gap:14px;align-items:center}.loc-icon{font-size:30px;color:#8c53f9}.service-location label{flex:1;color:#cbd4ef;font-size:12px}.service-location select{display:block;width:100%;margin-top:6px;background:#091a4b;color:#fff;border:1px solid #2b447c;border-radius:8px;padding:12px}
.service-search-box{padding:20px}.service-search-head h2{margin:0;font-size:20px}.service-search-head p{margin:4px 0 14px;color:#cbd4ed;font-size:13px}
.service-search-trigger{width:100%;min-height:50px;border:1px solid #354c82;border-radius:9px;background:#091a4b;color:#fff;padding:0 14px;display:grid;grid-template-columns:30px 1fr 24px;align-items:center;text-align:left;cursor:pointer}.service-search-trigger strong{font-weight:500;color:#bfc9e7}.service-search-trigger>b{text-align:right;font-size:20px}
.service-dropdown{margin-top:10px;padding:12px;border:1px solid #354c82;border-radius:11px;background:#07163f;box-shadow:0 20px 45px rgba(0,0,0,.3)}
.service-filter-wrap{display:grid;grid-template-columns:30px 1fr;align-items:center;border:1px solid #385082;border-radius:8px;background:#051237;padding:0 12px}.service-filter-wrap input{border:0;outline:0;background:transparent;color:#fff;padding:12px 0;font-size:14px}
.service-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;max-height:330px;overflow:auto;padding-right:4px}.service-list button{border:1px solid #2b4275;background:#091a4a;color:#fff;border-radius:10px;min-height:68px;display:grid;grid-template-columns:48px 1fr 24px;grid-template-rows:1fr 1fr;align-items:center;text-align:left;padding:8px 10px;cursor:pointer}.service-list button .provider-logo{grid-row:1/3;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#fff;color:#0a163e;font-weight:900}.service-list button b{font-size:14px}.service-list button small{color:#aeb9d8}.service-list button i{grid-column:3;grid-row:1/3;font-size:24px;font-style:normal}
.provider-logo.edenor,.mini-provider.edenor{color:#1184d8}.provider-logo.claro,.mini-provider.claro{color:#e51e28}.provider-logo.movistar,.mini-provider.movistar{color:#169ee4}.provider-logo.personal,.mini-provider.personal{color:#6739d8}.provider-logo.metrogas,.mini-provider.metrogas{color:#2a78c9}.provider-logo.aysa,.mini-provider.aysa{color:#1464d8}.provider-logo.cable,.mini-provider.cable{color:#ef343c}.provider-logo.edesur{color:#e2a300}.provider-logo.directv{color:#148bd0}.provider-logo.telecom{color:#1b6ca8}
.no-services{text-align:center;color:#aeb9d8;padding:12px}
.service-search-box>h3{margin:16px 0 10px;font-size:13px}.featured-services{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.featured-services button{border:0;background:transparent;color:#fff;cursor:pointer}.mini-provider{height:72px;border-radius:9px;background:#fff;display:grid;place-items:center;font-size:18px;font-weight:900;margin-bottom:6px;border:1px solid #dbe2f4}.featured-services b{font-size:11px}
.service-shortcuts{padding:0 34px 18px}.service-shortcuts h3{margin:0 0 14px}.service-shortcuts>div{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.service-shortcuts a,.service-shortcuts button{background:none;border:0;color:#fff;display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;cursor:pointer}.service-shortcuts span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;font-size:25px}.s-pink{color:#ff287b}.s-yellow{color:#ffbf18}.s-blue{color:#258fff}.s-green{color:#29c86e}.s-violet{color:#8b49fb}
.service-barcode{padding:22px;display:grid;grid-template-columns:1fr 30px 1fr;gap:20px;align-items:center}.service-barcode h3{margin:0 0 6px}.service-barcode p{color:#c9d3eb;font-size:12px}.scan-btn{margin-top:12px;border:0;border-radius:9px;padding:13px 18px;background:linear-gradient(90deg,#713bf2,#288cff);color:#fff;font-weight:800}.or-sep{text-align:center;color:#c4cceb}.fake-barcode{margin-top:15px;border:1px solid #304a80;border-radius:9px;padding:20px;background:#07163e;color:#9eacd0;font-family:monospace;letter-spacing:5px;text-align:center}
.service-benefits{padding:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.service-benefits>div{display:grid;grid-template-columns:42px 1fr;gap:2px 10px;align-items:center}.service-benefits span{grid-row:1/3;width:38px;height:38px;border-radius:50%;background:#102657;display:grid;place-items:center;color:#8d4cff}.service-benefits b{font-size:13px}.service-benefits small{color:#bfc9e7;font-size:11px}
@media(max-width:800px){
 .service-topbar{padding:12px 16px;flex-wrap:wrap}.service-nav{width:100%;justify-content:space-between;margin-top:10px;gap:8px}.service-nav a{font-size:12px}
 .service-hero{grid-template-columns:1fr;padding:28px 16px}.service-copy h1{font-size:40px}.service-visual{min-height:250px}.service-person{font-size:110px}
 .service-choice-row{grid-template-columns:1fr}.service-location,.service-search-box,.service-barcode,.service-benefits{margin-left:16px;margin-right:16px}
 .featured-services{grid-template-columns:repeat(4,1fr)}.service-list{grid-template-columns:1fr}.service-shortcuts{padding-left:16px;padding-right:16px}.service-shortcuts>div{grid-template-columns:repeat(3,1fr)}
 .service-barcode{grid-template-columns:1fr}.or-sep{display:none}.service-benefits{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
 .featured-services{grid-template-columns:repeat(2,1fr)}.service-shortcuts>div{grid-template-columns:repeat(2,1fr)}.service-benefits{grid-template-columns:1fr}
}


/* ===== HEADER GLOBAL FIJO + PAGOS MINIMAL ===== */
.approved-topbar{
  position:sticky !important;
  top:0 !important;
  z-index:999 !important;
  width:100% !important;
}
.service-pay-minimal{
  background:
    radial-gradient(circle at 74% 14%,rgba(85,23,213,.32),transparent 22%),
    linear-gradient(180deg,#030820 0%,#071541 72%,#040a25 100%) !important;
}
.minimal-main{
  max-width:1160px !important;
  margin:0 auto !important;
  padding:0 0 34px !important;
}
.minimal-hero{
  padding:44px 34px 22px !important;
  min-height:360px !important;
}
.minimal-hero .service-copy h1{
  font-size:46px !important;
}
.minimal-hero .service-copy>p{
  margin-bottom:0 !important;
}
.minimal-search{
  margin-top:6px !important;
  padding:18px !important;
}
.minimal-search .featured-services{
  grid-template-columns:repeat(5,1fr) !important;
  gap:14px !important;
}
.minimal-search .featured-services button{
  min-width:0;
}
.minimal-search .mini-provider{
  height:92px !important;
  border-radius:12px !important;
  font-size:20px !important;
}
.minimal-search>h3{
  margin:18px 0 12px !important;
}
.minimal-search .service-dropdown{
  position:relative;
  z-index:10;
}
@media(max-width:900px){
  .approved-topbar{
    position:sticky !important;
  }
  .minimal-search .featured-services{
    grid-template-columns:repeat(3,1fr) !important;
  }
}
@media(max-width:600px){
  .minimal-hero{
    padding:28px 16px 14px !important;
    grid-template-columns:1fr !important;
  }
  .minimal-hero .service-copy h1{
    font-size:38px !important;
  }
  .minimal-search{
    margin:0 16px 18px !important;
  }
  .minimal-search .featured-services{
    grid-template-columns:repeat(2,1fr) !important;
  }
}


/* ===== Logos originales de proveedores ===== */
.original-brand-grid{
  grid-template-columns:repeat(5,1fr) !important;
  gap:16px !important;
}
.brand-logo-card{
  height:94px !important;
  padding:16px !important;
  background:#fff !important;
  border:1px solid #e4e8f2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.brand-logo-card img{
  display:block;
  width:100%;
  height:100%;
  max-width:145px;
  max-height:58px;
  object-fit:contain;
}
.brand-logo-small{
  background:#fff !important;
  padding:6px !important;
  overflow:hidden !important;
}
.brand-logo-small img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.original-brand-grid button b{
  display:block;
  margin-top:7px;
  font-size:11px;
  color:#fff;
}
@media(max-width:850px){
  .original-brand-grid{grid-template-columns:repeat(3,1fr) !important;}
}
@media(max-width:520px){
  .original-brand-grid{grid-template-columns:repeat(2,1fr) !important;}
  .brand-logo-card{height:82px !important;}
}


/* ===== SERVICIOS MOBILE LIMPIO ===== */
.compact-hero{
  min-height:300px !important;
  padding-top:26px !important;
  padding-bottom:10px !important;
}
.compact-search{
  margin-top:0 !important;
}
.clean-service-visual{
  min-height:260px !important;
}
.clean-orb{
  width:240px !important;
  height:240px !important;
  background:radial-gradient(circle,#5c2ed8 0,#251277 58%,transparent 72%) !important;
}
.clean-laptop-scene{
  position:relative;
  width:260px;
  height:220px;
  z-index:3;
}
.clean-head{
  position:absolute;
  left:100px;
  top:25px;
  width:62px;
  height:68px;
  border-radius:46% 46% 42% 42%;
  background:linear-gradient(#f6c5a4,#efb38d);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.clean-head:before{
  content:"";
  position:absolute;
  inset:-8px 4px auto 4px;
  height:28px;
  border-radius:50% 50% 35% 35%;
  background:#211927;
}
.clean-head:after{
  content:"";
  position:absolute;
  left:19px;
  top:34px;
  width:24px;
  height:9px;
  border-bottom:3px solid #7b2a55;
  border-radius:50%;
}
.clean-body{
  position:absolute;
  left:74px;
  top:86px;
  width:116px;
  height:70px;
  border-radius:24px 24px 12px 12px;
  background:linear-gradient(180deg,#4a4f9d,#313873);
}
.clean-laptop{
  position:absolute;
  left:55px;
  top:100px;
  width:150px;
  height:88px;
  border-radius:10px;
  background:linear-gradient(160deg,#c4b5e5,#8673c0);
  box-shadow:0 18px 30px rgba(0,0,0,.24);
  display:grid;
  place-items:center;
  color:#554579;
  font-size:28px;
}
.clean-card,.clean-bill,.clean-ok{
  position:absolute;
  display:grid;
  place-items:center;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
}
.clean-card{
  left:8px;top:110px;width:48px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,#ff7b7b,#ff4f9a);transform:rotate(-12deg);
}
.clean-bill{
  right:0;top:20px;width:54px;height:70px;border-radius:8px;
  background:#f5f1ff;color:#8a73b9;font-size:28px;
}
.clean-ok{
  right:10px;bottom:12px;width:46px;height:46px;border-radius:12px;
  background:#fff;color:#28ca72;font-size:29px;
}

/* Dropdown: one service per row for clearer mobile use */
.service-list{
  grid-template-columns:1fr !important;
  max-height:420px !important;
}
.service-list button{
  min-height:66px !important;
}
@media(min-width:900px){
  .service-list{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:800px){
  .service-main{
    padding-bottom:18px !important;
  }
  .compact-hero{
    padding-top:18px !important;
    padding-bottom:0 !important;
  }
  .service-copy h1{
    margin-bottom:8px !important;
  }
  .service-copy>p{
    margin-bottom:0 !important;
  }
  .clean-service-visual{
    min-height:220px !important;
  }
  .clean-laptop-scene{
    transform:scale(.88);
  }
  .compact-search{
    margin-top:2px !important;
  }
}
@media(max-width:520px){
  .service-topbar{
    position:sticky !important;
    top:0 !important;
    z-index:999 !important;
  }
  .compact-hero{
    min-height:auto !important;
    gap:4px !important;
  }
  .clean-service-visual{
    min-height:190px !important;
  }
  .clean-laptop-scene{
    transform:scale(.76);
    transform-origin:center;
  }
  .service-search-box{
    padding:14px !important;
  }
  .service-dropdown{
    padding:8px !important;
  }
  .service-list{
    max-height:360px !important;
  }
  .service-list button{
    grid-template-columns:44px 1fr 20px !important;
    min-height:60px !important;
    padding:7px 8px !important;
  }
  .service-list button .provider-logo{
    width:36px !important;
    height:36px !important;
  }
}

/* ===== HERO MODERNO PAGOS DE SERVICIOS ===== */
.modern-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:280px!important}
.modern-glow{position:absolute;width:310px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(111,55,255,.62),rgba(55,28,145,.28) 48%,transparent 72%);filter:blur(2px)}
.modern-person{position:relative;width:330px;height:250px;z-index:2}
.modern-chair{position:absolute;right:25px;bottom:6px;width:150px;height:145px;border-radius:58px 58px 42px 42px;background:linear-gradient(145deg,#6f4de1,#312078);transform:rotate(5deg);box-shadow:0 18px 45px rgba(0,0,0,.28)}
.modern-face{position:absolute;right:95px;top:31px;width:58px;height:67px;border-radius:46% 46% 43% 43%;background:linear-gradient(#f5c5a5,#eeb08b);z-index:4}
.modern-hair{position:absolute;right:91px;top:22px;width:67px;height:32px;border-radius:50% 52% 35% 38%;background:#17162b;z-index:5;transform:rotate(-4deg)}
.modern-face:before{content:"";position:absolute;left:15px;top:28px;width:7px;height:7px;border-radius:50%;background:#252033;box-shadow:25px 0 #252033}
.modern-face:after{content:"";position:absolute;left:20px;top:45px;width:22px;height:8px;border-bottom:3px solid #9a405c;border-radius:50%}
.modern-torso{position:absolute;right:74px;top:89px;width:104px;height:88px;border-radius:32px 32px 14px 14px;background:linear-gradient(150deg,#242d62,#151b3f);z-index:3}
.modern-laptop{position:absolute;right:49px;top:112px;width:144px;height:88px;border-radius:10px;background:linear-gradient(150deg,#8f78c9,#46347f);z-index:6;box-shadow:0 16px 30px rgba(0,0,0,.3);display:grid;place-items:center}
.modern-laptop b{font-size:31px;color:#c85cff;text-shadow:0 0 18px #8b42ff}
.modern-side-table{position:absolute;left:20px;bottom:20px;width:76px;height:8px;border-radius:10px;background:#30246e;z-index:4}
.modern-plant{position:absolute;left:5px;bottom:6px;font-size:46px;color:#34b96b;transform:rotate(-8deg)}
.modern-cup{position:absolute;right:2px;bottom:7px;font-size:27px;color:#8679c8}
.float-doc,.float-card,.float-ok{position:absolute;z-index:8;display:grid;place-items:center;box-shadow:0 12px 28px rgba(0,0,0,.25)}
.float-doc{right:4px;top:20px;width:54px;height:60px;border-radius:12px;background:linear-gradient(145deg,#9a5cff,#6540d5);color:white;font-size:29px}
.float-card{left:40px;top:62px;width:48px;height:36px;border-radius:10px;background:linear-gradient(135deg,#ff6b96,#e64cba);color:white;transform:rotate(-12deg)}
.float-ok{right:0;bottom:26px;width:49px;height:49px;border-radius:13px;background:#fff;color:#25cf77;font-size:31px}
.service-copy h1{margin-bottom:0!important}
@media(max-width:800px){
 .modern-visual{min-height:220px!important}
 .modern-person{transform:scale(.82)}
}
@media(max-width:520px){
 .compact-hero{padding-top:12px!important}
 .modern-visual{min-height:185px!important}
 .modern-person{transform:scale(.70);transform-origin:center}
 .service-copy h1{margin-bottom:0!important}
}


/* ===== HERO PREMIUM: más cercano al boceto ===== */
.premium-visual{
  position:relative;
  min-height:300px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.premium-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(2px);
  pointer-events:none;
}
.premium-glow.glow-a{
  width:310px;height:310px;
  background:radial-gradient(circle,rgba(103,54,255,.48) 0%,rgba(70,32,176,.26) 45%,transparent 72%);
}
.premium-glow.glow-b{
  width:240px;height:240px;
  background:radial-gradient(circle,rgba(39,126,255,.22) 0%,transparent 72%);
  transform:translate(56px,-18px);
}
.premium-scene{
  position:relative;
  width:360px;
  height:270px;
  z-index:3;
}
.premium-chair{
  position:absolute;
  right:28px;
  bottom:12px;
  width:170px;
  height:165px;
  border-radius:72px 72px 54px 54px;
  background:
    radial-gradient(circle at 38% 22%,rgba(143,93,255,.6),transparent 34%),
    linear-gradient(145deg,#5f3ec8,#281a70);
  box-shadow:0 24px 55px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(3deg);
}
.premium-person{
  position:absolute;
  right:78px;
  top:23px;
  width:140px;
  height:175px;
  z-index:6;
}
.premium-face{
  position:absolute;
  left:42px;
  top:18px;
  width:64px;
  height:72px;
  border-radius:47% 47% 44% 44%;
  background:linear-gradient(180deg,#f4c5a7,#e9aa83);
  box-shadow:inset 0 -8px 16px rgba(164,86,52,.08);
  z-index:3;
}
.premium-hair{
  position:absolute;
  left:36px;
  top:8px;
  width:76px;
  height:38px;
  background:linear-gradient(145deg,#19182b,#24223c);
  border-radius:58% 52% 42% 36%;
  transform:rotate(-6deg);
  z-index:4;
}
.premium-hair:after{
  content:"";
  position:absolute;
  right:3px;
  bottom:-13px;
  width:19px;
  height:28px;
  background:#211f34;
  border-radius:0 0 12px 12px;
}
.eye{
  position:absolute;
  top:30px;
  width:6px;
  height:7px;
  border-radius:50%;
  background:#211d2a;
}
.eye-l{left:17px}.eye-r{right:17px}
.smile{
  position:absolute;
  left:21px;
  top:49px;
  width:23px;
  height:9px;
  border-bottom:3px solid #8a3656;
  border-radius:50%;
}
.premium-neck{
  position:absolute;
  left:61px;
  top:80px;
  width:27px;
  height:20px;
  border-radius:4px 4px 9px 9px;
  background:#e6a681;
}
.premium-hoodie{
  position:absolute;
  left:19px;
  top:91px;
  width:112px;
  height:93px;
  border-radius:34px 34px 16px 16px;
  background:
    linear-gradient(145deg,#26305d,#141a3b 68%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.premium-hoodie:before{
  content:"";
  position:absolute;
  left:31px;
  top:-10px;
  width:50px;
  height:28px;
  border:3px solid rgba(57,67,118,.8);
  border-bottom:0;
  border-radius:28px 28px 0 0;
}
.hood-line{
  position:absolute;
  top:17px;
  width:2px;
  height:27px;
  background:#8490c8;
  opacity:.6;
}
.hood-line.l{left:48px;transform:rotate(6deg)}
.hood-line.r{right:48px;transform:rotate(-6deg)}
.premium-arm{
  position:absolute;
  top:122px;
  width:35px;
  height:62px;
  border-radius:18px;
  background:#1a224a;
  z-index:2;
}
.arm-l{left:5px;transform:rotate(20deg)}
.arm-r{right:4px;transform:rotate(-18deg)}
.premium-laptop{
  position:absolute;
  right:58px;
  top:124px;
  width:154px;
  height:94px;
  border-radius:12px;
  background:
    linear-gradient(160deg,#7f6ac0,#3f326f);
  box-shadow:0 20px 36px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.09);
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
}
.premium-laptop:after{
  content:"";
  position:absolute;
  left:-10px;
  bottom:-8px;
  width:174px;
  height:10px;
  border-radius:0 0 10px 10px;
  background:#2d2851;
}
.premium-laptop-logo{
  font-size:32px;
  font-weight:900;
  color:#c155ff;
  text-shadow:0 0 16px #8e48ff;
}
.keyboard-line{
  position:absolute;
  bottom:-5px;
  width:72px;
  height:2px;
  background:#6f6591;
  z-index:10;
}
.premium-table{
  position:absolute;
  left:8px;
  bottom:32px;
  width:90px;
  height:9px;
  border-radius:9px;
  background:linear-gradient(90deg,#38266f,#4a2d85);
  box-shadow:0 8px 16px rgba(0,0,0,.18);
}
.premium-table:after{
  content:"";
  position:absolute;
  left:42px;
  top:8px;
  width:6px;
  height:42px;
  border-radius:4px;
  background:#291d57;
}
.premium-plant{
  position:absolute;
  left:25px;
  bottom:41px;
  width:45px;
  height:70px;
}
.premium-plant .stem{
  position:absolute;
  left:21px;
  bottom:16px;
  width:3px;
  height:38px;
  background:#2d965f;
}
.premium-plant .leaf{
  position:absolute;
  width:25px;
  height:14px;
  border-radius:100% 0 100% 0;
  background:linear-gradient(135deg,#45c878,#208f55);
}
.premium-plant .leaf.a{left:3px;top:17px;transform:rotate(24deg)}
.premium-plant .leaf.b{right:0;top:10px;transform:scaleX(-1) rotate(20deg)}
.premium-plant .leaf.c{left:10px;top:0;transform:rotate(72deg)}
.premium-plant .pot{
  position:absolute;
  left:11px;
  bottom:0;
  width:27px;
  height:20px;
  border-radius:4px 4px 9px 9px;
  background:#2a2653;
}
.premium-cup{
  position:absolute;
  left:76px;
  bottom:42px;
  width:24px;
  height:19px;
  border-radius:4px 4px 8px 8px;
  background:#5e55a1;
}
.premium-cup:after{
  content:"";
  position:absolute;
  right:-8px;
  top:4px;
  width:10px;
  height:9px;
  border:2px solid #5e55a1;
  border-left:0;
  border-radius:0 7px 7px 0;
}
.float-tile{
  position:absolute;
  z-index:10;
  display:grid;
  place-items:center;
  box-shadow:0 14px 28px rgba(0,0,0,.28);
}
.float-doc{
  right:5px;
  top:28px;
  width:58px;
  height:64px;
  border-radius:14px;
  background:linear-gradient(145deg,#9d5eff,#633bd0);
  color:#fff;
  font-size:30px;
}
.float-card{
  left:42px;
  top:70px;
  width:52px;
  height:38px;
  border-radius:11px;
  background:linear-gradient(135deg,#ff6c9d,#dd4ed3);
  color:#fff;
  font-size:20px;
  transform:rotate(-12deg);
}
.float-ok{
  right:0;
  bottom:34px;
  width:52px;
  height:52px;
  border-radius:14px;
  background:#fff;
  color:#2fd17a;
  font-size:33px;
}
.compact-hero{
  padding-bottom:4px!important;
}
.compact-search{
  margin-top:-4px!important;
}
@media(max-width:800px){
  .premium-visual{min-height:230px!important}
  .premium-scene{transform:scale(.84)}
}
@media(max-width:520px){
  .compact-hero{gap:0!important}
  .premium-visual{min-height:185px!important}
  .premium-scene{transform:scale(.68);transform-origin:center}
  .compact-search{margin-top:-10px!important}
}


/* ===== PAGA SERVICIOS — BOCETO PREMIUM APROBADO ===== */
.service-pay-page.service-pay-minimal{
  background:
    radial-gradient(circle at 82% 8%,rgba(72,25,200,.20),transparent 28%),
    linear-gradient(180deg,#02091f 0%,#061843 100%) !important;
}
.minimal-main{max-width:1320px!important;padding-bottom:44px!important}
.premium-mockup-hero{
  min-height:365px!important;
  grid-template-columns:.82fr 1.18fr!important;
  gap:28px!important;
  padding:38px 34px 8px!important;
  overflow:hidden;
}
.premium-mockup-copy{align-self:center;padding-left:8px}
.premium-mockup-copy h1{
  font-size:clamp(46px,4.2vw,68px)!important;
  line-height:.98!important;
  letter-spacing:-2.2px;
  margin:0 0 28px!important;
}
.premium-mockup-copy h1 em{
  background:linear-gradient(90deg,#884cff,#c24cff);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.premium-trust-row{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.premium-trust-row>div{display:flex;align-items:center;gap:10px;color:#eef4ff;font-size:13px;line-height:1.15}
.premium-trust-row span{
  width:42px;height:42px;border:1px solid rgba(111,90,255,.38);
  border-radius:12px;display:grid;place-items:center;color:#8b53ff;
  background:linear-gradient(145deg,rgba(68,42,166,.38),rgba(8,28,77,.5));
  font-size:22px;box-shadow:inset 0 0 18px rgba(96,64,255,.12)
}
.premium-photo-wrap{
  position:relative;align-self:stretch;min-height:330px;border-radius:28px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 100%);
}
.premium-photo-wrap:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,10,34,.02),rgba(3,10,34,.08));
}
.premium-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.compact-search{
  margin:0 34px!important;
  border-color:#294781!important;
  background:linear-gradient(180deg,rgba(8,28,75,.97),rgba(5,22,62,.98))!important;
  box-shadow:0 24px 60px rgba(0,0,0,.16);
}
.compact-search .service-search-trigger{min-height:58px;border-radius:12px}
.original-brand-grid{gap:18px!important}
.brand-logo-card{height:92px!important;border-radius:13px!important}
@media(max-width:900px){
  .premium-mockup-hero{grid-template-columns:1fr!important;padding:28px 20px 6px!important}
  .premium-mockup-copy{padding-left:0;text-align:center}
  .premium-mockup-copy h1{font-size:clamp(42px,9vw,58px)!important}
  .premium-trust-row{justify-content:center}
  .premium-photo-wrap{
    min-height:270px;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%);
  }
  .compact-search{margin:0 20px!important}
}
@media(max-width:600px){
  .premium-mockup-hero{padding:22px 14px 4px!important;gap:8px!important}
  .premium-mockup-copy h1{font-size:42px!important;letter-spacing:-1.4px;margin-bottom:18px!important}
  .premium-trust-row{gap:9px;justify-content:space-between}
  .premium-trust-row>div{font-size:10px;gap:6px}
  .premium-trust-row span{width:34px;height:34px;border-radius:10px;font-size:17px}
  .premium-photo-wrap{min-height:205px;border-radius:18px}
  .compact-search{margin:0 14px 18px!important;padding:15px!important}
  .original-brand-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  .brand-logo-card{height:78px!important;padding:12px!important}
}


/* ===== HERO SIN BOTONES DE BENEFICIOS ===== */
.premium-trust-row{display:none!important}
.premium-mockup-copy h1{margin-bottom:0!important}

/* ===== FLUJO DE PAGO DE SERVICIOS ===== */
.service-flow-page{
  margin:0;min-height:100vh;color:#fff;
  background:
    radial-gradient(circle at 80% 15%,rgba(95,35,220,.20),transparent 28%),
    linear-gradient(180deg,#030820 0%,#071641 100%);
}
.flow-main{max-width:980px!important;margin:0 auto;padding:54px 20px 70px!important}
.flow-card{
  border:1px solid #29457f;border-radius:22px;padding:34px;
  background:linear-gradient(180deg,rgba(8,27,74,.98),rgba(5,20,58,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.20)
}
.flow-progress{display:flex;align-items:center;justify-content:center;margin-bottom:34px}
.flow-step{
  width:42px;height:42px;border-radius:50%;border:2px solid #42598d;
  display:grid;place-items:center;color:#8d9bc2;background:#071742;font-weight:900
}
.flow-step.active{border-color:#7e55ff;color:#fff;background:linear-gradient(135deg,#7839f3,#218cff);box-shadow:0 0 24px rgba(92,69,255,.25)}
.flow-progress i{width:90px;height:2px;background:#314574}
.flow-heading{text-align:center;max-width:650px;margin:0 auto 28px}
.flow-eyebrow{font-size:12px;letter-spacing:1.6px;color:#73b9ff;font-weight:900;text-transform:uppercase}
.flow-heading h1{font-size:36px;margin:9px 0 8px}
.flow-heading p{color:#c6d0eb;margin:0;line-height:1.5}
.flow-form{max-width:600px;margin:auto;display:grid;gap:18px}
.flow-form label{font-weight:800}
.flow-form input{
  width:100%;margin-top:8px;min-height:58px;border:1px solid #385189;
  border-radius:12px;background:#071944;color:#fff;padding:0 16px;font-size:17px;outline:none
}
.flow-form input:focus{border-color:#7957ff;box-shadow:0 0 0 3px rgba(121,87,255,.14)}
.money-input{position:relative}.money-input span{position:absolute;left:17px;top:25px;color:#9fb0d7;font-size:18px}.money-input input{padding-left:38px}
.flow-primary,.flow-secondary{
  min-height:54px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 22px;font-weight:900;text-decoration:none;cursor:pointer
}
.flow-primary{border:0;color:#fff;background:linear-gradient(90deg,#713df2,#268cff);box-shadow:0 12px 30px rgba(58,74,255,.2)}
.flow-secondary{border:1px solid #4c6196;color:#fff;background:#081a49}
.verify-grid,.checkout-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.verify-grid>div,.checkout-summary>div{
  border:1px solid #2e467a;border-radius:13px;background:#071945;padding:17px
}
.verify-grid span,.checkout-summary span{display:block;color:#9fafd4;font-size:12px;margin-bottom:5px}
.verify-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.checkout-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:start}
.checkout-summary{grid-template-columns:1fr}
.checkout-panel{background:#fff;color:#09143b;border-radius:16px;padding:24px}
.checkout-panel h3{margin-top:0}.checkout-panel strong{display:block;font-size:34px;margin:8px 0 12px}.checkout-panel p{color:#66708a;font-size:13px;line-height:1.5}
@media(max-width:700px){
  .flow-main{padding:28px 14px 50px!important}
  .flow-card{padding:22px 14px}
  .flow-progress i{width:35px}
  .flow-step{width:36px;height:36px}
  .flow-heading h1{font-size:29px}
  .verify-grid,.checkout-layout{grid-template-columns:1fr}
  .verify-actions{flex-direction:column}
  .verify-actions>*{width:100%}
}


/* ===== CHECKOUT FINAL — MOCKUP APROBADO / DESKTOP + MOBILE ===== */
.final-checkout-page{
  margin:0;min-height:100vh;color:#fff;
  background:
    radial-gradient(circle at 85% 15%,rgba(61,29,190,.18),transparent 30%),
    linear-gradient(180deg,#02081f 0%,#061943 100%);
}
.final-checkout-main{max-width:1400px!important;margin:0 auto;padding:26px 22px 48px!important}
.final-checkout-shell{
  border:1px solid #27477f;border-radius:22px;
  background:linear-gradient(180deg,rgba(7,27,73,.98),rgba(4,19,56,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.18);
  padding:26px 42px 34px;
}
.checkout-stepper{
  max-width:850px;margin:0 auto 30px;display:flex;align-items:flex-start;justify-content:center
}
.checkout-step{width:120px;text-align:center;position:relative;z-index:2}
.checkout-step span{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;
  background:linear-gradient(135deg,#7444ed,#5b60ff);font-weight:900;
  box-shadow:0 0 18px rgba(108,75,255,.22)
}
.checkout-step.active span{
  border:2px solid #d07cff;box-shadow:0 0 20px rgba(189,77,255,.72),inset 0 0 12px rgba(255,255,255,.12)
}
.checkout-step small{color:#c3cdea;font-size:12px}
.checkout-step.active small{color:#a65cff;font-weight:800}
.checkout-stepper>i{height:2px;flex:1;background:#415985;margin-top:19px;max-width:130px}
.checkout-columns{display:grid;grid-template-columns:1.18fr .72fr;gap:36px;align-items:start}
.checkout-form-side{padding:8px 0}
.checkout-eyebrow{font-size:12px;letter-spacing:1px;color:#8c5cff;font-weight:900}
.checkout-form-side h1{font-size:34px;margin:9px 0 7px}
.checkout-lead{margin:0 0 22px;color:#c3cce6}
.checkout-form-side h2,.checkout-summary-side h2{font-size:14px;margin:18px 0 10px}
.personal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.input-shell{
  position:relative;min-height:48px;border:1px solid #345084;border-radius:9px;
  background:#071a49;display:flex;align-items:center;overflow:hidden
}
.input-shell:focus-within{border-color:#8658ff;box-shadow:0 0 0 3px rgba(134,88,255,.10)}
.input-shell input{
  width:100%;height:100%;min-height:48px;border:0!important;outline:0!important;
  background:transparent!important;color:#fff!important;padding:0 14px!important;font-size:14px!important;
  box-shadow:none!important;margin:0!important
}
.input-shell input::placeholder{color:#8e9fc4}
.field-icon{width:45px;text-align:center;color:#b4c3e7;font-size:18px;flex:0 0 45px}
.full-field{margin-top:10px}
.payment-heading{margin-top:20px!important}
.payment-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid #345084;border-radius:9px;overflow:hidden}
.payment-tab{
  min-height:46px;border:0;background:#071a49;color:#9eaccd;cursor:pointer;font-size:13px
}
.payment-tab+ .payment-tab{border-left:1px solid #345084}
.payment-tab.active{
  color:#d3a2ff;background:linear-gradient(90deg,rgba(94,34,182,.36),rgba(16,35,83,.95));
  box-shadow:inset 0 0 0 1px #a14dff
}
.card-number-shell{min-height:68px}
.card-number-shell input{white-space:pre-line}
.card-field-icon{position:absolute;right:14px;color:#bbcaeb;font-size:25px}
.card-details-grid{display:grid;grid-template-columns:1fr 1fr 1.28fr;gap:10px;margin-top:10px}
.stacked-field{display:block;padding:8px 36px 6px 12px;min-height:64px}
.stacked-field .mini-label{display:block;color:#8293b9;font-size:11px;margin-bottom:2px}
.stacked-field input{min-height:30px!important;padding:0!important}
.small-side-icon{position:absolute;right:11px;bottom:15px;color:#b6c4e4}
.save-card-row{display:flex;align-items:center;gap:8px;margin-top:17px;color:#aeb9d5;font-size:12px}
.save-card-row input{accent-color:#8f4dff}
.checkout-summary-side{display:grid;gap:12px}
.summary-card,.total-card,.secure-card{
  border:1px solid #2c477c;border-radius:13px;background:#071a49;padding:16px
}
.summary-card h2{font-size:16px;margin:0 0 12px}
.summary-service-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #233d70;padding-bottom:13px}
.summary-service-row span,.summary-data-row span{display:block;color:#8295bd;font-size:11px;margin-bottom:4px}
.summary-service-row b,.summary-data-row b{font-size:14px}
.summary-service-row img{width:105px;height:45px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.summary-data-row{padding:13px 0;border-bottom:1px solid #233d70}
.summary-data-row:last-child{border-bottom:0;padding-bottom:0}
.amount-accent{color:#8d50ff!important}
.total-card span{font-size:13px;font-weight:800}
.total-card strong{display:block;color:#8f50ff;font-size:32px;margin-top:7px}
.secure-card{display:flex;gap:12px;align-items:center}
.secure-icon{width:36px;height:36px;border:1px solid #526a9b;border-radius:9px;display:grid;place-items:center}
.secure-card b{display:block;font-size:12px}.secure-card small{display:block;color:#8fa0c5;font-size:10px;margin-top:4px}
.checkout-pay-button{
  min-height:58px;border:0;border-radius:9px;color:#fff;font-size:17px;font-weight:900;cursor:pointer;
  background:linear-gradient(90deg,#8435ef,#228cff);box-shadow:0 15px 30px rgba(68,59,255,.22)
}
.accepted-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.accepted-cards span{
  min-height:38px;background:#fff;border-radius:5px;display:grid;place-items:center;padding:4px;
  overflow:hidden
}
.accepted-cards img{width:100%;height:27px;object-fit:contain}
.checkout-terms{text-align:center;color:#7f90b4;font-size:10px;line-height:1.5;margin-top:20px}
.checkout-terms a{color:#23a5ff;text-decoration:none}

/* tablet */
@media(max-width:1000px){
  .final-checkout-shell{padding:24px}
  .checkout-columns{grid-template-columns:1fr}
  .checkout-summary-side{max-width:none}
  .checkout-step{width:105px}
}
/* mobile: optimized for Android + iPhone */
@media(max-width:620px){
  .final-checkout-main{padding:12px 8px 28px!important}
  .final-checkout-shell{padding:14px 12px 20px;border-radius:16px}
  .checkout-stepper{margin-bottom:22px}
  .checkout-step{width:72px}
  .checkout-step span{width:30px;height:30px;font-size:12px;margin-bottom:6px}
  .checkout-step small{font-size:9px;line-height:1.15;display:block}
  .checkout-stepper>i{margin-top:15px;max-width:45px}
  .checkout-columns{gap:20px}
  .checkout-form-side h1{font-size:27px}
  .checkout-lead{font-size:12px}
  .personal-grid{grid-template-columns:1fr 1fr;gap:7px}
  .input-shell{min-height:43px;border-radius:7px}
  .input-shell input{min-height:43px!important;font-size:12px!important;padding:0 9px!important}
  .field-icon{width:34px;flex-basis:34px;font-size:14px}
  .payment-tab{font-size:11px;min-height:40px}
  .card-details-grid{grid-template-columns:1fr 1fr;gap:7px}
  .card-details-grid .stacked-field:last-child{grid-column:1/-1}
  .stacked-field{min-height:58px}
  .summary-card,.total-card,.secure-card{padding:13px}
  .summary-service-row img{width:95px;height:40px}
  .total-card strong{font-size:29px}
  .checkout-pay-button{min-height:52px;font-size:15px}
  .accepted-cards{gap:4px}
  .accepted-cards span{min-height:32px;padding:3px}
  .accepted-cards img{height:22px}
}
@media(max-width:390px){
  .personal-grid{grid-template-columns:1fr}
  .payment-tabs{grid-template-columns:1fr 1fr}
  .checkout-step{width:65px}
  .checkout-stepper>i{max-width:24px}
}


/* ===== DESCUENTOS AUTOMÁTICOS + ESTILO AUTÉNTICO ===== */
.final-checkout-shell{
  position:relative;
  overflow:hidden;
}
.final-checkout-shell:before{
  content:"";
  position:absolute;
  width:420px;height:420px;border-radius:50%;
  right:-170px;top:-180px;
  background:radial-gradient(circle,rgba(141,65,255,.16),transparent 68%);
  pointer-events:none;
}
.checkout-form-side,.checkout-summary-side{position:relative;z-index:1}

.summary-service-row img{
  background:#fff;
  border-radius:12px;
  padding:8px;
  width:112px!important;
  height:58px!important;
  object-fit:contain!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.discount-card{
  border:1px solid #2c477c;border-radius:14px;
  background:linear-gradient(145deg,#091b4c,#07163f);
  padding:16px;transition:.2s ease;
}
.discount-card.eligible{
  border-color:#6848d8;
  box-shadow:0 0 0 1px rgba(120,70,255,.12),0 18px 36px rgba(73,36,169,.14);
}
.discount-title-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #243e70}
.discount-kicker{display:block;color:#caa8ff;font-weight:900;font-size:13px}
.discount-title-row small{display:block;color:#8798bd;margin-top:4px}
.discount-icon{width:34px;height:34px;border-radius:9px;border:1px solid #7849e2;display:grid;place-items:center;color:#aa64ff}
.discount-option{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #243e70;color:#b9c5e2;font-size:12px}
.discount-option:last-child{border-bottom:0;padding-bottom:0}
.discount-option b{color:#43ec7a;font-size:13px}
.original-total-card{position:relative}
.total-line{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#c4cee7;margin-bottom:10px}
.total-line b{color:#fff}
.discount-line{color:#46e878}
.discount-line b{color:#46e878}
.discount-line em{font-style:normal;font-size:10px;margin-left:5px;color:#46e878}
.original-total-card hr{border:0;border-top:1px solid #263f70;margin:12px 0}
.savings-badge{
  position:absolute;right:-22px;bottom:10px;
  width:86px;height:86px;border-radius:50%;
  background:linear-gradient(145deg,#8a38e8,#4a44bd);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 15px 30px rgba(85,45,190,.32),inset 0 0 0 1px rgba(255,255,255,.08);
  transform:rotate(-7deg)
}
.savings-badge small{font-size:9px;font-weight:900}
.savings-badge b{font-size:14px;margin-top:3px}

/* logos bancarios/tarjetas mejor encuadrados */
.accepted-cards span{
  min-height:46px!important;
  border:1px solid #e7e9f0;
  border-radius:8px!important;
  padding:6px 8px!important;
  background:linear-gradient(#fff,#fafafa)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.10);
}
.accepted-cards img{
  width:100%!important;
  height:30px!important;
  object-fit:contain!important;
}

/* tarjetas de servicios: usar los logos existentes sin marcos negros ni recortes */
.brand-logo-card{
  overflow:hidden!important;
  padding:14px!important;
}
.brand-logo-card img{
  max-width:100%!important;
  max-height:60px!important;
  object-fit:contain!important;
  filter:none!important;
}

.payment-tabs{box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.payment-tab.active{
  box-shadow:inset 0 0 0 1px #a04cff,0 0 22px rgba(135,65,255,.12)!important;
}

@media(max-width:620px){
  .summary-service-row img{width:92px!important;height:50px!important}
  .discount-option{font-size:11px}
  .savings-badge{position:static;width:auto;height:auto;border-radius:10px;transform:none;margin-top:12px;padding:8px 12px;align-items:flex-start}
  .savings-badge b{font-size:13px}
}


/* ===== LOGOS PREMIUM + ENCUADRE LIMPIO ===== */

/* Servicios: conservar exactamente la estética del ZIP Premium Final */
.original-brand-grid .brand-logo-card{
  background:#fff!important;
  border:1px solid rgba(230,234,244,.95)!important;
  border-radius:14px!important;
  min-height:94px!important;
  padding:15px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  box-shadow:0 8px 22px rgba(0,0,0,.10)!important;
}
.original-brand-grid .brand-logo-card img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:170px!important;
  max-height:62px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}

/* Logo del servicio en el checkout */
.summary-service-row img{
  background:#fff!important;
  border:1px solid rgba(231,235,244,.95)!important;
  border-radius:13px!important;
  width:118px!important;
  height:64px!important;
  padding:10px 12px!important;
  object-fit:contain!important;
  object-position:center!important;
  box-shadow:0 8px 20px rgba(0,0,0,.11)!important;
}

/* Tarjetas/bancos: sin marco negro y centrados como badges limpios */
.accepted-cards{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:9px!important;
}
.accepted-cards span{
  height:48px!important;
  min-height:48px!important;
  padding:7px 10px!important;
  border-radius:9px!important;
  border:1px solid #e6e9f1!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  box-shadow:0 6px 16px rgba(0,0,0,.10)!important;
}
.accepted-cards img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:92px!important;
  max-height:30px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Un poco más de identidad visual */
.checkout-summary-side{
  border-radius:18px;
}
.summary-card{
  background:
    radial-gradient(circle at 88% 12%,rgba(126,67,255,.13),transparent 32%),
    linear-gradient(180deg,#081b4e,#071741)!important;
}
.discount-card{
  background:
    radial-gradient(circle at 12% 0%,rgba(151,59,255,.14),transparent 35%),
    linear-gradient(145deg,#0a1d51,#07163f)!important;
}
.checkout-pay-button{
  position:relative;
  overflow:hidden;
}
.checkout-pay-button:after{
  content:"";
  position:absolute;
  top:-50%;left:-25%;
  width:34%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:rotate(18deg);
  transition:.45s ease;
}
.checkout-pay-button:hover:after{left:110%}

@media(max-width:620px){
  .original-brand-grid .brand-logo-card{min-height:80px!important;padding:11px!important}
  .summary-service-row img{width:100px!important;height:54px!important;padding:8px!important}
  .accepted-cards{gap:5px!important}
  .accepted-cards span{height:38px!important;min-height:38px!important;padding:4px 5px!important}
  .accepted-cards img{max-width:66px!important;max-height:23px!important}
}


/* ===== BUSCADOR INTELIGENTE / VALIDACIÓN ===== */
.account-format-help{
  display:block!important;
  margin-top:7px;
  color:#92a5cc;
  font-size:11px;
  font-weight:500;
}
.account-format-error{
  margin-top:8px;
  border:1px solid rgba(255,85,110,.45);
  background:rgba(255,44,82,.09);
  color:#ff8da0;
  border-radius:9px;
  padding:9px 11px;
  font-size:12px;
}
.field-invalid{
  border-color:#ff5575!important;
  box-shadow:0 0 0 3px rgba(255,70,100,.10)!important;
}
.bot-trap{
  position:absolute!important;
  left:-99999px!important;
  opacity:0!important;
  width:1px!important;
  height:1px!important;
  pointer-events:none!important;
}

/* ===== LOGOS DE SERVICIO LIMPIOS ===== */
.original-brand-grid .brand-logo-card{
  padding:12px 18px!important;
}
.original-brand-grid .brand-logo-card img{
  width:100%!important;
  height:100%!important;
  max-width:190px!important;
  max-height:72px!important;
  object-fit:contain!important;
}
.summary-service-row img{
  width:132px!important;
  height:72px!important;
  padding:8px 10px!important;
  object-fit:contain!important;
  background:#fff!important;
  border-radius:14px!important;
  border:1px solid #e9edf5!important;
}

/* ===== MARCAS DE TARJETAS MÁS GRANDES / PREMIUM ===== */
.accepted-cards{
  gap:10px!important;
  margin-top:4px;
}
.accepted-cards span{
  min-height:58px!important;
  height:58px!important;
  padding:7px 10px!important;
  border-radius:12px!important;
  background:
    radial-gradient(circle at 50% 0,rgba(240,243,251,.8),transparent 50%),
    #fff!important;
  border:1px solid rgba(224,228,239,.95)!important;
  box-shadow:
    0 9px 20px rgba(0,0,0,.13),
    inset 0 0 0 1px rgba(255,255,255,.85)!important;
}
.accepted-cards img{
  max-width:112px!important;
  max-height:40px!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform:scale(1.12);
}
@media(max-width:620px){
  .accepted-cards span{height:43px!important;min-height:43px!important;padding:4px 5px!important}
  .accepted-cards img{max-width:72px!important;max-height:28px!important;transform:scale(1.07)}
  .summary-service-row img{width:108px!important;height:58px!important}
}

/* ====================================================================
   CHECKOUT REAL — réplica funcional del boceto aprobado
   ==================================================================== */
.mock-checkout-page{
  margin:0;color:#fff;background:
  radial-gradient(circle at 88% 10%,rgba(66,28,183,.17),transparent 28%),
  linear-gradient(180deg,#030920 0%,#071943 100%);
  min-height:100vh;
}
.mock-checkout-main{max-width:1450px!important;margin:auto;padding:20px 18px 34px!important}
.mock-checkout-shell{
  border:1px solid #29497f;border-radius:20px;padding:26px 42px 20px;
  background:
    radial-gradient(circle at 88% 10%,rgba(89,40,202,.16),transparent 30%),
    linear-gradient(180deg,rgba(6,27,72,.98),rgba(4,19,57,.99));
  box-shadow:0 34px 90px rgba(0,0,0,.20);overflow:hidden
}
.mock-checkout-shell svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mock-stepper{max-width:820px;margin:0 auto 35px;display:flex;align-items:flex-start}
.m-step{width:122px;text-align:center;position:relative;z-index:2}
.m-step span{width:38px;height:38px;margin:auto;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,#7142e7,#5f68ff);box-shadow:0 0 18px rgba(102,74,255,.22)}
.m-step.current span{border:2px solid #e175ff;box-shadow:0 0 22px rgba(210,91,255,.72)}
.m-step small{display:block;margin-top:10px;color:#c4cde5;font-size:12px}.m-step.current small{color:#c458ff;font-weight:900}
.mock-stepper>i{height:2px;background:#405a87;flex:1;margin-top:19px}
.mock-columns{display:grid;grid-template-columns:1.28fr .72fr;gap:42px}
.mock-form{min-width:0}.mock-kicker{display:inline-block;padding:5px 9px;border:1px solid rgba(143,74,255,.36);border-radius:6px;color:#a865ff;font-size:11px;font-weight:900;letter-spacing:.7px}
.mock-form h1{font-size:35px;margin:10px 0 7px}.mock-subtitle{color:#c5cee8;margin:0 0 22px}.mock-form h2{font-size:15px;margin:18px 0 10px}
.mock-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-field{position:relative;min-height:48px;border:1px solid #345184;border-radius:8px;background:#071b4b;display:flex;align-items:center;margin-top:9px;overflow:hidden}
.m-field:focus-within{border-color:#8d59ff;box-shadow:0 0 0 3px rgba(141,89,255,.10)}
.m-field input{height:48px!important;min-height:48px!important;width:100%;border:0!important;background:transparent!important;color:#fff!important;outline:0!important;box-shadow:none!important;margin:0!important;padding:0 14px!important;font-size:13px!important}
.m-field input::placeholder{color:#92a2c6;opacity:1}.m-icon{width:43px;height:24px;color:#aabce7;flex:0 0 43px}.m-icon svg{width:20px;height:20px;margin:auto;display:block}
.m-payment-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid #345184;border-radius:8px;overflow:hidden}
.m-payment-tabs .payment-tab{border:0;min-height:49px;background:#071b4b;color:#9babc9;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.m-payment-tabs .payment-tab+ .payment-tab{border-left:1px solid #345184}
.m-payment-tabs .payment-tab span{width:28px;height:20px}.m-payment-tabs .payment-tab span svg{width:28px;height:20px}
.m-payment-tabs .payment-tab.active{color:#d5a6ff;background:linear-gradient(90deg,rgba(111,43,192,.38),rgba(18,35,82,.96));box-shadow:inset 0 0 0 1px #a34fff,0 0 24px rgba(120,63,255,.10)}
.m-card-number{min-height:68px}.m-card-number input{min-height:68px!important}.m-end-icon{position:absolute;right:13px;width:27px;height:23px;color:#a9bde7}
.m-card-grid{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:9px}.m-stacked{min-height:66px;display:block;padding:8px 34px 4px 11px}
.m-mini{display:block;color:#8295bb;font-size:10px;margin-bottom:2px}.m-stacked input{height:31px!important;min-height:31px!important;padding:0!important}.m-stacked .m-end-icon{bottom:14px}
.m-save{display:flex;align-items:center;gap:8px;color:#aeb9d4;font-size:11px;margin-top:15px}.m-save input{accent-color:#8e4eff}
.m-form-security{display:flex;gap:9px;align-items:center;color:#8192b7;font-size:10px;margin-top:24px}.m-form-security span{width:25px;height:25px;color:#d6a83d}.m-form-security p{margin:0}
.mock-summary{display:grid;gap:11px}.m-summary-card,.m-discount-card,.m-total-card,.m-secure-box{border:1px solid #2d487c;border-radius:12px;background:linear-gradient(180deg,#081c4f,#071741);padding:16px}
.m-summary-card h2{font-size:16px;margin:0 0 12px}.m-service-line{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #243f70}
.m-service-line span,.m-summary-row span{display:block;color:#8497bd;font-size:10px;margin-bottom:5px}.m-service-line b,.m-summary-row b{font-size:14px}
.m-service-logo{width:110px;height:68px;border-radius:11px;background:#fff;display:grid;place-items:center;padding:8px;box-shadow:0 8px 18px rgba(0,0,0,.13)}
.m-service-logo img{max-width:100%;max-height:100%;object-fit:contain}.m-summary-row{padding:12px 0;border-bottom:1px solid #243f70}.m-summary-row:last-child{border-bottom:0;padding-bottom:0}.m-purple{color:#9b57ff}
.m-discount-card{border-color:#7043d8;background:radial-gradient(circle at 0 0,rgba(119,51,231,.16),transparent 34%),#071844}
.m-discount-head{display:flex;gap:10px;align-items:center;padding-bottom:10px;border-bottom:1px solid #273f70}.m-discount-head>span{width:34px;height:34px;border:1px solid #874ee8;border-radius:9px;color:#a75aff;padding:7px}
.m-discount-head b{display:block;color:#d0a9ff;font-size:12px}.m-discount-head small{display:block;color:#8999bd;font-size:10px;margin-top:3px}
.m-disc-line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #263e6d;font-size:11px}.m-disc-line:last-child{border-bottom:0;padding-bottom:0}.m-disc-line>span{display:flex;align-items:center;gap:8px;color:#b5c1df}.m-disc-line i{width:22px;height:17px;color:#9eb0dc}.m-disc-line b{color:#42ec78}
.m-total-card{position:relative}.m-total-line{display:flex;justify-content:space-between;font-size:11px;margin-bottom:9px}.m-total-line.green{color:#43eb78}.m-total-line em{font-style:normal;font-size:9px}.m-total-card hr{border:0;border-top:1px solid #263f70;margin:11px 0}.m-total-label{font-size:12px;font-weight:900}.m-total-card strong{display:block;color:#9b51ff;font-size:31px;margin-top:6px}
.savings-badge{position:absolute;right:-15px;bottom:8px;width:78px;height:78px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;background:linear-gradient(145deg,#8a39e8,#4848bd)!important;box-shadow:0 14px 30px rgba(74,42,172,.35)!important;transform:rotate(-7deg);padding:0!important}
.savings-badge small{font-size:8px}.savings-badge b{font-size:12px}
.m-pay-btn{min-height:58px;border:0;border-radius:8px;color:#fff;font-size:17px;font-weight:900;background:linear-gradient(90deg,#8235ed,#268dff);box-shadow:0 14px 30px rgba(64,92,255,.22);cursor:pointer;transition:.2s}.m-pay-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.m-card-logos{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 8px 5px}.m-card-logos img{height:34px;max-width:98px;object-fit:contain;filter:none}
.m-secure-box{display:flex;gap:10px;align-items:center}.m-secure-box>span{width:32px;height:32px;border:1px solid #536a9a;border-radius:8px;padding:7px;color:#c4d0ea}.m-secure-box b{display:block;font-size:11px}.m-secure-box small{display:block;color:#8999bd;font-size:9px;margin-top:3px}
.m-bottom-benefits{margin-top:22px;border:1px solid #56348d;border-radius:12px;background:linear-gradient(90deg,rgba(50,22,105,.58),rgba(23,29,93,.72));display:grid;grid-template-columns:repeat(4,1fr);padding:18px 20px;gap:16px}
.m-bottom-benefits>div{display:flex;gap:12px;align-items:center}.m-bottom-benefits>div>span{width:40px;height:40px;color:#c58bff;flex:0 0 40px}.m-bottom-benefits p{margin:0}.m-bottom-benefits b{display:block;font-size:12px}.m-bottom-benefits small{display:block;color:#b4bfd8;font-size:10px;line-height:1.35;margin-top:3px}
@media(max-width:1050px){.mock-columns{grid-template-columns:1fr}.mock-summary{grid-template-columns:1fr 1fr}.m-summary-card,.m-discount-card{grid-column:auto}.m-total-card,.m-pay-btn,.m-card-logos,.m-secure-box{grid-column:1/-1}.m-bottom-benefits{grid-template-columns:1fr 1fr}}
@media(max-width:680px){
 .mock-checkout-main{padding:10px 7px 24px!important}.mock-checkout-shell{padding:15px 11px;border-radius:15px}.mock-stepper{margin-bottom:23px}.m-step{width:70px}.m-step span{width:30px;height:30px;font-size:12px}.m-step small{font-size:8px}.mock-stepper>i{margin-top:15px}.mock-form h1{font-size:27px}.mock-subtitle{font-size:12px}.mock-two{grid-template-columns:1fr}.m-card-grid{grid-template-columns:1fr 1fr}.m-card-grid .m-stacked:last-child{grid-column:1/-1}.mock-summary{grid-template-columns:1fr}.m-summary-card,.m-discount-card,.m-total-card,.m-pay-btn,.m-card-logos,.m-secure-box{grid-column:auto}.m-service-logo{width:92px;height:56px}.m-card-logos{gap:5px;padding:8px 0}.m-card-logos img{height:25px;max-width:60px}.m-bottom-benefits{grid-template-columns:1fr;padding:14px}.savings-badge{position:static!important;width:auto!important;height:auto!important;border-radius:8px!important;transform:none!important;padding:7px 10px!important;align-items:flex-start!important;margin-top:10px}
}

/* ===== ENCUADRE FINAL DE LOGOS DE SERVICIOS ===== */
.original-brand-grid .brand-logo-card{
  height:104px!important;
  min-height:104px!important;
  padding:12px 16px!important;
  background:#fff!important;
  border:1px solid #edf0f6!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.original-brand-grid .brand-logo-card img{
  width:100%!important;
  height:100%!important;
  max-width:190px!important;
  max-height:72px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  display:block!important;
}
.m-service-logo{
  width:126px!important;
  height:74px!important;
  padding:8px 12px!important;
  border-radius:12px!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.m-service-logo img{
  width:100%!important;
  height:100%!important;
  max-width:110px!important;
  max-height:56px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
}
@media(max-width:680px){
  .original-brand-grid .brand-logo-card{
    height:86px!important;
    min-height:86px!important;
    padding:9px 11px!important;
  }
  .original-brand-grid .brand-logo-card img{
    max-width:150px!important;
    max-height:58px!important;
  }
  .m-service-logo{
    width:102px!important;
    height:60px!important;
    padding:7px 9px!important;
  }
}


/* ===== PRODUCCIÓN FINAL: LOGOS + VALIDACIÓN VISUAL ===== */
.original-brand-grid .brand-logo-card{
  height:104px!important;
  min-height:104px!important;
  padding:12px 16px!important;
  border-radius:14px!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.original-brand-grid .brand-logo-card img{
  width:100%!important;
  height:100%!important;
  max-width:190px!important;
  max-height:72px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  margin:auto!important;
}
.m-service-logo,.summary-service-row .m-service-logo{
  width:126px!important;
  height:74px!important;
  padding:8px 12px!important;
  border-radius:12px!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.m-service-logo img,.summary-service-row img{
  width:100%!important;
  height:100%!important;
  max-width:110px!important;
  max-height:56px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
}

/* Google-Play-like realtime field feedback */
.live-validation-msg{
  position:absolute;
  left:12px;
  bottom:-18px;
  font-size:10px;
  white-space:nowrap;
}
.live-validation-msg.ok{color:#44e783}
.live-validation-msg.bad{color:#ff6f88}
.field-valid-shell{
  border-color:#2ccf72!important;
  box-shadow:0 0 0 2px rgba(44,207,114,.08)!important;
  overflow:visible!important;
  margin-bottom:17px!important;
}
.field-invalid-shell{
  border-color:#ff5575!important;
  box-shadow:0 0 0 3px rgba(255,85,117,.09)!important;
  overflow:visible!important;
  margin-bottom:17px!important;
}

/* card logos: large, clean, no odd boxes */
.m-card-logos,.accepted-cards{
  display:flex!important;
  align-items:center!important;
  justify-content:space-around!important;
  gap:14px!important;
  padding:12px 6px!important;
}
.m-card-logos img,.accepted-cards img{
  height:38px!important;
  max-width:105px!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.accepted-cards span{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  min-height:auto!important;
  height:auto!important;
}
@media(max-width:680px){
  .original-brand-grid .brand-logo-card{height:86px!important;min-height:86px!important}
  .original-brand-grid .brand-logo-card img{max-width:150px!important;max-height:58px!important}
  .m-service-logo{width:102px!important;height:60px!important}
  .m-card-logos,.accepted-cards{gap:7px!important}
  .m-card-logos img,.accepted-cards img{height:27px!important;max-width:64px!important}
}

/* ===== LOGOS DE SERVICIOS — CORRECCIÓN FINAL ===== */
.original-brand-grid .brand-logo-card,
.m-service-logo{
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.original-brand-grid .brand-logo-card img{
  width:88%!important;
  height:72%!important;
  max-width:210px!important;
  max-height:78px!important;
  object-fit:contain!important;
  object-position:center!important;
}
.m-service-logo{
  width:138px!important;
  height:80px!important;
  padding:10px 12px!important;
  border-radius:13px!important;
}
.m-service-logo img{
  width:100%!important;
  height:100%!important;
  max-width:118px!important;
  max-height:58px!important;
  object-fit:contain!important;
  object-position:center!important;
}
@media(max-width:680px){
  .m-service-logo{width:106px!important;height:62px!important;padding:7px 9px!important}
  .m-service-logo img{max-width:92px!important;max-height:46px!important}
}


/* ===== TEST TELEGRAM SIN DB ===== */
.telegram-test-ribbon{
  max-width:1450px;
  margin:10px auto 0;
  padding:9px 14px;
  text-align:center;
  border:1px solid rgba(113,78,255,.45);
  border-radius:9px;
  background:linear-gradient(90deg,rgba(91,47,183,.25),rgba(18,53,117,.27));
  color:#ccb7ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
}

/* Logos de servicios grandes y bien centrados */
.original-brand-grid .brand-logo-card{
  height:108px!important;
  min-height:108px!important;
  padding:10px 14px!important;
  border-radius:14px!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.original-brand-grid .brand-logo-card img{
  width:auto!important;
  height:auto!important;
  max-width:82%!important;
  max-height:72%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  margin:auto!important;
}
.m-service-logo,
.summary-service-row .m-service-logo{
  width:146px!important;
  height:86px!important;
  padding:8px 10px!important;
  border-radius:14px!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.m-service-logo img,
.summary-service-row img{
  width:auto!important;
  height:auto!important;
  max-width:120px!important;
  max-height:62px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  margin:auto!important;
}
@media(max-width:680px){
  .telegram-test-ribbon{margin:7px 7px 0;font-size:9px}
  .original-brand-grid .brand-logo-card{height:86px!important;min-height:86px!important}
  .m-service-logo{width:108px!important;height:64px!important;padding:6px 8px!important}
  .m-service-logo img{max-width:92px!important;max-height:48px!important}
}

/* ===== RECARGAS INTELIGENTES ===== */
.recharge-smart-page{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 10%,rgba(91,35,203,.20),transparent 28%),linear-gradient(180deg,#030920,#071943);color:#fff}
.recharge-smart-main{max-width:1280px;margin:auto;padding:24px 18px 46px}
.recharge-back{display:inline-block;color:#b8c3de;text-decoration:none;margin:4px 0 14px}
.recharge-smart-shell{border:1px solid #29477c;border-radius:20px;background:linear-gradient(180deg,rgba(7,27,73,.98),rgba(5,19,56,.99));padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.20)}
.recharge-smart-shell.compact{max-width:920px;margin:auto}
.recharge-head{text-align:center}.recharge-kicker{color:#a75cff;font-weight:900;letter-spacing:.8px;font-size:12px}
.recharge-head h1,.recharge-step-head h1{font-size:31px;margin:7px 0}.recharge-head p,.recharge-step-head p{color:#aebbd8;margin:0}
.recharge-brand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.recharge-brand-grid button{min-height:156px;border:1px solid #304d82;border-radius:16px;background:linear-gradient(180deg,#0a2056,#071a49);color:#fff;padding:15px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;align-items:center;justify-content:center}
.recharge-brand-grid button:hover{transform:translateY(-2px);border-color:#8753ff;box-shadow:0 12px 28px rgba(68,45,169,.22)}
.recharge-brand-grid img{width:155px;height:70px;object-fit:contain;background:#fff;border-radius:11px;padding:6px 10px}
.recharge-brand-grid span{font-weight:900;margin-top:12px}.recharge-brand-grid small{color:#92a2c6;margin-top:4px}
.recharge-trust{display:flex;gap:12px;align-items:center;margin-top:24px;padding:14px 16px;border:1px solid #274678;border-radius:12px;background:#071a49}
.recharge-trust>span{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#38e67b;border:1px solid #36c86f}
.recharge-trust b,.recharge-trust small{display:block}.recharge-trust small{color:#94a5c8;margin-top:3px}
.recharge-progress{display:flex;align-items:center;justify-content:center;max-width:620px;margin:0 auto 28px}
.recharge-progress span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#1c356b;color:#8fa3ce;font-weight:900}
.recharge-progress span.on{background:linear-gradient(135deg,#7044ea,#5969ff);color:#fff}
.recharge-progress i{height:2px;background:#3a5582;flex:1;max-width:110px}
.recharge-step-head{display:flex;align-items:center;gap:18px;margin-bottom:24px}.recharge-step-head small{color:#a45bff;font-weight:900}
.selected-recharge-logo{width:145px;height:82px;background:#fff;border-radius:13px;padding:8px;display:grid;place-items:center}
.selected-recharge-logo img{max-width:100%;max-height:100%;object-fit:contain}
.recharge-id-form{max-width:650px;margin:auto}.recharge-id-form>label{display:block;font-weight:800;margin-bottom:8px}
.smart-id-wrap{display:flex;align-items:center;border:1px solid #385487;border-radius:11px;background:#071b4b;min-height:58px;overflow:hidden}
.smart-id-wrap.valid{border-color:#2bcf72;box-shadow:0 0 0 3px rgba(43,207,114,.08)}.smart-id-wrap.invalid{border-color:#ff5575}
.smart-id-wrap>span:first-child{padding-left:15px;color:#c6d1ea;font-weight:700}
.smart-id-wrap input{flex:1;min-height:58px;border:0;background:transparent;color:#fff;padding:0 15px;font-size:17px;outline:0}
.valid-mark{opacity:0;color:#34e27b;font-weight:900;padding-right:16px}.valid-mark.show{opacity:1}
.identifier-help{color:#8fa1c4;font-size:12px}.identifier-error{background:rgba(255,72,103,.09);border:1px solid rgba(255,72,103,.42);color:#ff8ba0;padding:10px 12px;border-radius:9px;margin:10px 0}
.smart-card-preview{margin:15px 0;border:1px solid #3b5688;border-radius:17px;padding:19px 22px;background:linear-gradient(135deg,#10265d,#0a1640);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.smart-card-preview span{font-weight:900;color:#9cc5ff}.smart-card-preview strong{display:block;font-size:24px;letter-spacing:3px;margin:23px 0 13px}.smart-card-preview small{color:#8294ba}
.recharge-primary{width:100%;min-height:54px;border:0;border-radius:9px;margin-top:18px;background:linear-gradient(90deg,#8536ef,#268dff);color:#fff;font-weight:900;font-size:16px;cursor:pointer}
.recharge-primary:disabled{opacity:.42;cursor:not-allowed}
.amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0}
.amount-grid button{min-height:58px;border:1px solid #355184;border-radius:10px;background:#071b4b;color:#fff;font-weight:900;cursor:pointer}
.amount-grid button.selected{border-color:#b04fff;background:linear-gradient(135deg,#43207f,#122456);box-shadow:0 0 0 2px rgba(176,79,255,.10)}
.custom-amount-box{display:flex;align-items:center;border:1px solid #355184;border-radius:10px;background:#071b4b;margin-bottom:15px;padding:0 14px}
.custom-amount-box input{flex:1;background:transparent;border:0;outline:0;color:#fff;min-height:52px;font-size:17px;padding:0 10px}
.recharge-mini-summary{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #2d4778;border-radius:12px;background:#071a49;padding:15px;gap:12px}
.recharge-mini-summary span,.recharge-verify-card span{display:block;color:#8496bb;font-size:10px;margin-bottom:5px}.recharge-mini-summary b{font-size:13px}
.recharge-verify-card{border:1px solid #2d4778;border-radius:13px;background:#071a49;padding:18px}
.recharge-verify-card>div{padding:13px 0;border-bottom:1px solid #263f70}.recharge-verify-card>div:last-child{border-bottom:0}
.recharge-verify-card b{font-size:17px}.recharge-verify-card .purple{color:#9c55ff}
@media(max-width:760px){
  .recharge-smart-main{padding:12px 8px 28px}.recharge-smart-shell{padding:18px 12px;border-radius:15px}
  .recharge-brand-grid{grid-template-columns:1fr 1fr;gap:9px}.recharge-brand-grid button{min-height:126px}.recharge-brand-grid img{width:120px;height:56px}
  .recharge-step-head{align-items:flex-start}.selected-recharge-logo{width:105px;height:63px;flex:0 0 105px}.recharge-step-head h1{font-size:23px}
  .amount-grid{grid-template-columns:1fr 1fr}.recharge-mini-summary{grid-template-columns:1fr}.smart-card-preview strong{font-size:18px;letter-spacing:2px}
  .recharge-progress span{width:29px;height:29px;font-size:11px}.recharge-progress i{max-width:55px}
}


/* ===== RECARGAS PROMOS + LOGOS GRANDES — FINAL ===== */
.recharge-brand-card{position:relative!important;justify-content:flex-start!important;padding:18px 14px 15px!important;min-height:250px!important}
.recharge-brand-card img{width:88%!important;height:92px!important;max-width:235px!important;object-fit:contain!important;padding:8px 12px!important;background:#fff!important;border-radius:14px!important;image-rendering:auto!important}
.recharge-brand-card>span{font-size:18px!important;margin-top:12px!important}.recharge-brand-card>small{font-size:12px!important}
.promo-chip{width:100%;box-sizing:border-box;margin-top:14px;padding:12px 10px;border:1px solid rgba(146,91,255,.45);border-radius:12px;background:linear-gradient(145deg,rgba(78,29,150,.78),rgba(26,24,92,.92));display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.promo-chip b{color:#ffd331;font-size:14px}.promo-chip em{font-style:normal;color:#fff;font-size:12px}.promo-chip i{font-style:normal;color:#aebcff;font-size:10px}
.recharge-benefit-banner{display:flex;align-items:center;gap:16px;margin-top:22px;padding:18px 20px;border:1px solid rgba(139,85,255,.45);border-radius:15px;background:linear-gradient(90deg,rgba(82,29,146,.55),rgba(19,35,100,.88));box-shadow:0 16px 32px rgba(0,0,0,.15)}
.recharge-benefit-banner .benefit-gift{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border:1px solid #ffb10a;border-radius:13px;color:#ffbd17;font-size:25px}.recharge-benefit-banner b,.recharge-benefit-banner small{display:block}.recharge-benefit-banner b{font-size:17px}.recharge-benefit-banner small{color:#b6c2df;margin-top:4px}
.promo-amount-grid button{min-height:92px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px!important}.amount-main{font-size:17px;font-weight:900}.promo-locked{color:#ffb816!important;font-size:10px!important}.amount-promo{display:inline-flex;padding:5px 9px;border-radius:999px;background:linear-gradient(135deg,#20af57,#37d36d);color:#fff;font-size:10px;font-weight:900;box-shadow:0 5px 14px rgba(22,184,87,.22)}.promo-eligible small{font-size:10px;color:#c0cbed}.promo-eligible.selected{border-color:#7e52ff!important;box-shadow:0 0 0 2px rgba(126,82,255,.2),0 10px 25px rgba(60,33,160,.18)!important}.custom-amount-trigger{grid-column:auto}.verify-promo{background:rgba(29,173,81,.07);border-radius:9px;padding-left:12px!important;padding-right:12px!important}.verify-promo span{color:#45d981!important}.verify-promo b{color:#37e874!important}.verify-promo small{display:block;color:#a7b8d7;margin-top:4px}
.checkout-recharge-promo{margin-top:10px;padding:10px 12px;border:1px solid rgba(36,201,93,.3);border-radius:9px;background:rgba(23,154,70,.08)}.checkout-recharge-promo span,.checkout-recharge-promo small{display:block}.checkout-recharge-promo span{font-size:10px;color:#63d98f}.checkout-recharge-promo b{display:block;color:#40eb7d;margin:3px 0}.checkout-recharge-promo small{font-size:10px;color:#9db0d3}
/* Checkout service logos: same large framing used in Pagos de servicios */
.m-service-logo{width:164px!important;height:96px!important;padding:8px 12px!important;border-radius:15px!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
.m-service-logo img{width:auto!important;height:auto!important;max-width:140px!important;max-height:72px!important;object-fit:contain!important;object-position:center!important;margin:auto!important;transform:none!important}
/* Keep card/network logos clean and legible */
.m-card-logos{gap:18px!important;justify-content:space-around!important}.m-card-logos img{height:36px!important;max-width:100px!important;width:auto!important;object-fit:contain!important;background:transparent!important;border:0!important;box-shadow:none!important}
@media(max-width:900px){.recharge-brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.recharge-brand-card{min-height:235px!important}.recharge-brand-card img{height:82px!important}.promo-amount-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.m-service-logo{width:132px!important;height:78px!important}.m-service-logo img{max-width:112px!important;max-height:58px!important}}
@media(max-width:560px){.recharge-smart-main{padding-left:8px!important;padding-right:8px!important}.recharge-smart-shell{padding:16px 10px!important}.recharge-brand-grid{grid-template-columns:1fr!important}.recharge-brand-card{min-height:auto!important;padding:14px!important;display:grid!important;grid-template-columns:112px 1fr!important;grid-template-areas:'logo title' 'logo type' 'promo promo'!important;text-align:left!important;column-gap:12px!important}.recharge-brand-card img{grid-area:logo!important;width:112px!important;height:72px!important;padding:7px!important}.recharge-brand-card>span{grid-area:title!important;align-self:end!important;margin:0!important;font-size:17px!important}.recharge-brand-card>small{grid-area:type!important;align-self:start!important}.recharge-brand-card .promo-chip{grid-area:promo!important;margin-top:10px!important;text-align:center!important}.recharge-benefit-banner{padding:14px!important}.promo-amount-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.promo-amount-grid button{min-height:86px!important}.m-service-logo{width:110px!important;height:68px!important;padding:6px 8px!important}.m-service-logo img{max-width:94px!important;max-height:50px!important}.m-card-logos{gap:7px!important;flex-wrap:wrap!important}.m-card-logos img{height:29px!important;max-width:68px!important}.mock-checkout-shell,.m-summary-card,.m-discount-card,.m-total-card{min-width:0!important;overflow:visible!important}}


/* =========================================================
   RECARGAS - TARJETAS Y RECUADROS DE LOGOS UNIFORMES
========================================================= */

.recharge-brand-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
}


/* =========================================================
   TARJETAS - TODAS MISMA ALTURA
========================================================= */

.recharge-brand-grid button {
    width: 100% !important;
    height: 335px !important;
    min-height: 335px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    box-sizing: border-box !important;
    overflow: visible !important;
}


/* =========================================================
   RECUADRO BLANCO DEL LOGO
   TODOS EXACTAMENTE IGUALES
========================================================= */

.recharge-brand-grid button > img {

    width: calc(100% - 36px) !important;
    max-width: 330px !important;

    height: 132px !important;
    max-height: 132px !important;

    min-height: 132px !important;

    object-fit: contain !important;
    object-position: center !important;

    background: #ffffff !important;

    border-radius: 16px !important;

    padding: 18px 26px !important;

    margin: 0 auto 10px auto !important;

    box-sizing: border-box !important;

    display: block !important;

    transform: none !important;
}


/* =========================================================
   ELIMINAR AJUSTES INDIVIDUALES ANTERIORES
========================================================= */

.recharge-brand-grid .brand-claro img,
.recharge-brand-grid .brand-movistar img,
.recharge-brand-grid .brand-tuenti img {

    width: calc(100% - 36px) !important;
    max-width: 330px !important;

    height: 132px !important;
    max-height: 132px !important;

    padding: 18px 26px !important;

    transform: none !important;
}


/* =========================================================
   NOMBRE DEL SERVICIO
========================================================= */

.recharge-brand-grid button > span {

    min-height: 34px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}


/* =========================================================
   SUBTÍTULO
========================================================= */

.recharge-brand-grid button > small {

    min-height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
}


/* =========================================================
   PROMOCIÓN - TODAS ALINEADAS ABAJO
========================================================= */

.recharge-brand-grid .promo-chip {

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

    height: 94px !important;
    min-height: 94px !important;

    margin-top: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}


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

@media (max-width: 1050px) {

    .recharge-brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 680px) {

    .recharge-brand-grid {
        grid-template-columns: 1fr !important;
    }

    .recharge-brand-grid button {
        height: 325px !important;
        min-height: 325px !important;
    }

    .recharge-brand-grid button > img,
    .recharge-brand-grid .brand-claro img,
    .recharge-brand-grid .brand-movistar img,
    .recharge-brand-grid .brand-tuenti img {

        width: calc(100% - 32px) !important;
        max-width: 330px !important;

        height: 125px !important;
        max-height: 125px !important;
        min-height: 125px !important;

        transform: none !important;
    }

}

/* Checkout service logo box: larger and clearer */
.m-service-logo,
.summary-service-row .m-service-logo{
  width: 170px !important;
  height: 96px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.m-service-logo img,
.summary-service-row .m-service-logo img,
.summary-service-row img{
  width: 100% !important;
  height: 100% !important;
  max-width: 145px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: auto !important;
}

/* Extra boost in checkout for logos with internal whitespace */
.summary-service-row img[src*="claro"],
.m-service-logo img[src*="claro"]{
  transform: scale(1.22);
}
.summary-service-row img[src*="movistar"],
.m-service-logo img[src*="movistar"]{
  transform: scale(1.28);
}
.summary-service-row img[src*="tuenti"],
.m-service-logo img[src*="tuenti"]{
  transform: scale(1.18);
}

/* Remove any leftover bottom promo block */
.recharge-promo-banner,
.recharge-benefit-banner,
.recharge-bottom-promo{
  display: none !important;
}

@media (max-width: 900px){
  .recharge-brand-grid button img{
    height: 74px !important;
    max-height: 74px !important;
    width: 82% !important;
  }
  .m-service-logo,
  .summary-service-row .m-service-logo{
    width: 138px !important;
    height: 78px !important;
  }
  .m-service-logo img,
  .summary-service-row .m-service-logo img,
  .summary-service-row img{
    max-width: 118px !important;
    max-height: 58px !important;
  }
}

@media (max-width: 640px){
  .recharge-brand-grid{
    grid-template-columns: 1fr !important;
  }
  .recharge-brand-grid button{
    min-height: 210px !important;
  }
  .recharge-brand-grid button img{
    width: 88% !important;
    height: 82px !important;
    max-width: 250px !important;
    max-height: 82px !important;
  }
  .m-service-logo,
  .summary-service-row .m-service-logo{
    width: 124px !important;
    height: 72px !important;
  }
}


/* ===== ESTACIONAMIENTO MEDIDO — TARIFA AUTOMÁTICA ===== */
.parking-sign{
  display:grid!important;
  place-items:center!important;
  width:76px!important;
  height:76px!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:0 10px 28px rgba(22,119,255,.22);
}
.parking-sign svg{
  width:76px;
  height:76px;
  display:block;
}

.hours button{
  min-height:74px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}
.hours button span{
  font-size:15px;
  font-weight:900;
}
.hours button small{
  font-size:11px;
  color:#8ea7d6;
  font-weight:800;
}
.hours button.selected small{
  color:#d9ecff;
}

.parking-price-box{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:18px 20px;
  border:1px solid rgba(91,99,255,.55);
  border-radius:14px;
  background:
    radial-gradient(circle at 90% 10%,rgba(50,132,255,.17),transparent 33%),
    linear-gradient(135deg,rgba(62,37,158,.48),rgba(12,39,93,.78));
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}
.parking-price-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,#8340f4,#248cff);
  box-shadow:0 8px 20px rgba(91,74,255,.30);
}
.parking-price-icon svg{width:28px;height:28px}
.parking-price-copy span,
.parking-price-total span{
  display:block;
  color:#8ea7d6;
  font-size:11px;
  margin-bottom:3px;
}
.parking-price-copy strong{
  display:block;
  color:#fff;
  font-size:17px;
}
.parking-price-copy small{
  display:block;
  color:#91a8d3;
  font-size:11px;
  margin-top:4px;
}
.parking-price-total{
  text-align:right;
  min-width:120px;
}
.parking-price-total strong{
  display:block;
  color:#51e58c;
  font-size:28px;
  letter-spacing:-.5px;
}

@media(max-width:760px){
  .parking-sign,
  .parking-sign svg{width:62px!important;height:62px!important}
  .parking-price-box{
    grid-template-columns:auto 1fr;
    padding:15px;
  }
  .parking-price-total{
    grid-column:1 / -1;
    text-align:left;
    padding-top:11px;
    border-top:1px solid rgba(105,133,192,.25);
  }
  .parking-price-total strong{font-size:24px}
  .hours{
    grid-template-columns:repeat(2,1fr)!important;
  }
}


/* ===== ESTACIONAMIENTO FINAL / CONFIRMACIÓN MODERNA ===== */
.parking-confirm-page{
  margin:0;
  min-height:100vh;
  color:#fff;
  background:
    radial-gradient(circle at 0 20%,rgba(94,39,173,.24),transparent 33%),
    linear-gradient(180deg,#05102d,#071a43);
}
.parking-confirm-main{
  max-width:1450px;
  margin:auto;
  padding:34px 24px 48px;
}
.parking-confirm-back{
  display:inline-flex;
  color:#d7deef;
  text-decoration:none;
  font-weight:800;
  margin-bottom:24px;
}
.parking-confirm-shell{
  border:1px solid #29477c;
  border-radius:22px;
  background:linear-gradient(135deg,rgba(8,32,77,.98),rgba(15,18,76,.98));
  padding:30px;
  box-shadow:0 30px 80px rgba(0,0,0,.24);
}
.parking-confirm-progress{
  max-width:980px;
  margin:0 auto 38px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.pc-step{
  min-width:130px;
  text-align:center;
  color:#8799bf;
}
.pc-step span{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 auto 10px;
  border:1px solid #445d8b;
  background:#091d4c;
  font-weight:900;
}
.pc-step small{
  font-size:11px;
  display:block;
}
.pc-step.done span,
.pc-step.active span{
  color:#fff;
  background:linear-gradient(135deg,#8241ef,#5969ff);
  border-color:#8758ff;
}
.pc-step.active small{
  color:#fff;
  font-weight:900;
}
.parking-confirm-progress i{
  flex:1;
  max-width:180px;
  height:2px;
  background:#3f5783;
  margin-top:20px;
}
.parking-confirm-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(330px,.85fr);
  gap:24px;
}
.parking-confirm-card{
  border:1px solid #2f4d82;
  border-radius:18px;
  background:linear-gradient(180deg,#081d4d,#061942);
  padding:26px;
}
.parking-confirm-title{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-bottom:24px;
}
.confirm-check{
  width:60px;
  height:60px;
  flex:0 0 60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:32px;
  font-weight:900;
  background:linear-gradient(135deg,#9040f2,#5b67ff);
  box-shadow:0 12px 28px rgba(101,64,227,.3);
}
.parking-confirm-title span{
  color:#bf73ff;
  font-weight:900;
  letter-spacing:.7px;
  font-size:11px;
}
.parking-confirm-title h1{
  margin:5px 0 4px;
  font-size:32px;
}
.parking-confirm-title p{
  margin:0;
  color:#afbddb;
}
.parking-data-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
}
.parking-data-item{
  min-height:78px;
  display:flex;
  gap:13px;
  align-items:center;
  padding:13px 15px;
  border:1px solid #2b4c84;
  border-radius:12px;
  background:#071a48;
}
.parking-data-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  color:#a953ff;
  font-size:20px;
  border-radius:9px;
  background:rgba(102,48,183,.16);
}
.parking-data-item span{
  display:block;
  color:#8da2cc;
  font-size:10px;
  margin-bottom:3px;
}
.parking-data-item strong{
  font-size:15px;
}
.parking-total-strip{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:18px;
  align-items:center;
  padding:15px 18px;
  margin-top:12px;
  border:1px solid #7c3dd8;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(75,36,148,.58),rgba(27,33,111,.68));
}
.parking-total-strip span{
  display:block;
  color:#aebde0;
  font-size:11px;
  margin-bottom:4px;
}
.parking-total-strip strong{
  font-size:20px;
}
.parking-total-strip>div:last-child{
  text-align:right;
}
.parking-total-strip>div:last-child strong{
  color:#a15cff;
  font-size:27px;
}
.parking-total-strip-divider{
  width:1px;
  height:44px;
  background:#435686;
}
.parking-checkout-info{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:11px;
  padding:11px 13px;
  border:1px solid #2f4d82;
  border-radius:10px;
  background:#071a48;
  color:#a9b8d8;
}
.parking-checkout-info p{margin:0;font-size:11px}
.parking-checkout-btn{
  width:100%;
  min-height:54px;
  margin-top:12px;
  border:0;
  border-radius:9px;
  color:#fff;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(90deg,#8b35ef,#1688ff);
  box-shadow:0 10px 28px rgba(39,86,221,.22);
}
.parking-checkout-btn span{
  padding-left:8px;
}
.parking-confirm-card.summary h2{
  font-size:19px;
  margin:0 0 22px;
}
.parking-summary-service{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:20px;
  border-bottom:1px solid #274375;
}
.parking-e-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#30ee7f;
  font-size:27px;
  font-weight:900;
  border:1px solid #1eda6b;
  background:#07352d;
  box-shadow:0 7px 22px rgba(30,218,107,.14);
}
.parking-summary-service strong,
.parking-summary-service span{
  display:block;
}
.parking-summary-service span{
  color:#9cafd1;
  font-size:11px;
  margin-top:3px;
}
.parking-summary-lines{
  padding:12px 0;
}
.parking-summary-lines>div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #243f6e;
}
.parking-summary-lines span{
  color:#a9b8d7;
}
.parking-summary-total strong{
  color:#35e57c;
  font-size:25px;
}
.parking-security-box{
  display:flex;
  gap:12px;
  padding:15px;
  margin-top:8px;
  border:1px solid #137544;
  border-radius:12px;
  background:rgba(9,72,53,.14);
}
.parking-lock{
  width:40px;
  height:40px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid #21bf66;
}
.parking-security-box strong,
.parking-security-box span{
  display:block;
}
.parking-security-box span{
  margin-top:3px;
  color:#98abc9;
  font-size:10px;
}
.parking-summary-question{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid #263e6b;
  text-align:center;
}
.parking-summary-question strong,
.parking-summary-question span{
  display:block;
}
.parking-summary-question span{
  margin-top:5px;
  color:#a1b2d0;
  font-size:11px;
  line-height:1.5;
}

@media(max-width:900px){
  .parking-confirm-main{padding:18px 10px 34px}
  .parking-confirm-shell{padding:18px 12px}
  .parking-confirm-grid{grid-template-columns:1fr}
  .parking-confirm-card.summary{order:2}
  .parking-confirm-progress{overflow-x:auto;justify-content:flex-start;padding-bottom:4px}
  .pc-step{min-width:100px}
  .parking-confirm-progress i{min-width:44px}
}
@media(max-width:620px){
  .parking-confirm-title h1{font-size:25px}
  .parking-confirm-title{gap:12px}
  .confirm-check{width:48px;height:48px;flex-basis:48px;font-size:25px}
  .parking-data-grid{grid-template-columns:1fr}
  .parking-total-strip{grid-template-columns:1fr}
  .parking-total-strip-divider{display:none}
  .parking-total-strip>div:last-child{text-align:left;border-top:1px solid #415482;padding-top:10px}
  .parking-confirm-card{padding:16px}
}

/* Validación de patente argentina */
#patente.input-error{border-color:#ff4d6d!important;box-shadow:0 0 0 3px rgba(255,77,109,.12)!important;}
.parking-field-error{margin-top:7px;color:#ff718b;font-size:13px;font-weight:700;line-height:1.35;}


/* ===== COMPROBANTE TEMPORAL / OPERACIÓN REGISTRADA ===== */
.receipt-page{
  margin:0;
  min-height:100vh;
  color:#fff;
  background:
    radial-gradient(circle at 82% 6%,rgba(102,38,191,.24),transparent 30%),
    linear-gradient(180deg,#030a22,#071a43);
}
.receipt-main{
  width:min(900px,calc(100% - 28px));
  margin:0 auto;
  padding:54px 0 70px;
}
.receipt-card{
  border:1px solid #2b4b7e;
  border-radius:24px;
  background:linear-gradient(180deg,#081d4d,#06173e);
  padding:40px;
  box-shadow:0 30px 90px rgba(0,0,0,.28);
}
.receipt-success-ring{
  width:82px;
  height:82px;
  border-radius:50%;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#26c978,#2d92ff);
  box-shadow:0 0 0 10px rgba(38,201,120,.08),0 16px 40px rgba(35,177,124,.22);
}
.receipt-success-ring span{font-size:43px;font-weight:900}
.receipt-kicker{
  margin:0;
  text-align:center;
  color:#62e19c;
  font-weight:900;
  font-size:11px;
  letter-spacing:1px;
}
.receipt-card>h1{
  text-align:center;
  margin:8px 0 7px;
  font-size:34px;
}
.receipt-subtitle{
  max-width:650px;
  margin:0 auto 28px;
  text-align:center;
  color:#a7b8d8;
  line-height:1.55;
}
.receipt-ticket{
  border:1px solid #315186;
  border-radius:18px;
  background:#071946;
  overflow:hidden;
}
.receipt-ticket-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  border-bottom:1px solid #284575;
}
.receipt-ticket-head small,
.receipt-service small,
.receipt-grid small{
  display:block;
  color:#8fa4ca;
  font-size:10px;
  margin-bottom:4px;
}
.receipt-ticket-head strong{font-size:18px}
.receipt-status{
  padding:7px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  color:#ffd36a;
  background:rgba(255,184,45,.12);
  border:1px solid rgba(255,184,45,.28);
}
.receipt-service{
  display:flex;
  align-items:center;
  gap:15px;
  padding:20px;
  border-bottom:1px solid #284575;
}
.receipt-service-logo{
  width:135px;
  height:76px;
  border-radius:12px;
  background:#fff;
  display:grid;
  place-items:center;
  padding:9px;
}
.receipt-service-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.receipt-service strong,.receipt-service span{display:block}
.receipt-service strong{font-size:18px}
.receipt-service span{color:#a2b3d1;font-size:12px;margin-top:4px}
.receipt-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
}
.receipt-grid>div{
  padding:18px 20px;
  border-bottom:1px solid #243f6e;
}
.receipt-grid>div:nth-child(odd){border-right:1px solid #243f6e}
.receipt-grid strong{font-size:16px}
.receipt-grid .receipt-total strong{color:#46e48d;font-size:23px}
.receipt-info{
  display:flex;
  gap:11px;
  margin-top:16px;
  padding:14px 16px;
  border:1px solid #30517f;
  border-radius:12px;
  background:#071b49;
  color:#a8b8d5;
}
.receipt-info p{margin:0;font-size:11px;line-height:1.5}
.receipt-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin-top:18px;
}
.receipt-actions a,.receipt-actions button{
  min-height:52px;
  border-radius:10px;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}
.receipt-primary{
  color:#fff;
  background:linear-gradient(90deg,#8739ec,#278dff);
}
.receipt-secondary{
  color:#fff;
  border:1px solid #3a5684;
  background:#091d4c;
}
@media(max-width:650px){
  .receipt-main{padding:22px 0 38px}
  .receipt-card{padding:22px 14px;border-radius:18px}
  .receipt-card>h1{font-size:27px}
  .receipt-ticket-head{align-items:flex-start;flex-direction:column}
  .receipt-grid{grid-template-columns:1fr}
  .receipt-grid>div:nth-child(odd){border-right:0}
  .receipt-service-logo{width:112px;height:65px}
  .receipt-actions{grid-template-columns:1fr}
}
@media print{
  .approved-topbar,.receipt-actions{display:none!important}
  .receipt-page{background:#fff!important;color:#000!important}
  .receipt-card{box-shadow:none!important;background:#fff!important;color:#000!important}
}

/* =========================================
   LOGOS DE SERVICIOS MÁS GRANDES
========================================= */

/* Checkout */
.m-service-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.m-service-logo img,
#summaryServiceLogo {
    width: 100%;
    height: 100%;
    max-width: 190px;
    max-height: 110px;
    object-fit: contain;
    transform: scale(1.55);
    transform-origin: center;
}


/* Pantalla de datos de recarga */
.selected-recharge-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.selected-recharge-logo img,
#selectedRechargeLogo {
    width: 100%;
    height: 100%;
    max-width: 190px;
    max-height: 110px;
    object-fit: contain;
    transform: scale(1.55);
    transform-origin: center;
}


/* Tarjetas de selección de recarga */
.recharge-brand-card img,
.brand-card img {
    width: 100%;
    height: 100%;
    max-width: 220px;
    max-height: 120px;
    object-fit: contain;
    transform: scale(1.40);
    transform-origin: center;
}


/* Comprobante */
#receiptLogoWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#receiptLogo {
    width: 100%;
    height: 100%;
    max-width: 190px;
    max-height: 110px;
    object-fit: contain;
    transform: scale(1.55);
    transform-origin: center;
}


/* Responsive */
@media (max-width: 768px) {

    .m-service-logo img,
    #summaryServiceLogo,
    .selected-recharge-logo img,
    #selectedRechargeLogo,
    #receiptLogo {
        transform: scale(1.35);
    }

    .recharge-brand-card img,
    .brand-card img {
        transform: scale(1.25);
    }
}

/* =========================================
   RECARGAS - TARJETAS TODAS DEL MISMO TAMAÑO
========================================= */

.recharge-brand-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}


/* TARJETA GENERAL */
.recharge-brand-grid > button,
.recharge-brand-card,
.brand-card {
    width: 100%;
    min-height: 335px;
    height: 335px;

    display: flex;
    flex-direction: column;
    align-items: center;

    box-sizing: border-box;
}


/* ZONA DEL LOGO */
.recharge-brand-grid > button img,
.recharge-brand-card img,
.brand-card img {
    width: 100%;
    height: 132px;

    max-width: 100%;
    max-height: 132px;

    object-fit: contain;

    margin: 0 auto 10px;
}


/* NOMBRE DEL SERVICIO */
.recharge-brand-grid > button > span,
.recharge-brand-card > span,
.brand-card > span {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


/* SUBTÍTULO */
.recharge-brand-grid > button > small,
.recharge-brand-card > small,
.brand-card > small {
    min-height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


/* PROMOCIÓN SIEMPRE ABAJO */
.recharge-brand-grid .promo-chip {
    width: calc(100% - 24px);

    min-height: 94px;

    margin-top: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}


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

@media (max-width: 1050px) {

    .recharge-brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 680px) {

    .recharge-brand-grid {
        grid-template-columns: 1fr;
    }

    .recharge-brand-grid > button,
    .recharge-brand-card,
    .brand-card {
        height: 320px;
        min-height: 320px;
    }

}

/* ===== PAGOTODO HERO PREMIUM PHONE ===== */
.premium-phone-zone{
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.premium-phone-art{
  display:block;
  width:min(100%,520px);
  height:auto;
  max-height:500px;
  object-fit:contain;
  filter:drop-shadow(0 28px 38px rgba(0,0,0,.32));
}
@media(max-width:900px){
  .premium-phone-art{width:min(100%,470px);max-height:460px}
}
@media(max-width:720px){
  .premium-phone-zone{min-height:350px;margin-top:-10px}
  .premium-phone-art{width:min(100%,390px);max-height:370px}
}
@media(max-width:430px){
  .premium-phone-zone{min-height:310px}
  .premium-phone-art{width:min(100%,340px);max-height:330px}
}


/* ==========================================================
   PAGOTODO - HERO FINAL 2026-08-19
   Desktop: fondo continuo + texto/telefono mas unidos.
   Mobile: flyer primero, texto despues.
   Promo: billetera contenida, sin invadir el texto.
========================================================== */
.approved-hero{
  grid-template-columns:minmax(430px,.88fr) minmax(480px,1.12fr) !important;
  gap:0 !important;
  min-height:650px !important;
  padding:34px clamp(34px,6.2vw,118px) 44px !important;
  background:
    linear-gradient(90deg,rgba(3,10,42,.98) 0%,rgba(4,16,67,.96) 43%,rgba(8,20,91,.74) 63%,rgba(15,17,105,.38) 100%),
    radial-gradient(circle at 73% 48%,rgba(105,38,230,.30),transparent 32%),
    #050d35 !important;
}
.approved-hero-copy{z-index:3;transform:translateX(clamp(0px,1vw,14px))}
.approved-hero-copy h1{max-width:610px !important}
.premium-phone-zone{
  min-height:560px !important;
  justify-content:flex-start !important;
  margin-left:-48px !important;
  overflow:visible !important;
  position:relative;
}
.premium-phone-zone::before{
  content:"";position:absolute;inset:2% -7% 1% -11%;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 55% 50%,rgba(43,32,177,.15),rgba(5,13,53,.52) 74%,#050d35 100%);
  filter:blur(3px);
}
.premium-phone-art{
  position:relative;z-index:2;
  width:min(100%,590px) !important;
  max-height:570px !important;
  object-fit:contain;
  /* Suaviza el borde rectangular del JPG/WebP contra el mismo azul del hero */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 5%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%);
  filter:drop-shadow(0 30px 42px rgba(0,0,0,.26));
}

/* Promo: reserva una columna real para el dibujo */
.approved-promo{grid-template-columns:160px minmax(0,1fr) 90px !important;column-gap:24px !important;overflow:hidden}
.promo-visual{width:150px;height:112px;overflow:visible;justify-self:center;position:relative}
.wallet-shape{width:140px !important;height:102px !important;transform:none !important;transform-origin:center !important}
.approved-promo-copy{position:relative;z-index:3;min-width:0;padding-left:4px}

@media (max-width:900px) and (min-width:721px){
  .approved-hero{grid-template-columns:.95fr 1.05fr !important;padding-left:28px !important;padding-right:28px !important}
  .premium-phone-zone{margin-left:-28px !important}
  .premium-phone-art{width:min(100%,520px) !important;max-height:510px !important}
}

@media(max-width:720px){
  .approved-hero{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    padding:8px 18px 28px !important;
    background:
      linear-gradient(180deg,#050c31 0%,#071545 52%,#071642 100%) !important;
  }
  .premium-phone-zone{
    order:1 !important;
    width:calc(100% + 36px) !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 -18px 2px !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  .premium-phone-zone::before{inset:0;background:linear-gradient(180deg,rgba(5,12,49,.06),rgba(7,21,69,.52) 86%,#071545 100%);z-index:3}
  .premium-phone-art{
    width:100% !important;
    max-width:500px !important;
    max-height:none !important;
    height:auto !important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);
  }
  .approved-hero-copy{order:2 !important;transform:none !important;width:100%}
  .approved-hero-copy h1{font-size:clamp(43px,11.8vw,57px) !important;line-height:1.02 !important;margin:0 14px 26px !important;max-width:none !important}
  .approved-hero-actions{margin:0 14px}

  .approved-promo{
    grid-template-columns:112px minmax(0,1fr) !important;
    gap:8px !important;
    padding:16px 14px !important;
  }
  .promo-visual{width:108px;height:105px;justify-self:start;overflow:visible}
  .wallet-shape{transform:scale(.72) !important;transform-origin:left center !important;width:140px !important}
  .approved-promo-copy{padding-left:0 !important}
}

@media(max-width:430px){
  .approved-hero{padding-left:0 !important;padding-right:0 !important}
  .premium-phone-zone{width:100% !important;margin:0 !important}
  .premium-phone-art{max-width:430px !important}
  .approved-hero-copy{padding:0 18px}
  .approved-hero-copy h1{margin-left:14px !important;margin-right:8px !important}
  .approved-hero-actions{margin-left:14px !important;margin-right:14px !important}
  .approved-promo{grid-template-columns:104px minmax(0,1fr) !important}
  .promo-visual{width:100px}
  .wallet-shape{transform:scale(.66) !important}
  .approved-promo-copy h3{font-size:20px !important;line-height:1.08}
  .approved-promo-copy p{font-size:15px !important;line-height:1.25}
}


/* ==========================================================
   PAGOTODO - HERO COMPACTO + FONDO UNIFICADO v5
   Ajuste final: tipografia mas compacta y fondo azul/neon
   extendido por todo el hero, con lluvia luminosa sutil.
========================================================== */
@media (min-width:721px){
  .approved-hero{
    grid-template-columns:minmax(390px,.92fr) minmax(470px,1.08fr) !important;
    min-height:610px !important;
    padding:30px clamp(42px,6vw,110px) 38px !important;
    column-gap:0 !important;
    background:
      radial-gradient(circle at 67% 46%,rgba(34,87,255,.23),transparent 25%),
      radial-gradient(circle at 78% 49%,rgba(157,46,255,.24),transparent 30%),
      linear-gradient(90deg,#041037 0%,#06154a 42%,#0b1763 72%,#17116e 100%) !important;
  }
  .approved-hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:.34;
    background:
      repeating-linear-gradient(132deg,
        transparent 0 92px,
        rgba(72,111,255,.12) 93px 95px,
        transparent 96px 160px),
      repeating-linear-gradient(132deg,
        transparent 0 155px,
        rgba(205,55,255,.10) 156px 158px,
        transparent 159px 248px);
    mask-image:linear-gradient(90deg,transparent 4%,#000 25%,#000 100%);
  }
  .approved-hero-copy,
  .premium-phone-zone{position:relative;z-index:2}

  .approved-hero-copy{transform:translateX(8px) !important}
  .approved-hero-copy h1{
    font-size:clamp(46px,4.25vw,64px) !important;
    line-height:1.01 !important;
    letter-spacing:-1.6px !important;
    margin-bottom:24px !important;
    max-width:560px !important;
  }
  .approved-hero-actions{gap:14px !important}
  .approved-primary,.approved-secondary{
    min-width:188px !important;
    height:54px !important;
    font-size:16px !important;
  }

  .premium-phone-zone{
    min-height:525px !important;
    margin-left:-82px !important;
    justify-content:flex-start !important;
  }
  .premium-phone-zone::before{
    inset:-2% -14% -2% -18% !important;
    background:
      radial-gradient(ellipse at 48% 50%,rgba(74,38,218,.18),transparent 56%),
      linear-gradient(90deg,rgba(6,21,74,.06),rgba(9,23,98,.22),rgba(17,17,110,.10)) !important;
    filter:blur(10px) !important;
  }
  .premium-phone-art{
    width:min(100%,560px) !important;
    max-height:545px !important;
    -webkit-mask-image:
      linear-gradient(to right,transparent 0,#000 11%,#000 91%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 4%,#000 95%,transparent 100%) !important;
    -webkit-mask-composite:source-in !important;
    mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 92%,transparent 100%) !important;
  }
}

@media (max-width:720px){
  .approved-hero-copy h1{
    font-size:clamp(34px,9.5vw,46px) !important;
    line-height:1.03 !important;
    letter-spacing:-1px !important;
    margin:0 14px 20px !important;
  }
  .approved-primary,.approved-secondary{
    height:50px !important;
    font-size:14px !important;
  }
}

@media (max-width:430px){
  .approved-hero-copy h1{
    font-size:clamp(32px,9.2vw,42px) !important;
    line-height:1.03 !important;
  }
}


/* ==========================================================
   PAGOTODO v6 - HERO DESKTOP MAS UNIDO
   - Acerca texto y telefono
   - Usa el mismo azul oscuro del arte del telefono en TODO el hero
   - Mantiene la lluvia/neon y elimina la sensacion de bloque separado
   - No modifica el layout movil aprobado
========================================================== */
@media (min-width: 721px){

  .approved-hero{
    /* columnas mas compactas para eliminar el hueco central */
    grid-template-columns:minmax(470px,.82fr) minmax(560px,1.18fr) !important;
    column-gap:0 !important;

    /* menos aire lateral y fondo unificado con el tono del flyer */
    padding:28px clamp(26px,5.2vw,88px) 38px !important;
    min-height:610px !important;

    background:
      radial-gradient(ellipse at 59% 46%, rgba(15,69,210,.28) 0%, rgba(10,29,115,.18) 29%, transparent 56%),
      radial-gradient(ellipse at 74% 46%, rgba(148,30,255,.24) 0%, rgba(69,17,148,.14) 30%, transparent 57%),
      linear-gradient(90deg,
        #040338 0%,
        #050642 26%,
        #061151 48%,
        #091158 70%,
        #12084f 100%
      ) !important;
  }

  /* lluvia suave sobre todo el ancho, no solo en el lado izquierdo */
  .approved-hero::after{
    opacity:.26 !important;
    background:
      repeating-linear-gradient(
        132deg,
        transparent 0 102px,
        rgba(43,96,255,.14) 103px 105px,
        transparent 106px 176px
      ),
      repeating-linear-gradient(
        132deg,
        transparent 0 172px,
        rgba(193,42,255,.10) 173px 175px,
        transparent 176px 270px
      ) !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  /* texto un poco mas cerca del centro */
  .approved-hero-copy{
    transform:translateX(22px) !important;
    max-width:520px !important;
  }

  .approved-hero-copy h1{
    font-size:clamp(44px,3.9vw,60px) !important;
    line-height:1.01 !important;
    max-width:510px !important;
    margin-bottom:22px !important;
  }

  /* mueve claramente el arte hacia el texto */
  .premium-phone-zone{
    min-height:530px !important;
    margin-left:-165px !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }

  /* velo de integracion: usa el mismo azul que la imagen */
  .premium-phone-zone::before{
    content:"" !important;
    position:absolute !important;
    inset:-6% -16% -6% -20% !important;
    pointer-events:none !important;
    z-index:0 !important;
    background:
      radial-gradient(ellipse at 48% 48%, rgba(8,24,106,.44) 0%, rgba(6,13,75,.28) 38%, rgba(4,3,56,.08) 63%, transparent 78%),
      linear-gradient(90deg, rgba(4,3,56,.28), rgba(5,8,74,.20), rgba(12,7,79,.12)) !important;
    filter:blur(14px) !important;
  }

  .premium-phone-art{
    position:relative !important;
    z-index:1 !important;
    width:min(100%,590px) !important;
    max-height:555px !important;

    /* difuminado mas leve: conserva el fondo azul del propio flyer
       para que se mezcle con el hero en vez de desaparecer */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 5%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 2.5%, #000 97%, transparent 100%) !important;
    -webkit-mask-composite:source-in !important;
    mask-image:linear-gradient(to right, transparent 0%, #000 5%, #000 96%, transparent 100%) !important;

    filter:
      drop-shadow(0 26px 34px rgba(0,0,0,.26))
      drop-shadow(0 0 34px rgba(82,54,255,.12)) !important;
  }
}

/* Afinado para notebook / desktop angosto */
@media (min-width:721px) and (max-width:1180px){
  .approved-hero{
    grid-template-columns:minmax(420px,.9fr) minmax(480px,1.1fr) !important;
    padding-left:30px !important;
    padding-right:24px !important;
  }
  .approved-hero-copy{transform:translateX(0) !important}
  .premium-phone-zone{margin-left:-105px !important}
  .premium-phone-art{width:min(100%,525px) !important}
}



/* ==========================================================
   PAGOTODO v7 - HERO FINAL
   Desktop: una sola superficie visual, sin rectangulo de imagen.
   Mobile: conserva el arte vertical y el layout apilado.
========================================================== */

@media (min-width:721px){
  .approved-hero{
    min-height:610px !important;
    display:grid !important;
    grid-template-columns:minmax(430px,.88fr) minmax(520px,1.12fr) !important;
    align-items:center !important;
    column-gap:0 !important;
    padding:34px clamp(36px,6.5vw,118px) 44px !important;
    background:
      linear-gradient(90deg,rgba(3,10,43,.96) 0%,rgba(3,10,43,.86) 28%,rgba(4,13,54,.48) 48%,rgba(4,10,43,.06) 70%,rgba(4,10,43,.08) 100%),
      url("../img/hero-pagotodo-wide.webp") center center/cover no-repeat !important;
  }

  .approved-hero::after{content:none !important;display:none !important}

  .approved-hero-copy{
    position:relative !important;
    z-index:3 !important;
    transform:none !important;
    max-width:500px !important;
    justify-self:start !important;
  }

  .approved-hero-copy h1{
    max-width:490px !important;
    font-size:clamp(44px,3.75vw,58px) !important;
    line-height:1.02 !important;
    letter-spacing:-1.5px !important;
    margin:0 0 24px !important;
  }

  .approved-hero-actions{gap:14px !important}
  .approved-primary,.approved-secondary{
    min-width:190px !important;
    height:54px !important;
    font-size:16px !important;
  }

  .premium-phone-zone{
    min-height:520px !important;
    margin:0 !important;
    overflow:visible !important;
    pointer-events:none;
  }
  .premium-phone-zone::before{content:none !important;display:none !important}
  .premium-phone-art{display:none !important}
}

@media (min-width:721px) and (max-width:1180px){
  .approved-hero{
    grid-template-columns:minmax(390px,.9fr) minmax(430px,1.1fr) !important;
    padding-left:30px !important;
    padding-right:24px !important;
  }
  .approved-hero-copy{max-width:450px !important}
  .approved-hero-copy h1{
    max-width:440px !important;
    font-size:clamp(42px,4.4vw,54px) !important;
  }
}

@media (max-width:720px){
  .approved-hero{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    padding:0 0 28px !important;
    background:linear-gradient(180deg,#050c31 0%,#071545 58%,#071642 100%) !important;
  }

  .premium-phone-zone{
    order:1 !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    overflow:hidden !important;
    display:flex !important;
    justify-content:center !important;
  }

  .premium-phone-zone::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:linear-gradient(180deg,rgba(5,12,49,0) 66%,#071545 100%) !important;
    filter:none !important;
  }

  .premium-phone-art{
    display:block !important;
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    max-width:520px !important;
    max-height:none !important;
    height:auto !important;
    object-fit:contain !important;
    filter:none !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }

  .approved-hero-copy{
    order:2 !important;
    width:100% !important;
    padding:0 30px !important;
    transform:none !important;
  }

  .approved-hero-copy h1{
    max-width:430px !important;
    font-size:clamp(34px,9.2vw,43px) !important;
    line-height:1.04 !important;
    letter-spacing:-1px !important;
    margin:8px 0 20px !important;
  }

  .approved-hero-actions{margin:0 !important;gap:10px !important}
  .approved-primary,.approved-secondary{
    min-width:0 !important;
    flex:1 1 0 !important;
    width:auto !important;
    height:50px !important;
    font-size:14px !important;
  }
}

@media (max-width:430px){
  .approved-hero-copy{padding:0 28px !important}
  .approved-hero-copy h1{font-size:clamp(32px,9vw,40px) !important}
}


/* ==========================================================
   PAGOTODO v8 - AJUSTE FINAL HERO DESKTOP
   - Texto centrado dentro de un contenedor visual
   - Teléfono más cerca del texto
   - Fondo único sin bloque/cuadrado visible
========================================================== */

@media (min-width: 721px){
  .approved-hero{
    min-height:610px !important;
    display:grid !important;
    grid-template-columns: 470px 650px !important;
    justify-content:center !important;
    align-items:center !important;
    column-gap:26px !important;
    padding:34px 40px 44px !important;

    background:
      url("../img/hero-pagotodo-wide.webp") center center / cover no-repeat !important;
  }

  .approved-hero::after{
    content:none !important;
    display:none !important;
  }

  .approved-hero-copy{
    width:470px !important;
    max-width:470px !important;
    justify-self:end !important;
    transform:none !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    z-index:3 !important;
  }

  .approved-hero-copy h1{
    max-width:455px !important;
    margin:0 0 22px !important;
    font-size:clamp(43px,3.35vw,56px) !important;
    line-height:1.03 !important;
    letter-spacing:-1.4px !important;
  }

  .approved-hero-actions{
    gap:14px !important;
  }

  .approved-primary,
  .approved-secondary{
    min-width:190px !important;
    height:54px !important;
    font-size:16px !important;
  }

  /* La segunda columna es solo espacio visual: el teléfono ya está en el fondo */
  .premium-phone-zone{
    width:650px !important;
    min-height:520px !important;
    margin:0 !important;
    pointer-events:none !important;
  }

  .premium-phone-zone::before,
  .premium-phone-art{
    display:none !important;
  }
}

/* notebooks */
@media (min-width:721px) and (max-width:1250px){
  .approved-hero{
    grid-template-columns:420px 520px !important;
    column-gap:12px !important;
    padding-left:24px !important;
    padding-right:24px !important;
    background-position:50% center !important;
  }
  .approved-hero-copy{
    width:420px !important;
    max-width:420px !important;
  }
  .approved-hero-copy h1{
    max-width:410px !important;
    font-size:clamp(40px,4vw,51px) !important;
  }
  .premium-phone-zone{width:520px !important}
}

/* Mobile se conserva como estaba funcionando */
@media (max-width:720px){
  .approved-hero{
    background:linear-gradient(180deg,#050c31 0%,#071545 58%,#071642 100%) !important;
  }
}