*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#07060c;--surface:#0e0c16;--line:rgba(255,255,255,.09);--text:#f7f5fb;--muted:#9894a6;--pink:#ff2aa3;--purple:#8b5cf6;--gradient:linear-gradient(110deg,#ff249f,#c23cf0 48%,#765cff);--shadow:0 25px 70px rgba(0,0,0,.35)}
html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;overflow-x:hidden}body.no-scroll{overflow:hidden}
.site-bg{position:fixed;inset:0;pointer-events:none;background:radial-gradient(700px 500px at 85% 8%,rgba(126,65,255,.1),transparent 70%),radial-gradient(600px 450px at 10% 45%,rgba(255,42,163,.06),transparent 70%)}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}
.site-header{height:76px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(7,6,12,.82);backdrop-filter:blur(18px);position:sticky;top:0;z-index:50}
.logo{font:800 21px/1 "Space Grotesk";letter-spacing:-1px}.logo span,.auth-brand span{color:var(--pink)}
.main-nav{display:flex;gap:28px}.main-nav a{font-size:13px;color:#aaa6b5}.main-nav a:hover{color:#fff}
.header-actions{display:flex;gap:9px;align-items:center}.icon-btn,.menu-btn,.close-btn,.modal-close{border:0;background:transparent;color:#ddd}.icon-btn{font-size:23px}.account-btn{border:1px solid var(--line);background:#11101a;color:#ddd;padding:9px 12px;border-radius:10px;font-size:11px}.cart-btn{border:1px solid var(--line);background:#11101a;color:#fff;padding:9px 12px;border-radius:10px;display:flex;gap:8px;align-items:center;font-size:11px}.cart-btn b{background:var(--gradient);min-width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:10px}.menu-btn{display:none;font-size:22px}

.hero{width:min(1400px,94%);min-height:650px;margin:24px auto 0;border:1px solid var(--line);border-radius:28px;position:relative;overflow:hidden;background:linear-gradient(110deg,#16102a,#0c0915 48%,#090711);display:grid;grid-template-columns:1fr 1fr;padding:75px 7% 105px;box-shadow:var(--shadow)}
.hero-glow{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none}.glow-a{width:600px;height:600px;left:-300px;top:-260px;background:rgba(255,42,163,.15)}.glow-b{width:700px;height:700px;right:-320px;bottom:-400px;background:rgba(117,92,255,.16)}
.hero-copy{position:relative;z-index:3}.eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:7px;color:#d6d1df;font-size:10px;font-weight:800;letter-spacing:1.3px}.eyebrow{border:1px solid rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.045);margin-bottom:24px}.eyebrow span{color:var(--pink)}
.hero h1{font:800 clamp(44px,6vw,82px)/.9 "Space Grotesk";letter-spacing:-4px;text-transform:uppercase}.hero h1 span,.section-heading h2 span,.offer-banner h2 span{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p{max-width:510px;color:#aaa6b5;font-size:15px;line-height:1.7;margin:28px 0}.hero-actions{display:flex;gap:12px}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 21px;border-radius:12px;font-size:12px;font-weight:800;transition:.25s}.btn-primary{background:var(--gradient);box-shadow:0 12px 35px rgba(255,42,163,.2)}.btn-primary:hover{transform:translateY(-2px)}.btn-ghost{border:1px solid var(--line);background:rgba(255,255,255,.035)}.hero-trust{display:flex;gap:38px;margin-top:55px}.hero-trust div{display:flex;flex-direction:column;gap:4px}.hero-trust strong{font:700 23px "Space Grotesk"}.hero-trust span{color:#777383;font-size:10px;text-transform:uppercase;letter-spacing:.7px}
.hero-product{position:relative;min-height:440px;display:grid;place-items:center;z-index:2}.hero-orbit{position:absolute;border:1px solid rgba(255,42,163,.18);border-radius:50%;transform:rotate(-20deg)}.orbit-one{width:520px;height:260px}.orbit-two{width:400px;height:200px;border-color:rgba(139,92,246,.2);transform:rotate(24deg)}.pc-case{position:relative;width:265px;height:390px;border:2px solid rgba(255,255,255,.18);border-radius:22px;background:linear-gradient(120deg,#15121e,#09090e);box-shadow:0 0 90px rgba(255,42,163,.18),inset 0 0 35px rgba(255,255,255,.03);transform:perspective(800px) rotateY(-10deg);overflow:hidden}.case-glass{position:absolute;inset:18px 52px 18px 18px;border-radius:13px;background:linear-gradient(130deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.08);overflow:hidden}.case-front{position:absolute;right:0;top:0;bottom:0;width:40px;border-left:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px}.case-front span{width:18px;height:2px;background:#514b5f}.fan{position:absolute;width:76px;height:76px;border-radius:50%;border:7px dotted rgba(255,42,163,.55);box-shadow:0 0 22px rgba(255,42,163,.35)}.fan i{position:absolute;width:12px;height:12px;left:25px;top:25px;background:#fff;border-radius:50%;box-shadow:0 0 12px #ff2aa3}.fan-one{top:25px;left:20px}.fan-two{top:112px;left:20px}.fan-three{top:199px;left:20px}.gpu{position:absolute;right:12px;top:120px;width:110px;height:66px;border-radius:7px;background:linear-gradient(90deg,#20202b,#565164);box-shadow:0 0 18px rgba(84,231,255,.25)}.gpu:after{content:"";position:absolute;right:8px;top:24px;width:28px;height:17px;border:2px solid #54e7ff}.ram{position:absolute;right:22px;top:30px;width:9px;height:85px;border-radius:3px;background:linear-gradient(#ff2aa3,#8b5cf6);box-shadow:0 0 13px rgba(255,42,163,.5)}.ram-one{right:40px}.ram-two{right:55px}.floating-card{position:absolute;padding:12px 15px;border:1px solid var(--line);background:rgba(15,13,23,.86);backdrop-filter:blur(15px);border-radius:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px}.floating-card strong{font-size:12px;display:block}.floating-card small{font-size:9px;color:#898493;display:block;margin-top:3px}.floating-stock{left:4%;top:12%}.floating-rating{right:0;bottom:12%;display:block}.floating-rating>strong{font-size:18px}.floating-rating>span{color:#ffb21f;font-size:11px;display:block}.floating-rating small{margin-top:5px}.mini-icon{width:30px;height:30px;border-radius:9px;background:rgba(255,42,163,.12);display:grid;place-items:center}.brand-strip{position:absolute;bottom:0;left:-2%;right:-2%;height:48px;background:var(--gradient);display:flex;align-items:center;justify-content:space-evenly;transform:rotate(-1deg);font:800 11px "Space Grotesk";letter-spacing:1.5px}

.section{width:min(1250px,90%);margin:auto;padding:95px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}.section-heading h2{font:700 clamp(28px,4vw,43px)/1.05 "Space Grotesk";letter-spacing:-1.7px;margin-top:7px}.section-heading>p{color:#85818f;font-size:12px;max-width:370px;line-height:1.6}.section-heading.center{display:block;text-align:center}.section-heading.center .section-kicker{justify-content:center}
.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.category-grid-large .category-card{min-height:170px}.category-card{position:relative;text-align:left;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#151120,#0c0a12);color:#fff;overflow:hidden;transition:.25s}.category-card:before{content:"";position:absolute;width:100px;height:100px;right:-45px;top:-45px;border-radius:50%;background:rgba(139,92,246,.13)}.category-card:hover{transform:translateY(-5px);border-color:rgba(255,42,163,.55);box-shadow:0 16px 40px rgba(0,0,0,.3)}.category-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;background:rgba(255,255,255,.05);font-size:20px;margin-bottom:24px}.category-card strong{display:block;font:700 14px "Space Grotesk"}.category-card small{display:block;color:#777383;font-size:9px;margin-top:5px}.category-card em{position:absolute;right:18px;bottom:18px;color:#aaa;font-style:normal}

.store-section{padding-top:30px}.store-toolbar{display:flex;gap:10px;margin-bottom:18px}.search-box{height:46px;display:flex;align-items:center;gap:8px;flex:1;border:1px solid var(--line);border-radius:12px;background:#0d0b14;padding:0 13px}.search-box span{font-size:21px;color:#777}.search-box input{width:100%;background:transparent;border:0;outline:0;color:#fff;font-size:12px}.store-toolbar select{height:46px;border:1px solid var(--line);border-radius:12px;background:#0d0b14;color:#bbb;padding:0 13px;outline:none;font-size:11px}.category-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}.pill{border:1px solid var(--line);background:#0d0b14;color:#96919f;border-radius:999px;padding:7px 12px;font-size:10px}.pill.active,.pill:hover{color:#fff;border-color:rgba(255,42,163,.5);background:rgba(255,42,163,.08)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.product-card{background:linear-gradient(155deg,#161221,#0d0b13);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s;position:relative}.product-card:hover{transform:translateY(-5px);border-color:rgba(255,42,163,.45)}.product-image{height:220px;background:#09080e;position:relative;display:grid;place-items:center;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:contain;padding:16px;transition:.35s}.product-card:hover .product-image img{transform:scale(1.05)}.product-badge{position:absolute;left:12px;top:12px;background:var(--gradient);border-radius:7px;padding:5px 8px;font-size:8px;font-weight:800;text-transform:uppercase}.product-info{padding:15px}.product-category{font-size:9px;color:#a79faf;text-transform:uppercase;letter-spacing:1px}.product-info h3{font:700 15px/1.3 "Space Grotesk";margin:7px 0}.product-model{color:#716d7b;font-size:10px;min-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:8px}.product-price{font:700 17px "Space Grotesk"}.add-btn{border:1px solid rgba(255,42,163,.25);background:rgba(255,42,163,.08);color:#fff;border-radius:9px;padding:9px 10px;font-size:9px;font-weight:800}.add-btn:hover{background:var(--gradient);border-color:transparent}.empty-state{grid-column:1/-1;border:1px dashed var(--line);border-radius:18px;padding:55px 20px;text-align:center;color:#777383}.empty-state strong{display:block;color:#ddd;margin-bottom:8px}.loading-card{height:330px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(110deg,#0e0c15 30%,#171322 45%,#0e0c15 60%);background-size:300% 100%;animation:loading 1.5s infinite}@keyframes loading{to{background-position:-200% 0}}

.offer-banner{width:min(1250px,90%);margin:10px auto 40px;min-height:310px;border:1px solid var(--line);border-radius:24px;overflow:hidden;position:relative;padding:52px 65px;background:linear-gradient(110deg,#171025,#0b0912)}.offer-banner h2{font:700 clamp(30px,4vw,50px)/1 "Space Grotesk";letter-spacing:-2px;margin:8px 0 14px}.offer-banner p{color:#85818f;font-size:12px;margin-bottom:22px}.offer-art{position:absolute;right:8%;top:20px;width:320px;height:270px;display:grid;place-items:center}.offer-art strong{font:800 60px/.8 "Space Grotesk";letter-spacing:-5px;transform:rotate(-8deg);background:var(--gradient);-webkit-background-clip:text;color:transparent;position:relative;z-index:2}.offer-circle{position:absolute;width:240px;height:240px;border:1px solid rgba(255,42,163,.25);border-radius:50%;box-shadow:0 0 80px rgba(255,42,163,.12)}.offer-lines{position:absolute;width:360px;height:100px;border-top:1px solid rgba(139,92,246,.35);border-bottom:1px solid rgba(255,42,163,.25);transform:rotate(-18deg)}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.benefits-grid article{padding:26px 20px;border:1px solid var(--line);border-radius:17px;background:#0c0a12}.benefits-grid article>span{font-size:22px}.benefits-grid h3{font:700 15px "Space Grotesk";margin:17px 0 8px}.benefits-grid p{font-size:10px;color:#777383;line-height:1.7}
footer{border-top:1px solid var(--line);padding:45px 5% 25px;background:#05040a}.footer-main{max-width:1250px;margin:auto;display:flex;justify-content:space-between;gap:30px}.footer-main p{color:#6f6b78;font-size:11px;margin-top:12px}.footer-links{display:flex;gap:25px;color:#87828f;font-size:11px}.footer-bottom{max-width:1250px;margin:35px auto 0;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#55515d;font-size:9px}

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.modal-backdrop.active{display:flex}.auth-modal,.account-modal{width:min(430px,100%);background:linear-gradient(150deg,#171321,#0b0911);border:1px solid var(--line);border-radius:22px;padding:32px;box-shadow:0 30px 100px rgba(0,0,0,.55);position:relative}.modal-close{position:absolute;right:17px;top:13px;font-size:29px;color:#777}.auth-brand{font:800 22px "Space Grotesk";margin-bottom:25px}.auth-modal h2,.account-modal h2{font:700 30px "Space Grotesk";margin-top:8px;letter-spacing:-1px}.auth-subtitle{font-size:11px;color:#777383;line-height:1.6;margin:8px 0 22px}.auth-modal form{display:flex;flex-direction:column;gap:13px}.auth-modal label{font-size:10px;color:#9e99a8;display:flex;flex-direction:column;gap:7px}.auth-modal input{height:45px;border:1px solid var(--line);border-radius:10px;background:#0b0911;color:#fff;padding:0 12px;outline:none}.auth-modal input:focus{border-color:rgba(255,42,163,.6)}
/* ===== OJITO PARA MOSTRAR / OCULTAR CONTRASEÑA ===== */
.password-field{position:relative;display:block;width:100%}.password-field input{width:100%;box-sizing:border-box;padding-right:48px}.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#8e8997;display:grid;place-items:center;cursor:pointer;padding:0}.password-toggle:hover{background:rgba(255,255,255,.06);color:#fff}.password-toggle:focus-visible{outline:2px solid rgba(255,42,163,.6);outline-offset:1px}.password-eye{font-size:16px;line-height:1;opacity:.9}
.auth-submit{width:100%;margin-top:4px}.auth-switch{border:0;background:transparent;color:#777383;font-size:10px;width:100%;margin-top:18px}.auth-switch span{color:#ff4aaf}.auth-message{min-height:15px;text-align:center;font-size:10px;color:#ff76bd;margin-top:13px}.hidden{display:none!important}.account-avatar{width:64px;height:64px;border-radius:18px;background:var(--gradient);display:grid;place-items:center;font:800 25px "Space Grotesk";margin-bottom:20px}.account-menu{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:20px 0}.account-menu button{width:100%;padding:15px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:#ddd;text-align:left;font-size:11px}.account-menu button:last-child{border-bottom:0}.account-menu small{float:right;color:#666;font-size:9px}.logout-btn{width:100%}

.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);opacity:0;visibility:hidden;transition:.25s;z-index:80}.cart-overlay.active{opacity:1;visibility:visible}.cart-drawer{position:fixed;right:-430px;top:0;width:min(420px,100%);height:100dvh;background:#0c0a12;border-left:1px solid var(--line);z-index:90;transition:.3s;display:flex;flex-direction:column}.cart-drawer.active{right:0}.cart-header{padding:24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.cart-header h2{font:700 26px "Space Grotesk";margin-top:5px}.close-btn{font-size:30px;color:#888}.cart-items{flex:1;overflow:auto;padding:16px}.cart-empty{text-align:center;color:#777;padding:60px 20px}.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}.cart-thumb{width:60px;height:60px;border-radius:10px;background:#15121d;object-fit:contain}.cart-item-info{flex:1}.cart-item-info strong{font:600 12px "Space Grotesk";display:block}.cart-item-info span{font-size:10px;color:#777383;display:block;margin-top:5px}.qty-controls{display:flex;align-items:center;gap:8px;margin-top:8px}.qty-controls button{width:23px;height:23px;border:1px solid var(--line);border-radius:6px;background:#12101a;color:#fff}.remove-btn{border:0;background:transparent;color:#666;font-size:15px}.cart-footer{padding:20px 24px;border-top:1px solid var(--line)}.cart-footer>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.cart-footer>div span{color:#777383;font-size:11px}.cart-footer strong{font:700 22px "Space Grotesk"}.checkout-btn{width:100%}.cart-footer small{display:block;text-align:center;color:#55515d;font-size:9px;margin-top:10px}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:120;background:#171421;border:1px solid var(--line);padding:12px 17px;border-radius:10px;font-size:11px;box-shadow:var(--shadow);transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1050px){.main-nav{gap:15px}.hero{grid-template-columns:1fr}.category-grid{grid-template-columns:repeat(3,1fr)}.product-grid{grid-template-columns:repeat(3,1fr)}.benefits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.site-header{height:68px}.main-nav{position:absolute;top:68px;left:0;right:0;background:#0b0910;border-bottom:1px solid var(--line);padding:18px 5%;display:none;flex-direction:column}.main-nav.open{display:flex}.menu-btn{display:block}.account-btn{padding:8px}.cart-btn span{display:none}.hero{margin-top:10px;border-radius:20px;min-height:auto;padding:45px 6% 95px}.hero h1{font-size:clamp(42px,12vw,64px);letter-spacing:-3px}.hero-product{min-height:360px;transform:scale(.86)}.floating-card{display:none}.section{padding:65px 0}.section-heading{display:block}.section-heading>p{margin-top:10px}.category-grid{grid-template-columns:repeat(2,1fr)}.product-grid{grid-template-columns:repeat(2,1fr)}.store-toolbar{flex-wrap:wrap}.search-box{flex-basis:100%}.store-toolbar select{flex:1}.offer-banner{padding:38px 28px}.offer-art{opacity:.35;right:-70px}.footer-main{display:block}.footer-links{margin-top:25px;flex-wrap:wrap}}
@media(max-width:430px){.account-btn{max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.hero-trust{justify-content:space-between;gap:8px}.hero-trust strong{font-size:18px}.hero-trust span{font-size:8px}.product-grid{gap:9px}.product-image{height:165px}.product-info{padding:11px}.product-info h3{font-size:13px}.product-bottom{align-items:flex-end;flex-direction:column}.add-btn{width:100%}.benefits-grid{grid-template-columns:1fr}.auth-modal,.account-modal{padding:25px}}

/* ============================================================
   MIS PEDIDOS
   ============================================================ */

.orders-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}

.section-title .eyebrow {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ff2aa3;
}

.section-title h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
}

.orders-count {
  font-size: 11px;
  color: #8e8998;
  white-space: nowrap;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.orders-empty {
  padding: 28px 20px;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.orders-empty span {
  display: block;
  margin-bottom: 10px;
  font-size: 34px;
}

.orders-empty strong {
  display: block;
  margin-bottom: 6px;
  color: #ffffff;
  font-size: 14px;
}

.orders-empty p {
  margin: 0;
  color: #77727f;
  font-size: 11px;
  line-height: 1.5;
}

.order-card {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.015)
  );
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.order-number {
  display: block;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.order-date {
  color: #77727f;
  font-size: 10px;
}

.order-status {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 42, 163, 0.1);
  color: #ff5ab8;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.order-products {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.order-product {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.order-product-name {
  min-width: 0;
  color: #c8c4ce;
  font-size: 11px;
  line-height: 1.4;
}

.order-product-qty {
  color: #77727f;
  white-space: nowrap;
  font-size: 10px;
}

.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.order-total-label {
  color: #77727f;
  font-size: 10px;
}

.order-total {
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
}

.orders-loading {
  padding: 20px;
  text-align: center;
  color: #77727f;
  font-size: 11px;
}

.orders-error {
  padding: 18px;
  border-radius: 12px;
  background: rgba(255, 60, 60, 0.06);
  color: #ff8585;
  font-size: 11px;
  text-align: center;
}

@media (max-width: 600px) {
  .section-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .order-header {
    align-items: flex-start;
  }

  .order-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  /* ============================================================
   MODAL YAPE / PLIN
   ============================================================ */

#payment-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;

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

  padding: 20px;

  background: rgba(0, 0, 0, 0.78);

  backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

#payment-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.payment-modal {
  position: relative;

  width: min(430px, 100%);

  max-height: 92vh;
  overflow-y: auto;

  padding: 28px;

  border: 1px solid rgba(255, 42, 163, 0.2);
  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #15111d,
      #0c0a11
    );

  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.65),
    0 0 50px rgba(255, 42, 163, 0.08);
}

.payment-modal .modal-close {
  position: absolute;

  top: 14px;
  right: 16px;

  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.05);

  color: #8e8998;

  font-size: 25px;
  line-height: 1;

  cursor: pointer;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.payment-modal .modal-close:hover {
  background: rgba(255, 42, 163, 0.12);
  color: #ffffff;
}

.payment-header {
  text-align: center;
  padding-right: 15px;
}

.payment-eyebrow {
  display: block;

  margin-bottom: 8px;

  color: #ff2aa3;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 2px;
}

.payment-header h2 {
  margin: 0 0 8px;

  color: #ffffff;

  font-size: 25px;
  font-weight: 900;
}

.payment-header p {
  margin: 0;

  color: #77727f;

  font-size: 11px;
  line-height: 1.6;
}

.payment-qr-box {
  display: flex;

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

  margin: 22px auto 16px;

  width: min(290px, 100%);
  aspect-ratio: 1 / 1;

  padding: 12px;

  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.04);
}

.payment-qr-box img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.payment-help {
  display: flex;

  flex-direction: column;

  gap: 4px;

  margin-bottom: 18px;

  padding: 13px 15px;

  border-radius: 12px;

  background: rgba(255, 42, 163, 0.05);

  border: 1px solid rgba(255, 42, 163, 0.08);

  text-align: center;
}

.payment-help strong {
  color: #ffffff;

  font-size: 11px;
}

.payment-help span {
  color: #77727f;

  font-size: 10px;

  line-height: 1.5;
}

.payment-total {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 18px;

  padding: 15px 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.payment-total span {
  color: #77727f;

  font-size: 11px;
}

.payment-total strong {
  color: #ffffff;

  font-size: 21px;
  font-weight: 900;
}

.payment-message {
  min-height: 16px;

  margin-bottom: 10px;

  color: #ff75be;

  font-size: 10px;

  text-align: center;
}

.payment-confirm-btn {
  width: 100%;

  padding: 14px 18px;

  border: 0;
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #ff2aa3,
      #8b5cf6
    );

  color: #ffffff;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.6px;

  cursor: pointer;

  box-shadow:
    0 8px 25px rgba(255, 42, 163, 0.18);

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.payment-confirm-btn:hover {
  transform: translateY(-1px);
}

.payment-confirm-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.payment-cancel-btn {
  width: 100%;

  margin-top: 9px;

  padding: 11px;

  border: 0;

  background: transparent;

  color: #77727f;

  font-size: 10px;

  cursor: pointer;
}

.payment-cancel-btn:hover {
  color: #ffffff;
}

@media (max-width: 500px) {
  .payment-modal {
    padding: 22px;
  }

  .payment-qr-box {
    width: min(260px, 100%);
  }

  .payment-header h2 {
    font-size: 22px;
  }
}

/* ============================================================
   NEXUS.GG - PAGO YAPE / PLIN
   ============================================================ */

#payment-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;

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

  padding: 20px !important;

  background: rgba(0, 0, 0, 0.82) !important;

  backdrop-filter: blur(10px) !important;

  opacity: 0 !important;
  visibility: hidden !important;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease !important;
}

#payment-backdrop.active {
  opacity: 1 !important;
  visibility: visible !important;
}

#payment-backdrop .payment-modal {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  max-width: 430px !important;

  max-height: 92vh !important;

  overflow-y: auto !important;

  box-sizing: border-box !important;

  padding: 28px !important;

  border: 1px solid rgba(255, 42, 163, 0.25) !important;

  border-radius: 22px !important;

  background: #100d17 !important;

  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(255, 42, 163, 0.08) !important;

  color: #ffffff !important;
}

/* BOTÓN CERRAR */

#payment-backdrop .modal-close {
  position: absolute !important;

  top: 14px !important;
  right: 14px !important;

  width: 34px !important;
  height: 34px !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.06) !important;

  color: #aaa !important;

  font-size: 25px !important;
  line-height: 34px !important;

  text-align: center !important;

  cursor: pointer !important;
}

#payment-backdrop .modal-close:hover {
  background: rgba(255, 42, 163, 0.15) !important;
  color: #ffffff !important;
}

/* CABECERA */

#payment-backdrop .payment-header {
  display: block !important;

  margin-bottom: 20px !important;

  text-align: center !important;
}

#payment-backdrop .payment-eyebrow {
  display: block !important;

  margin-bottom: 8px !important;

  color: #ff2aa3 !important;

  font-size: 9px !important;
  font-weight: 900 !important;

  letter-spacing: 2px !important;
}

#payment-backdrop .payment-header h2 {
  margin: 0 0 8px !important;

  color: #ffffff !important;

  font-size: 25px !important;
  font-weight: 900 !important;
}

#payment-backdrop .payment-header p {
  margin: 0 !important;

  color: #85808e !important;

  font-size: 11px !important;

  line-height: 1.6 !important;
}

/* QR */

#payment-backdrop .payment-qr-box {
  display: flex !important;

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

  width: 280px !important;
  height: 280px !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

  margin: 20px auto !important;

  padding: 10px !important;

  border-radius: 16px !important;

  background: #ffffff !important;

  overflow: hidden !important;
}

#payment-backdrop .payment-qr-box img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;

  border: 0 !important;
}

/* TEXTO DE AYUDA */

#payment-backdrop .payment-help {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  gap: 5px !important;

  margin-bottom: 18px !important;

  padding: 13px 15px !important;

  border: 1px solid rgba(255, 42, 163, 0.1) !important;

  border-radius: 12px !important;

  background: rgba(255, 42, 163, 0.05) !important;

  text-align: center !important;
}

#payment-backdrop .payment-help strong {
  color: #ffffff !important;

  font-size: 11px !important;
}

