/* Stellar Network · paleta sacada del logo (Solgaleo, Lunala y Necrozma) */
:root {
  --ink: #201b26;
  --ink-2: #0b0910;
  --night: #0e0b16;
  --plum: #1a1524;
  --plum-2: #241d33;
  --plum-3: #2f2643;
  --slot: #110d18;
  --cream: #fff6d5;
  --sand: #f8dd9d;
  --gold-hi: #f7dc4b;
  --gold: #edb41e;
  --gold-lo: #ca820b;
  --ice-hi: #b2e0fc;
  --ice: #7bdefd;
  --ice-2: #22bceb;
  --ice-lo: #1383da;
  --royal: #3a62b7;
  --muted: #a69dbd;
  --success: #6ee7a0;
  --danger: #ff7a7a;
  --discord: #5865f2;
  --prism: linear-gradient(90deg, #e04848, #f7dc4b 25%, #7bdefd 50%, #3a62b7 75%, #a35ce0);
  --bevel: inset 3px 3px 0 rgba(255, 246, 213, .06), inset -3px -3px 0 rgba(0, 0, 0, .35);
  --notch: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
  --pixel: Montserrat, system-ui, sans-serif;
  --pixel-title: "Pixelify Sans", Montserrat, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 15px;
  color: var(--cream);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  background:
    radial-gradient(700px 480px at 8% 0%, rgba(237, 180, 30, .13), transparent 65%),
    radial-gradient(760px 520px at 100% 12%, rgba(34, 188, 235, .12), transparent 65%),
    radial-gradient(900px 700px at 50% 120%, rgba(58, 98, 183, .16), transparent 60%),
    var(--night);
  background-attachment: fixed;
}
body.no-scroll { overflow: hidden; }
a { color: var(--ice); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; }
::selection { background: var(--gold); color: var(--ink); }
.container { max-width: 1220px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; margin: 0; }
.ico { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.ico-lg { width: 40px; height: 40px; image-rendering: pixelated; flex: none; }
.ico-xl { width: 96px; height: 96px; image-rendering: pixelated; }

#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; image-rendering: pixelated; pointer-events: none; }

/* Anuncio */
.announcement { background: var(--gold); color: var(--ink); text-align: center; font-family: var(--pixel); font-weight: 600; font-size: 15px; padding: 7px 16px 8px; box-shadow: inset 0 -3px 0 var(--gold-lo), inset 0 3px 0 var(--gold-hi); }

/* Barra superior */
.topbar { position: sticky; top: 0; z-index: 30; background: #120e19; border-bottom: 3px solid var(--ink-2); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--prism); opacity: .8; }
.topbar .container { display: flex; align-items: center; gap: 22px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); font-family: var(--pixel); font-weight: 700; font-size: 19px; white-space: nowrap; }
.brand img { width: 38px; height: 38px; image-rendering: pixelated; }
.topbar-links { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.topbar-links::-webkit-scrollbar { display: none; }
.topbar-links a { color: var(--muted); font-family: var(--pixel); font-weight: 500; font-size: 16px; padding: 6px 12px; white-space: nowrap; }
.topbar-links a:hover { color: var(--cream); }
.topbar-links a.active { color: var(--gold-hi); }
.ip-chip { font-family: var(--pixel); font-weight: 600; font-size: 15px; color: var(--ice); background: var(--slot); border: 3px solid var(--ink-2); box-shadow: var(--bevel); padding: 5px 12px; cursor: pointer; clip-path: var(--notch); white-space: nowrap; }
.ip-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--success); margin-right: 8px; vertical-align: 2px; box-shadow: 0 0 0 2px rgba(110, 231, 160, .25); animation: blink 1.6s steps(2) infinite; }
.ip-chip:hover { color: var(--cream); }
@keyframes blink { 50% { opacity: .3; } }

/* Cabecera */
.hero { position: relative; padding: 46px 0 40px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--banner, none); background-size: cover; background-position: center; opacity: .3; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 44px; }
.hero-logo { position: relative; display: block; width: 250px; }
.hero-logo::before { content: ""; position: absolute; inset: -12%; background: radial-gradient(circle at 35% 55%, rgba(34, 188, 235, .28), transparent 55%), radial-gradient(circle at 65% 45%, rgba(247, 220, 75, .28), transparent 55%); filter: blur(10px); z-index: -1; animation: breathe 5s ease-in-out infinite; }
.hero-logo img { width: 100%; height: auto; image-rendering: pixelated; animation: hover 4s steps(8) infinite; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
@keyframes hover { 50% { transform: translateY(-10px); } }
@keyframes breathe { 50% { opacity: .55; transform: scale(.94); } }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--pixel); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ice); }
.kicker::before { content: ""; width: 26px; height: 3px; background: var(--prism); }
.title { margin: 0; font-family: var(--pixel-title); font-weight: 700; font-size: clamp(42px, 6.4vw, 76px); line-height: .95; letter-spacing: 1px; }
.title .sol, .title .luna { display: inline-block; text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 8px 0 var(--ink-2); }
.title .sol { color: var(--gold-hi); }
.title .luna { color: var(--ice); }
.tagline { margin: 16px 0 24px; color: var(--sand); font-size: 17px; max-width: 520px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Botones (estilo botón de Minecraft con los colores del logo) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-family: var(--pixel); font-weight: 600; font-size: 17px; line-height: 1; color: var(--ink); background: var(--gold); border: 3px solid var(--ink); padding: 11px 18px 13px; clip-path: var(--notch); box-shadow: inset 0 3px 0 var(--gold-hi), inset 0 -4px 0 var(--gold-lo); white-space: nowrap; transition: transform .08s; }
.btn:hover { background: #f2c91d; }
.btn:active { transform: translateY(2px); box-shadow: inset 0 4px 0 var(--gold-lo); }
.btn:disabled { filter: grayscale(.8); opacity: .6; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn-sm { font-size: 15px; padding: 8px 14px 10px; }
.btn img { width: 20px; height: 20px; }
.btn-ip { padding: 8px 18px 10px 10px; text-align: left; }
.btn-ip span { display: flex; flex-direction: column; gap: 4px; font-size: 19px; }
.btn-ip small { font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 600; color: #5c3d07; }
.btn-discord { color: #fff; background: var(--discord); box-shadow: inset 0 3px 0 #7983f5, inset 0 -4px 0 #3c45b8; }
.btn-discord:hover { background: #6773f5; }
.btn-discord:active { box-shadow: inset 0 4px 0 #3c45b8; }
.btn-ghost { color: var(--cream); background: var(--plum-3); box-shadow: inset 0 3px 0 #3d3255, inset 0 -4px 0 #1a1426; }
.btn-ghost:hover { background: #382d50; }

/* Layout */
.layout { display: grid; grid-template-columns: 272px 1fr; gap: 28px; padding-top: 6px; padding-bottom: 64px; align-items: start; }
.side-col { display: flex; flex-direction: column; gap: 18px; }
.side { display: contents; }
.content { min-width: 0; }
.panel { background: var(--plum); border: 3px solid var(--ink-2); box-shadow: var(--bevel); padding: 18px; clip-path: var(--notch); }
.panel + .panel, .panel + form.panel { margin-top: 18px; }
.panel h2 { margin: 0 0 14px; font-family: var(--pixel); font-weight: 600; font-size: 24px; }
.panel-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--pixel); font-weight: 600; font-size: 19px; color: var(--sand); }
.panel-title .ico { width: 28px; height: 28px; }

/* Categorías */
.categories { padding: 14px 10px 10px; }
.categories .panel-title { padding: 0 8px; }
.categories a { display: flex; align-items: center; gap: 12px; padding: 7px 10px; margin-bottom: 2px; color: var(--cream); font-weight: 500; font-size: 15px; border-left: 3px solid transparent; transition: background .1s; }
.categories a .ico { width: 30px; height: 30px; transition: transform .15s steps(3); }
.categories a:hover { background: var(--plum-2); }
.categories a:hover .ico { transform: translateY(-2px) rotate(-6deg); }
.categories a.active { background: var(--plum-3); border-left-color: var(--gold); color: var(--gold-hi); }
.cat-strip { display: none; }

/* Widgets */
.xp { height: 18px; background: var(--slot); border: 3px solid var(--ink-2); position: relative; }
.xp-fill { height: 100%; background: linear-gradient(var(--gold-hi) 0 35%, var(--gold) 35% 70%, var(--gold-lo) 70%); min-width: 6px; }
.xp::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 18px, var(--ink-2) 18px 21px); }
.goal-text { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; color: var(--muted); font-size: 13px; }
.goal-text strong { font-family: var(--pixel); font-size: 22px; color: var(--gold-hi); }
.top-buyer { display: flex; align-items: center; gap: 14px; }
.top-buyer img { height: 80px; width: auto; image-rendering: pixelated; }
.top-buyer strong { display: block; font-family: var(--pixel); font-size: 20px; color: var(--gold-hi); }
.top-buyer small { color: var(--muted); }
.recent { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: var(--slot); border: 3px solid var(--ink-2); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .45), inset -3px -3px 0 rgba(255, 255, 255, .05); padding: 3px; }
.slot img { image-rendering: pixelated; width: 100%; }
.slot:hover { border-color: var(--gold); }
.slot:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink-2); color: var(--cream); border: 2px solid var(--royal); font-size: 12px; font-weight: 500; padding: 5px 9px; white-space: nowrap; z-index: 5; pointer-events: none; }

/* Inicio y secciones */
.welcome { border-left: 0; position: relative; padding-left: 26px; }
.welcome::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--gold), var(--ice-2)); }
.welcome h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-family: var(--pixel); font-weight: 700; font-size: 30px; color: var(--cream); }
.welcome p { margin: 0 0 6px; color: var(--sand); max-width: 720px; }
.welcome p:last-child { margin-bottom: 0; }
.welcome strong { color: var(--gold-hi); font-weight: 600; }
.section-title { display: flex; align-items: center; gap: 14px; margin: 38px 0 16px; }
.section-title h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--pixel); font-weight: 700; font-size: 27px; white-space: nowrap; }
.section-title::after { content: ""; order: 1; flex: 1; height: 3px; background: repeating-linear-gradient(90deg, var(--plum-3) 0 9px, transparent 9px 15px); }
.section-title a { order: 2; font-family: var(--pixel); font-weight: 500; font-size: 16px; color: var(--ice); white-space: nowrap; }
.section-title a::after { content: " ›"; }
.section-title a:hover { color: var(--cream); }