#payment-backdrop .payment-help span {
  color: #85808e !important;

  font-size: 10px !important;

  line-height: 1.5 !important;
}

/* TOTAL */

#payment-backdrop .payment-total {
  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  margin: 0 0 16px !important;

  padding: 15px 4px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#payment-backdrop .payment-total span {
  color: #85808e !important;

  font-size: 11px !important;
}

#payment-backdrop .payment-total strong {
  color: #ffffff !important;

  font-size: 21px !important;
  font-weight: 900 !important;
}

/* MENSAJE */

#payment-backdrop .payment-message {
  min-height: 15px !important;

  margin-bottom: 8px !important;

  color: #ff5ab8 !important;

  font-size: 10px !important;

  text-align: center !important;
}

/* BOTÓN CONFIRMAR */

#payment-backdrop .payment-confirm-btn {
  display: block !important;

  width: 100% !important;

  box-sizing: border-box !important;

  padding: 14px 18px !important;

  border: 0 !important;

  border-radius: 11px !important;

  background:
    linear-gradient(
      135deg,
      #ff2aa3,
      #8b5cf6
    ) !important;

  color: #ffffff !important;

  font-size: 11px !important;
  font-weight: 900 !important;

  letter-spacing: 0.6px !important;

  cursor: pointer !important;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease !important;
}

#payment-backdrop .payment-confirm-btn:hover {
  transform: translateY(-1px) !important;
}

#payment-backdrop .payment-confirm-btn:disabled {
  opacity: 0.55 !important;

  cursor: not-allowed !important;

  transform: none !important;
}

/* CANCELAR */

#payment-backdrop .payment-cancel-btn {
  display: block !important;

  width: 100% !important;

  margin-top: 8px !important;

  padding: 10px !important;

  border: 0 !important;

  background: transparent !important;

  color: #77727f !important;

  font-size: 10px !important;

  cursor: pointer !important;
}

#payment-backdrop .payment-cancel-btn:hover {
  color: #ffffff !important;
}

/* MÓVIL */

@media (max-width: 500px) {

  #payment-backdrop {
    padding: 12px !important;
  }

  #payment-backdrop .payment-modal {
    padding: 22px !important;
  }

  #payment-backdrop .payment-qr-box {
    width: 250px !important;
    height: 250px !important;
  }

  #payment-backdrop .payment-header h2 {
    font-size: 22px !important;
  }
}

/* MOSTRAR MODAL DE PAGO */

#payment-backdrop.active {
  opacity: 1 !important;
  visibility: visible !important;
}

}

/* ============================================================
   CHECKOUT YAPE / PLIN - NEXUS.GG
   ============================================================ */