/* Tarjetas de paquete */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; gap: 10px; background: var(--plum); border: 3px solid var(--ink-2); box-shadow: var(--bevel); padding: 12px; clip-path: var(--notch); transition: transform .12s steps(2), background .12s; }
.card:hover { transform: translateY(-4px); background: var(--plum-2); }
.slot-lg { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 16%; background: radial-gradient(circle at 50% 55%, rgba(58, 98, 183, .28), transparent 65%), var(--slot); border: 3px solid var(--ink-2); box-shadow: inset 4px 4px 0 rgba(0, 0, 0, .5), inset -4px -4px 0 rgba(255, 255, 255, .04); overflow: hidden; }
.slot-lg img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .4)); }
.card:hover .slot-lg { border-color: var(--gold); }
.card:hover .slot-lg img { animation: hop .6s steps(4) infinite alternate; }
.card:hover .slot-lg::after { content: ""; position: absolute; top: 12%; right: 14%; width: 15px; height: 15px; background: conic-gradient(from 45deg, transparent 0 25%, var(--gold-hi) 0 26%, transparent 0 50%, var(--gold-hi) 0 51%, transparent 0 75%, var(--gold-hi) 0 76%, transparent 0); clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%); background: var(--gold-hi); animation: blink .5s steps(2) infinite; }
@keyframes hop { to { transform: translateY(-7px); } }
.card-name { color: var(--cream); font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.card-name:hover { color: var(--gold-hi); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.card-foot .btn { flex: 1 0 auto; }
.price { font-family: var(--pixel); font-weight: 700; font-size: 22px; color: var(--gold-hi); text-shadow: 0 3px 0 var(--ink-2); white-space: nowrap; }
.price-lg { font-size: 32px; margin: 4px 0 10px; }

/* Página de paquete */
.product { display: grid; grid-template-columns: 280px 1fr; gap: 26px; align-items: start; }
.product-slot { padding: 18%; }
.product-slot img { animation: hop 1.2s steps(4) infinite alternate; }
.product h1 { margin: 0; font-family: var(--pixel); font-weight: 700; font-size: 34px; line-height: 1.1; }
.product .desc { color: var(--sand); }
.product .desc strong { color: var(--gold-hi); font-weight: 600; }
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--cream); }
.secure { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0 0; }