#payment-backdrop{display:none;opacity:0;visibility:hidden;align-items:center;justify-content:center;padding:20px;z-index:200;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);transition:opacity .2s ease,visibility .2s ease}
#payment-backdrop.active{display:flex;opacity:1;visibility:visible}
.payment-modal{width:min(460px,100%);max-height:94vh;overflow:auto;position:relative;padding:28px;border:1px solid rgba(255,42,163,.22);border-radius:24px;background:linear-gradient(150deg,#171321,#0b0911);box-shadow:0 30px 100px rgba(0,0,0,.65)}
.payment-head{text-align:center;padding:4px 20px 14px}.payment-head h2{font:700 28px "Space Grotesk";letter-spacing:-1px;margin:8px 0}.payment-head p{font-size:11px;line-height:1.6;color:#888391;margin:0}
.payment-steps{display:flex;gap:6px;margin:4px 0 18px}.payment-steps span{flex:1;text-align:center;padding:8px 5px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid var(--line);color:#77727f;font-size:9px;font-weight:800}.payment-steps span.active{background:rgba(255,42,163,.08);border-color:rgba(255,42,163,.25);color:#ff5ab8}
.qr-box{width:min(300px,100%);aspect-ratio:1;margin:0 auto 16px;padding:12px;background:#fff;border-radius:18px;display:grid;place-items:center;overflow:hidden}.qr-box img{display:block;width:100%;height:100%;object-fit:contain}
.payment-help{padding:12px 14px;border:1px solid rgba(255,42,163,.12);border-radius:13px;background:rgba(255,42,163,.05);text-align:center;margin-bottom:14px}.payment-help strong{display:block;font-size:11px;margin-bottom:4px}.payment-help span{font-size:10px;line-height:1.5;color:#85808e}
.payment-total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:16px}.payment-total-row span{font-size:11px;color:#85808e}.payment-total-row strong{font-size:22px;font-weight:900}
.proof-label{display:block;font-size:10px;font-weight:800;color:#c8c3d0;margin-bottom:7px}.proof-label span{color:#ff2aa3}.proof-input{display:block;width:100%;padding:11px;border:1px dashed rgba(255,42,163,.3);border-radius:11px;background:#0b0911;color:#aaa6b5;font-size:10px}.proof-note{display:block;color:#676271;font-size:9px;margin-top:6px}.proof-preview{margin-top:10px;display:none}.proof-preview img{width:100%;max-height:170px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:#0b0911}.payment-message{min-height:18px;margin:10px 0 4px;text-align:center;color:#ff5ab8;font-size:10px;line-height:1.4}.payment-confirm{width:100%;margin-top:3px}.payment-confirm:disabled{opacity:.55;cursor:not-allowed;transform:none}.payment-cancel{display:block;width:100%;margin-top:8px;border:0;background:transparent;color:#77727f;padding:9px;font-size:10px}
@media(max-width:600px){.payment-modal{padding:22px}.qr-box{width:min(280px,100%)}.payment-head h2{font-size:24px}}

/* ============================================================
   MODALES - SCROLL Y CIERRE CORRECTO
   ============================================================ */
.modal-backdrop {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start !important;
  padding: 20px !important;
}
.modal-backdrop > .auth-modal,
.modal-backdrop > .account-modal,
.modal-backdrop > .admin-modal,
.modal-backdrop > .payment-modal {
  margin: 20px auto;
  flex: 0 0 auto;
}
.auth-modal,
.account-modal,
.admin-modal,
.payment-modal {
  max-height: calc(100dvh - 40px) !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-close {
  z-index: 5;
  cursor: pointer;
}
.account-modal .modal-close,
.auth-modal .modal-close,
.admin-modal .modal-close {
  position: sticky;
  top: 0;
  float: right;
  margin-bottom: -34px;
}

/* ============================================================
   PANEL ADMINISTRADOR
   ============================================================ */
.admin-modal {
  width: min(920px, 100%);
  background: linear-gradient(150deg,#171321,#0b0911);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 30px 100px rgba(0,0,0,.65);
  position: relative;
}
.admin-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding-right:36px; }
.admin-head h2 { font:700 30px "Space Grotesk"; margin:8px 0 6px; }
.admin-head p { margin:0; color:#85808e; font-size:11px; line-height:1.55; }
.admin-refresh { border:1px solid rgba(255,42,163,.25); background:rgba(255,42,163,.07); color:#ff5ab8; border-radius:10px; padding:10px 13px; font-size:10px; font-weight:800; cursor:pointer; white-space:nowrap; }
.admin-refresh:hover { background:rgba(255,42,163,.14); color:#fff; }
.admin-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 14px; }
.admin-stats > div { border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.025); padding:14px; }
.admin-stats span { display:block; color:#77727f; font-size:9px; text-transform:uppercase; letter-spacing:.5px; }
.admin-stats strong { display:block; margin-top:5px; color:#fff; font:800 22px "Space Grotesk"; }
.admin-toolbar { display:grid; grid-template-columns:1fr 220px; gap:10px; margin-bottom:12px; }
.admin-toolbar input,.admin-toolbar select { width:100%; height:42px; border:1px solid var(--line); border-radius:10px; background:#0b0911; color:#fff; padding:0 12px; outline:none; font-size:10px; }
.admin-toolbar input:focus,.admin-toolbar select:focus { border-color:rgba(255,42,163,.5); }
.admin-message { min-height:18px; color:#ff5ab8; font-size:10px; text-align:center; margin:4px 0 8px; }
.admin-orders-list { display:flex; flex-direction:column; gap:10px; }
.admin-order-card { border:1px solid rgba(255,255,255,.08); border-radius:15px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); padding:15px; }
.admin-order-top { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.admin-order-title { color:#fff; font-size:13px; font-weight:800; }
.admin-order-meta { display:block; color:#77727f; font-size:9px; margin-top:4px; line-height:1.5; }
.admin-order-total { color:#fff; font:800 17px "Space Grotesk"; white-space:nowrap; }
.admin-order-body { display:grid; grid-template-columns:1fr auto; gap:14px; margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.06); }
.admin-products { display:flex; flex-direction:column; gap:6px; }
.admin-product-row { display:flex; justify-content:space-between; gap:10px; color:#c8c4ce; font-size:10px; }
.admin-product-row span:last-child { color:#77727f; white-space:nowrap; }
.admin-actions { display:flex; flex-direction:column; gap:8px; min-width:220px; }
.admin-actions select { height:38px; border:1px solid var(--line); border-radius:9px; background:#0b0911; color:#fff; padding:0 9px; font-size:10px; }
.admin-action-row { display:flex; gap:7px; }
.admin-proof-btn,.admin-save-btn { flex:1; border:1px solid rgba(255,255,255,.1); border-radius:9px; padding:9px 8px; font-size:9px; font-weight:800; cursor:pointer; }
.admin-proof-btn { background:rgba(139,92,246,.08); color:#bba7ff; }
.admin-save-btn { background:rgba(255,42,163,.08); color:#ff5ab8; border-color:rgba(255,42,163,.2); }
.admin-proof-btn:hover,.admin-save-btn:hover { color:#fff; background:rgba(255,255,255,.08); }
.admin-proof-btn:disabled,.admin-save-btn:disabled { opacity:.5; cursor:not-allowed; }
.admin-empty { padding:35px 20px; text-align:center; border:1px dashed rgba(255,255,255,.1); border-radius:14px; color:#77727f; font-size:11px; }
.admin-menu-btn { color:#ff5ab8 !important; }
@media(max-width:700px){
  .admin-modal { padding:22px; }
  .admin-head { flex-direction:column; }
  .admin-stats { grid-template-columns:1fr; }
  .admin-toolbar { grid-template-columns:1fr; }
  .admin-order-body { grid-template-columns:1fr; }
  .admin-actions { min-width:0; }
}

/* ============================================================
   DETALLE DE PRODUCTO + GALERIA 5 FOTOS
   ============================================================ */
.product-card{cursor:pointer}.product-card .add-btn{cursor:pointer;position:relative;z-index:2}.product-detail-backdrop{z-index:260!important}.product-detail-modal{width:min(1080px,100%);max-height:calc(100dvh - 40px);overflow:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:28px;background:linear-gradient(145deg,#171321,#09070e);border:1px solid rgba(255,42,163,.25);border-radius:24px;padding:24px;box-shadow:0 30px 120px rgba(0,0,0,.75);position:relative}.detail-gallery{min-width:0}.detail-main-image{height:500px;border-radius:18px;border:1px solid var(--line);background:#08070c;display:grid;place-items:center;overflow:hidden}.detail-main-image img{width:100%;height:100%;object-fit:contain;padding:18px}.detail-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}.detail-thumb{height:78px;border:1px solid var(--line);border-radius:10px;background:#0c0a11;overflow:hidden;cursor:pointer;padding:0}.detail-thumb.active{border-color:#ff2aa3;box-shadow:0 0 0 1px rgba(255,42,163,.3)}.detail-thumb img{width:100%;height:100%;object-fit:cover}.detail-info{padding:35px 15px 10px 0}.detail-info h2{font:800 32px/1.12 "Space Grotesk";margin:9px 0}.detail-model{color:#9b95a6;font-size:11px;margin:0 0 18px}.detail-description{color:#b0aaba;font-size:12px;line-height:1.7;margin:0 0 24px}.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:20px}.detail-meta span{font-size:9px;color:#716c7b;text-transform:uppercase}.detail-meta strong{font-size:11px}.detail-buy{display:flex;align-items:center;justify-content:space-between;gap:14px}.detail-buy strong{font:900 27px "Space Grotesk"}.detail-buy .btn{white-space:nowrap}.detail-close{z-index:10;cursor:pointer}
@media(max-width:800px){.product-detail-modal{grid-template-columns:1fr;gap:16px;padding:18px}.detail-main-image{height:360px}.detail-info{padding:5px 5px 10px}.detail-info h2{font-size:25px}.detail-thumbs{grid-template-columns:repeat(5,1fr)}.detail-thumb{height:62px}.detail-buy{align-items:stretch;flex-direction:column}.detail-buy .btn{width:100%}}

/* ============================================================
   NEXUS.GG — secciones especiales
   ============================================================ */
.special-section{padding-top:30px}.special-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 24px}.special-tab{border:1px solid var(--line);background:#11101a;color:#aaa;padding:10px 14px;border-radius:999px;font-size:10px;cursor:pointer}.special-tab.active,.special-tab:hover{color:#fff;background:var(--gradient);border-color:transparent}.product-image{position:relative}.condition-badge{position:absolute;left:10px;bottom:10px;padding:6px 8px;border-radius:8px;background:rgba(10,8,15,.88);border:1px solid rgba(255,255,255,.12);font-size:8px;text-transform:uppercase;letter-spacing:.08em}.discount-badge{position:absolute;right:10px;top:10px;padding:6px 8px;border-radius:8px;background:#fff;color:#111;font-size:9px;font-weight:800}.old-price{text-decoration:line-through;opacity:.45;font-size:10px;margin-right:7px}.photo-missing{display:grid;place-items:center;height:100%;min-height:220px;padding:20px;text-align:center;color:#aaa;font-size:11px;background:radial-gradient(circle at 50% 35%,rgba(255,42,163,.13),transparent 45%),#0d0a12}.photo-missing strong{display:block;color:#eee;font-size:14px;margin-bottom:5px}.special-section .empty-state{grid-column:1/-1}.importer-note{margin-top:15px;color:#8e8798;font-size:11px;line-height:1.6}
@media(max-width:700px){.special-tabs{gap:7px}.special-tab{font-size:9px;padding:9px 11px}}

/* ============================================================
   FIX DEFINITIVO QR YAPE / PLIN - 22/09/2026
   La imagen conserva su proporcion original y nunca se recorta.
   ============================================================ */
#payment-backdrop .payment-modal .qr-box {
  width: 280px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 12px auto 18px auto !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  background: #fff !important;
  line-height: 0 !important;
}

#payment-backdrop .payment-modal .qr-box #payment-qr,
#payment-backdrop .payment-modal #payment-qr {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
}

@media (max-width: 600px) {
  #payment-backdrop .payment-modal .qr-box {
    width: min(280px, 100%) !important;
  }
}

/* ============================================================
   QR YAPE / PLIN - AJUSTE FINAL REAL
   Muestra la imagen completa sin recortes
   ============================================================ */

#payment-backdrop .payment-modal .qr-box {
    width: 300px !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;

    margin: 12px auto 18px auto !important;
    padding: 0 !important;

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

    overflow: hidden !important;
    box-sizing: border-box !important;

    background: #ffffff !important;
    border-radius: 18px !important;
    line-height: 0 !important;
}

#payment-backdrop .payment-modal .qr-box #payment-qr {
    display: block !important;

    /* CLAVE: altura fija + ancho automático */
    height: 300px !important;
    width: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 300px !important;

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

    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Celulares */
@media (max-width: 600px) {
    #payment-backdrop .payment-modal .qr-box {
        width: 260px !important;
        height: 260px !important;
        min-height: 260px !important;
        max-height: 260px !important;
    }

    #payment-backdrop .payment-modal .qr-box #payment-qr {
        height: 260px !important;
        max-height: 260px !important;
    }
}

/* ============================================================
   NEXUS.GG - QR YAPE/PLIN FINAL: IMAGEN COMPLETA
   El archivo original mide 662x822 (proporcion vertical).
   No usar aspect-ratio cuadrado ni height:100% para este QR.
   ============================================================ */
#payment-backdrop .payment-modal .qr-box {
  width: 240px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 12px auto 18px auto !important;
  display: block !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border-radius: 18px !important;
  line-height: 0 !important;
}

#payment-backdrop .payment-modal .qr-box #payment-qr {
  display: block !important;
  width: 240px !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 240px !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
}

@media (max-width: 600px) {
  #payment-backdrop .payment-modal .qr-box {
    width: min(240px, 100%) !important;
  }
  #payment-backdrop .payment-modal .qr-box #payment-qr {
    width: min(240px, 100%) !important;
    max-width: 100% !important;
  }
}