/* Formularios */
label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 7px; color: var(--sand); }
input[type=text], input[type=email], input[type=number], select, textarea { width: 100%; background: var(--slot); border: 3px solid var(--ink-2); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .4); color: var(--cream); padding: 11px 13px; font: inherit; border-radius: 0; }
input::placeholder { color: #6b6380; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
.player-input { display: flex; align-items: center; gap: 10px; }
.player-input img { width: 50px; height: 50px; image-rendering: pixelated; border: 3px solid var(--ink-2); background: var(--slot); flex: none; }
.gateways { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.gateway { position: relative; margin: 0; }
.gateway input { position: absolute; opacity: 0; }
.gateway > span { display: flex; flex-direction: column; gap: 8px; height: 100%; background: var(--slot); border: 3px solid var(--ink-2); padding: 11px 12px; cursor: pointer; }
.gateway b { font-weight: 600; color: var(--cream); }
.gateway i { display: flex; flex-wrap: wrap; gap: 5px; font-style: normal; }
.gateway i .pay { height: 24px; padding: 4px 6px; }
.gateway i .pay img { height: 14px; }
.gateway > span:hover { border-color: var(--plum-3); }
.gateway input:checked + span { border-color: var(--gold); background: #1d1708; }
.gateway input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--muted); }
.check input { margin-top: 4px; accent-color: var(--gold); }
.hint { color: var(--muted); font-size: 13px; margin: 7px 0 0; }
.alert { padding: 11px 14px; margin-bottom: 14px; font-weight: 500; border: 3px solid; }
.alert.error { background: #2a1116; border-color: #6b1f2a; color: #ffc4c4; }
.alert.success { background: #0f2419; border-color: #1f5b3a; color: #b9f5cf; }
.alert.info { background: #0d1d2b; border-color: #1d4b6e; color: var(--ice-hi); }

/* Logos de pago */
.pay-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pay { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 7px 10px; background: #2b2b2b; border: 2px solid var(--ink-2); }
.pay img { height: 18px; width: auto; }
.pay-visa { background: #1a1f71; }
.pay-mastercard { background: #2a2a2a; }
.pay-applepay { background: #000; }
.pay-googlepay { background: #3c4043; }
.pay-stripe { background: #635bff; }
.pay-paypal { background: #003087; }
.pay-mercadopago { background: #009ee3; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8, 6, 13, .82); animation: fade .15s; }
.modal-box { position: relative; width: min(880px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--plum); border: 3px solid var(--ink-2); box-shadow: var(--bevel); padding: 26px; clip-path: var(--notch); animation: pop .18s steps(3); }
.modal-box::before { content: ""; position: sticky; display: block; top: -26px; margin: -26px -26px 22px; height: 4px; background: var(--prism); }
.modal-box .panel { background: transparent; border: 0; padding: 0; box-shadow: none; clip-path: none; }
.modal-box .panel + form.panel { margin-top: 22px; padding-top: 18px; border-top: 3px dashed var(--plum-3); }
.modal-box .product { grid-template-columns: 220px 1fr; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 3px solid var(--ink-2); background: var(--plum-3); color: var(--cream); cursor: pointer; z-index: 2; font-size: 16px; }
.modal-close:hover { background: #e04848; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

/* Estado de orden */
.status { text-align: center; padding: 40px 20px; }
.status .big { display: grid; place-items: center; min-height: 100px; }
.status .big img { animation: hop 1s steps(4) infinite alternate; }
.big-x { font-family: var(--pixel); font-size: 80px; color: var(--danger); line-height: 1; }
.status h1 { margin: 12px 0 6px; font-family: var(--pixel); font-size: 34px; }
.steps { display: grid; gap: 8px; text-align: left; max-width: 460px; margin: 22px auto; }
.step { display: flex; gap: 12px; align-items: center; background: var(--slot); border: 3px solid var(--ink-2); padding: 11px 14px; }
.step .dot { width: 12px; height: 12px; background: var(--plum-3); flex: none; }
.step.done .dot { background: var(--success); }
.step.wait .dot { background: var(--gold); animation: blink 1s steps(2) infinite; }
.step.error { border-color: #6b1f2a; }
.step.error .dot { background: var(--danger); }

/* Pie */
.footer { position: relative; background: #0b0910; border-top: 3px solid var(--ink); padding: 40px 0 0; }
.footer::before { content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 2px; background: var(--prism); opacity: .7; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 34px; }
.footer-about .brand { margin-bottom: 12px; }
.footer h4 { margin: 0 0 12px; font-family: var(--pixel); font-weight: 600; font-size: 18px; color: var(--sand); }
.footer-grid > div > a:not(.brand) { display: block; color: var(--muted); padding: 3px 0; }
.footer-grid > div > a:not(.brand):hover { color: var(--gold-hi); }
.footer-bottom { border-top: 2px solid var(--ink); margin-top: 32px; padding-top: 16px; padding-bottom: 22px; color: #6b6380; font-size: 13px; }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 90px); font-family: var(--pixel); font-weight: 600; font-size: 17px; background: var(--gold); color: var(--ink); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 var(--gold-hi), inset 0 -4px 0 var(--gold-lo); padding: 10px 20px 12px; clip-path: var(--notch); transition: transform .2s steps(4); z-index: 70; }
.toast.show { transform: translate(-50%, 0); }

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .side-col { order: 2; }
  .categories { display: none; }
  .side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
  .side .panel + .panel { margin-top: 0; }
  .cat-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 16px; }
  .cat-strip::-webkit-scrollbar { display: none; }
  .cat-strip a { display: flex; align-items: center; gap: 8px; flex: none; color: var(--cream); background: var(--plum); border: 3px solid var(--ink-2); padding: 5px 12px 5px 8px; font-family: var(--pixel); font-size: 16px; }
  .cat-strip a:first-child { padding-left: 12px; }
  .cat-strip a .ico { width: 26px; height: 26px; }
  .cat-strip a.active { border-color: var(--gold); color: var(--gold-hi); }
  .topbar-links { display: none; }
  .topbar .container { justify-content: space-between; }
}
@media (max-width: 760px) {
  .hero { padding: 26px 0 26px; }
  .hero-grid { grid-template-columns: 1fr; gap: 16px; text-align: center; justify-items: center; }
  .hero-logo { width: 170px; }
  .tagline { margin: 12px auto 20px; font-size: 15.5px; }
  .hero-actions { justify-content: center; }
  .product, .modal-box .product { grid-template-columns: 1fr; }
  .product-slot { max-width: 230px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card { padding: 8px; gap: 8px; }
  .card-name { font-size: 14px; }
  .card-foot { flex-direction: column; align-items: stretch; }
  .price { font-size: 20px; }
  .section-title h2 { font-size: 22px; }
  .section-title h2 .ico-lg { width: 32px; height: 32px; }
  .welcome h1 { font-size: 24px; }
  .modal { padding: 0; align-items: end; }
  .modal-box { max-height: 92vh; padding: 20px 16px; }
  .modal-box::before { top: -20px; margin: -20px -16px 18px; }
  .brand span { display: none; }
  .ip-chip { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Código de descuento */
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { text-transform: uppercase; }
.coupon-row input::placeholder { text-transform: none; }
.coupon-row .btn { padding: 0 16px; }
.coupon-msg { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; min-height: 0; }
.coupon-msg:empty { display: none; }
.coupon-msg.good { color: var(--success); }
.coupon-msg.bad { color: var(--danger); }
[data-pay-block][hidden] { display: none; }

/* Aviso de modo pruebas */
.test-banner { background: repeating-linear-gradient(135deg, #e04848 0 14px, #b83636 14px 28px); color: #fff; text-align: center; font-weight: 700; font-size: 14px; padding: 7px 16px; letter-spacing: .02em; }

/* Promoción */
.promo-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 8px 16px; background: linear-gradient(90deg, #3a62b7, #1383da 50%, #3a62b7); color: #fff; font-size: 14.5px; box-shadow: inset 0 -3px 0 #22408a; }
.promo-strip b { color: var(--gold-hi); }
.promo-pct { font-weight: 800; color: var(--ink); background: var(--gold-hi); padding: 2px 8px; box-shadow: inset 0 -2px 0 var(--gold-lo); }
.promo-ends { opacity: .85; font-size: 13px; }
.price-wrap { display: inline-flex; flex-direction: column; line-height: 1.1; }
.price-old { color: var(--muted); font-size: 13px; font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 122, 122, .8); }
.price-line { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.price-line .price-lg { margin: 0; }
.price-line .price-old { font-size: 16px; }
.sale-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-weight: 800; font-size: 13px; color: var(--ink); background: var(--gold-hi); border: 2px solid var(--ink); padding: 2px 7px; box-shadow: inset 0 -2px 0 var(--gold-lo); }
.sale-badge.inline { position: static; font-size: 15px; }

/* Mantenimiento */
.maint-banner { background: repeating-linear-gradient(135deg, #edb41e 0 14px, #ca820b 14px 28px); color: var(--ink); text-align: center; font-weight: 700; font-size: 14px; padding: 7px 16px; }
.maintenance-box { text-align: center; border-color: var(--gold-lo); }
.maintenance-box h2 { color: var(--gold-hi); }