@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Nunito:wght@700;800;900&display=swap');
/* SECREWARS compra Mobile Legends — estilo tipo Bonoks: fondo negro,
   amarillo protagonista, banner grande, pasos numerados y resumen lateral.
   Solo se carga en /recargas/mobile-legends. No toca packs, precios,
   campos del formulario ni lógica de pago: solo presentación. */

.buy-page{background:#0a0a0a !important; color:#fff; font-family:'Nunito', system-ui, sans-serif; border-color:#1f1f1f !important;}

/* Banner: arte del juego a lo ancho, degradado negro a la izquierda. */
.buy-page .buy-hero, .buy-page .bnx-hero{
  min-height:230px !important; padding:34px 32px !important; margin:-6px -6px 20px !important;
  border:none !important; border-radius:20px !important;
  background:linear-gradient(100deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.25) 100%), var(--hero-bg, none) center/cover no-repeat, #000 !important;
  box-shadow:none !important;
}
.buy-page .buy-hero::before, .buy-page .buy-hero::after{display:none !important;}
.buy-page .buy-hero h1, .buy-page .buy-hero .h2{
  font-family:'Bungee', 'Nunito', sans-serif !important; font-size:clamp(26px,4vw,44px) !important;
  line-height:1.1 !important; text-shadow:0 3px 18px rgba(0,0,0,.85) !important;
}
.buy-page .buy-hero h1::first-letter, .buy-page .buy-hero .h2::first-letter{-webkit-text-fill-color:#facc15 !important; color:#facc15 !important;}
.buy-page .buy-hero .pill{background:#facc15 !important; color:#000 !important; border:none !important; font-weight:900 !important;}
.buy-page .bnx-hero-sub{margin:10px 0 14px; font-size:16px; line-height:1.5; color:#e5e5e5; max-width:560px;}
.buy-page .buy-hero .buy-chip{background:rgba(0,0,0,.55) !important; border:1px solid rgba(255,255,255,.25) !important; color:#fff !important;}

/* Tira sorteo + horario, pareja. */
.buy-info{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0;}
.buy-info > .flash:only-child{grid-column:1 / -1;}
.buy-page .buy-hero .bnx-hero-sub a{color:#facc15; font-weight:800;}
/* Logo verdadero del juego en el hero: la tarjeta oficial ya subida (logo sobre su fondo). */
.buy-page .buy-hero .bnx-logo{flex:none; width:96px; height:96px; border-radius:22px; background-image:var(--card-bg); background-size:cover; background-position:center; border:1px solid rgba(255,255,255,.25); box-shadow:0 14px 34px -10px rgba(0,0,0,.7), 0 0 0 6px rgba(255,255,255,.04);}
@media (max-width:640px){ .buy-page .buy-hero .bnx-logo{width:72px; height:72px; border-radius:18px;} }
.buy-page .buy-hero .bnx-hero-sub{margin:10px 0 14px; font-size:16px; line-height:1.5; color:#e5e5e5; max-width:640px;}
/* Páginas genéricas: pestañas de packs y bloques bb-top con el mismo fondo. */
.buy-page .bb-top{margin:14px 0;}
.buy-page .bb-top .flash, .buy-page .bb-top .field{color:#e5e5e5;}
.buy-page .pack small.rb-kind{color:#a3a3a3 !important;}
.buy-info > .flash{display:block !important; margin:0 !important; border-radius:16px !important; line-height:1.55 !important; background:#141414 !important; border:1px solid #262626 !important; border-left:4px solid #facc15 !important;}
@media (max-width:700px){ .buy-info{grid-template-columns:1fr;} }

/* Layout dos columnas: pasos a la izquierda, resumen fijo a la derecha. */
.buy-page form{background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important;}
.bnx-layout{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start;}
.bnx-main{min-width:0;}
.bnx-side{position:sticky; top:16px; background:#141414; border:1px solid #262626; border-radius:20px; padding:20px;}
.bnx-side-title{margin:0 0 14px; font-family:'Bungee', sans-serif; font-size:17px; color:#facc15;}
.bnx-trust{list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid #262626; display:grid; gap:10px; font-size:14px; line-height:1.5; color:#d4d4d4;}
.bnx-side-links{margin:14px 0 0; font-size:14px;}
.bnx-side-links a{color:#facc15; font-weight:800;}
@media (max-width:900px){ .bnx-layout{grid-template-columns:1fr;} .bnx-side{position:static;} }

/* Pasos: número amarillo en círculo, título en mayúsculas. */
.buy-step{font-family:'Nunito', sans-serif !important; font-weight:900 !important; font-size:19px !important; text-transform:uppercase; letter-spacing:.02em; border-bottom:none !important; margin:24px 0 14px !important;}
.buy-step .step-n{background:#facc15 !important; color:#000 !important; box-shadow:none !important; font-weight:900 !important;}
.buy-page .field span{font-weight:800 !important; font-size:14px !important; color:#e5e5e5 !important;}
.buy-page .field input{padding:15px 16px !important; font-size:16px !important; border-radius:14px !important; background:#141414 !important; border:1.5px solid #2a2a2a !important; color:#fff !important;}
.buy-page .field input::placeholder{color:#737373 !important;}
.buy-page .field input:focus{border-color:#facc15 !important; box-shadow:0 0 0 4px rgba(250,204,21,.25) !important;}

/* Packs: tarjetas negras, 3 por línea, precio amarillo abajo a la derecha. */
.buy-page .packs{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important;}
.buy-page .pack{min-height:132px !important; padding:18px 14px 14px !important; border-radius:18px !important; background:#141414 !important; border:1.5px solid #262626 !important; box-shadow:none !important;}
.buy-page .pack:hover{transform:translateY(-3px) !important; border-color:#525252 !important;}
.buy-page .pack:has(>input:checked), .buy-page .pack.on{border-color:#facc15 !important; box-shadow:0 0 0 2px rgba(250,204,21,.4) !important; background:#1a1a0a !important;}
.buy-page .pack:has(>input:checked)::after{background:#facc15 !important; color:#000 !important;}
.buy-page .pack b{font-size:21px !important; font-weight:900 !important;}
.buy-page .pack span > small:not(.rb-kind):not(.rb-stock){font-size:18px !important; color:#facc15 !important; align-self:flex-end;}
@media (max-width:640px){ .buy-page .packs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} }

/* Resumen y botón: total amarillo, botón amarillo a lo ancho. */
.buy-page .buy-pay{position:static !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; margin:0 !important; padding:0 !important; background:transparent !important; border:none !important; box-shadow:none !important;}
.buy-page .buy-sum-l{color:#a3a3a3 !important; font-size:14px !important; white-space:normal !important;}
.buy-page .buy-sum-p{color:#facc15 !important; font-size:26px !important;}
.buy-page .buy-pay .btn.block{width:100% !important; min-width:0 !important; background:#facc15 !important; color:#000 !important; font-weight:900 !important; box-shadow:none !important;}
.buy-page .buy-pay .btn.block[disabled]{background:#3f3f3f !important; color:#a3a3a3 !important;}
.buy-page .prov{background:#141414 !important; border:1.5px solid #262626 !important;}
.buy-page .prov:has(>input:checked), .buy-page .prov.on{border-color:#facc15 !important; box-shadow:0 0 0 2px rgba(250,204,21,.4) !important;}
.buy-page .check.terms{background:#141414 !important; border:1px solid #262626 !important; border-radius:14px !important; font-size:15px !important;}
@media (prefers-reduced-motion:reduce){ .buy-page .buy-hero, .buy-page .pack{animation:none !important; transition:none !important;} }

/* Halloween (tema activo del sitio): acento naranja sobre el mismo sistema negro/amarillo. */
body.theme-halloween .buy-page .buy-hero .pill::before{content:"🎃 ";}
body.theme-halloween .buy-page .buy-hero h1::first-letter, body.theme-halloween .buy-page .buy-hero .h2::first-letter{color:#fb923c !important; -webkit-text-fill-color:#fb923c !important;}
body.theme-halloween .buy-step .step-n{background:#f97316 !important;}
body.theme-halloween .bnx-side-title{color:#fb923c;}
body.theme-halloween .buy-page .buy-sum-p{color:#fb923c !important;}
body.theme-halloween .buy-page .buy-pay .btn.block{background:linear-gradient(90deg,#facc15,#f97316) !important;}
body.theme-halloween .buy-page .pack:has(>input:checked), body.theme-halloween .buy-page .pack.on{border-color:#f97316 !important; box-shadow:0 0 0 2px rgba(249,115,22,.4) !important; background:#1c120a !important;}
body.theme-halloween .buy-page .pack:has(>input:checked)::after{background:#f97316 !important;}
body.theme-halloween .buy-page .pack span > small:not(.rb-kind):not(.rb-stock){color:#fb923c !important;}
body.theme-halloween .buy-page .buy-hero .bnx-logo{border-color:rgba(251,146,60,.6);}

/* Packs chicos, con imagen chica a la izquierda (estilo Bonoks). */
.buy-page .pack{min-height:88px !important; padding:12px 14px !important;}
.buy-page .pack > span{display:grid !important; grid-template-columns:44px 1fr auto; grid-template-rows:auto auto; column-gap:12px; align-items:center; width:100%;}
.buy-page .pack .tier-img, .buy-page .pack img.tier-art{width:44px !important; height:44px !important; object-fit:contain; border-radius:10px; grid-row:1 / 3; margin:0 !important; background:#0a0a0a;}
.buy-page .pack b{font-size:19px !important; grid-column:2;}
.buy-page .pack .pk-unit{grid-column:2; grid-row:2; font-size:13px !important; color:#a3a3a3 !important; font-style:normal;}
.buy-page .pack span > small:not(.rb-kind):not(.rb-stock){grid-column:3; grid-row:1 / 3; font-size:17px !important;}
.buy-page .pack .pk-badge, .buy-page .pack .badge{grid-column:2;}
/* Bono de primera recarga (ML automática): sin regla propia, el navegador lo auto-ubicaba en la
   columna angosta de 44px y su texto largo desbordaba en horizontal, solapándose con el precio y
   cortando la tarjeta en móvil. Celda propia debajo del título, sin desbordar. */
.buy-page .pack .pk-bonus{grid-column:2 / 4; grid-row:3; font-size:13px !important; color:#facc15 !important; font-style:normal; line-height:1.35; overflow-wrap:anywhere;}
/* Ningún hijo del grid de packs empuja la tarjeta fuera del viewport en móvil. */
.buy-page .pack > span > *{min-width:0;}
.buy-page .pack b, .buy-page .pack em{overflow-wrap:break-word;}
/* En móvil la tarjeta de 2 columnas deja ~0px para el título (44px de imagen + precio): por eso
   el título se apilaba palabra por palabra. Solo en la página automática (sin imágenes en los
   packs), las tarjetas se apilan en una columna: título, bono y precio, sin recortes. */
@media (max-width:640px){
  .buy-page form[action="/recargas/mobile-legends/automatica"] .pack > span{grid-template-columns:1fr !important;}
  .buy-page form[action="/recargas/mobile-legends/automatica"] .pack b,
  .buy-page form[action="/recargas/mobile-legends/automatica"] .pack .pk-bonus,
  .buy-page form[action="/recargas/mobile-legends/automatica"] .pack span > small:not(.rb-kind):not(.rb-stock),
  .buy-page form[action="/recargas/mobile-legends/automatica"] .pack .pk-badge,
  .buy-page form[action="/recargas/mobile-legends/automatica"] .pack .badge{grid-column:1 !important; grid-row:auto !important;}
}
/* Categorías: Diamantes / Skins / Pase / Sorteo. */
.bnx-cats{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px;}
.bnx-cat{padding:11px 18px; border-radius:14px; background:#141414; border:1.5px solid #262626; color:#e5e5e5 !important; font-weight:900; text-decoration:none !important;}
.bnx-cat.on{background:#facc15; border-color:#facc15; color:#000 !important;}
body.theme-halloween .bnx-cat.on{background:#f97316; border-color:#f97316;}
/* Información + Preguntas frecuentes (acordeón propio, sin JS). */
.bnx-info{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:28px 0 8px;}
.bnx-info-title{font-family:'Bungee', sans-serif; font-size:19px; color:#facc15; margin:0 0 14px; text-transform:uppercase;}
body.theme-halloween .bnx-info-title{color:#fb923c;}
.bnx-info details{background:#141414; border:1px solid #262626; border-radius:16px; padding:14px 16px; margin-bottom:10px;}
.bnx-info summary{font-weight:900; cursor:pointer; list-style:none;}
.bnx-info summary::-webkit-details-marker{display:none;}
.bnx-info details p, .bnx-info details ol{color:#d4d4d4; font-size:15px; line-height:1.6; margin:10px 0 2px; padding-left:20px;}
.bnx-info details p{padding-left:0;}
@media (max-width:800px){ .bnx-info{grid-template-columns:1fr;} }
/* También te puede interesar. */
.bnx-also{margin:24px 0 8px;}
.bnx-also-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px;}
.bnx-also-card{display:block; border-radius:18px; overflow:hidden; background:#141414; border:1px solid #262626; color:#fff !important; text-decoration:none !important;}
.bnx-also-card:hover{border-color:#facc15; transform:translateY(-3px);}
.bnx-also-img{display:block; aspect-ratio:4/5; background-image:var(--card-bg); background-size:cover; background-position:center;}
.bnx-also-txt{display:block; padding:12px 12px 13px;}
.bnx-also-txt b{display:block; font-size:14px; line-height:1.3;}
.bnx-also-txt span{display:block; margin-top:4px; color:#facc15; font-weight:900; font-size:13px;}
@media (max-width:900px){ .bnx-also-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:560px){ .bnx-also-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }

.bnx-also-img.rb-contain{background-size:contain; background-color:#000; background-repeat:no-repeat;}

/* Skins: tarjetas verticales con la imagen arriba grande, no chiquita al costado. */
.buy-page .pack.skin-card{min-height:auto !important; padding:0 0 14px !important; overflow:hidden;}
.buy-page .pack.skin-card > span{display:block !important;}
.buy-page .pack.skin-card .tier-img, .buy-page .pack.skin-card img.tier-art, .buy-page .pack.skin-card .tier-art{width:100% !important; height:150px !important; object-fit:cover !important; border-radius:0 !important; margin:0 0 10px !important; background:#0a0a0a;}
.buy-page .pack.skin-card b{display:block !important; font-size:18px !important; padding:0 14px; line-height:1.25;}
.buy-page .pack.skin-card em{display:block !important; padding:2px 14px 0; font-style:normal; color:#a3a3a3 !important; font-size:13px !important;}
.buy-page .pack.skin-card span > small:not(.rb-kind):not(.rb-stock){display:block !important; padding:6px 14px 0; font-size:17px !important; text-align:left;}

/* ===== ML AUTOMÁTICA — rediseño (solo esta página: nunca la manual ni otros juegos) ===== */
/* 1. Cuenta en revelado progresivo: oculta hasta elegir categoría o pack. Sin JS, la clase
   mlauto-pending nunca se agrega y el bloque queda visible: el formulario sigue completo. */
.buy-page form[action="/recargas/mobile-legends/automatica"].mlauto-pending .mlauto-account{display:none;}
/* En móvil, los campos ID/Servidor apilan a lo ancho (la fila base es flex en línea). */
@media (max-width:640px){
  .buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-account .row{flex-direction:column; align-items:stretch;}
  .buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-account .row .field{flex:none; width:100%;}
}

/* 3. Packs compactos, 3 columnas en escritorio y 2 en móvil (la grilla base ya es 3/2).
   Tarjeta en columna centrada con gema 3D hecha en CSS (sin archivos de imagen). */
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack{min-height:0 !important; padding:14px 10px 12px !important;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack > span{display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center; gap:5px; grid-template-columns:none !important;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack .pk-gem{flex:none; width:40px; height:40px; margin:2px 0 4px; background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 35%,#0369a1 70%,#0c4a6e 100%); clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%); filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(56,189,248,.45)); position:relative;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack .pk-gem:not(.pk-gem-pass)::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 45%); clip-path:polygon(50% 0,100% 38%,50% 55%,0 38%);}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack .pk-gem-pass{background:linear-gradient(135deg,#fde68a,#f59e0b 60%,#b45309); clip-path:none; border-radius:10px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), 0 4px 8px rgba(0,0,0,.5);}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack b{grid-column:auto !important; grid-row:auto !important; font-size:16px !important; line-height:1.25; text-align:center;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack .pk-bonus{grid-column:auto !important; grid-row:auto !important; font-size:12.5px !important; text-align:center;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack span > small:not(.rb-kind):not(.rb-stock){grid-column:auto !important; grid-row:auto !important; align-self:center !important; margin-top:2px;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack .pk-badge,
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack .badge{grid-column:auto !important; grid-row:auto !important;}

/* 5. Baldosas de categorías con icono 3D (mismo filtrado: clases bb-tab y data-grp-tab). */
.buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-tiles .bb-tab{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; padding:16px 8px 12px; background:linear-gradient(180deg,#1e1e1e,#141414); border:1.5px solid #262626; border-radius:18px; color:#e5e5e5; font-weight:900; cursor:pointer; text-align:center;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-tiles .bb-tab.on{background:linear-gradient(180deg,#facc15,#eab308); border-color:#facc15; color:#000;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-tiles .bb-tab span{overflow-wrap:anywhere; font-size:15px; line-height:1.2;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-tiles .bb-tab small{background:rgba(255,255,255,.12); border-radius:999px; padding:2px 9px; font-size:12px;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-tiles .bb-tab.on small{background:rgba(0,0,0,.15);}
.buy-page form[action="/recargas/mobile-legends/automatica"] .tile-ico{flex:none; position:relative; width:44px; height:44px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));}
.buy-page form[action="/recargas/mobile-legends/automatica"] .tile-diamond{background:linear-gradient(135deg,#7dd3fc 0%,#38bdf8 35%,#0369a1 70%,#0c4a6e 100%); clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);}
.buy-page form[action="/recargas/mobile-legends/automatica"] .tile-diamond::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 45%); clip-path:polygon(50% 0,100% 38%,50% 55%,0 38%);}
.buy-page form[action="/recargas/mobile-legends/automatica"] .tile-pass{background:linear-gradient(135deg,#fde68a,#f59e0b 60%,#b45309); border-radius:10px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);}
.buy-page form[action="/recargas/mobile-legends/automatica"] .tile-mem{background:linear-gradient(135deg,#c4b5fd,#7c3aed 60%,#4c1d95); border-radius:12px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);}
@media (max-width:640px){
  .buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-tiles{gap:8px;}
  .buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-tiles .bb-tab{padding:12px 4px 10px;}
  .buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-tiles .bb-tab span{font-size:13px;}
  .buy-page form[action="/recargas/mobile-legends/automatica"] .tile-ico{width:36px; height:36px;}
}

/* 6. Bloque Pagá: todo junto en un solo bloque ordenado. */
.buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-pay{background:#101010; border:1.5px solid #262626; border-radius:18px; padding:18px 16px; margin-top:10px; display:flex; flex-direction:column; gap:14px;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .mlauto-pay .buy-step{margin:0;}

/* 8. Datos del producto + Preguntas frecuentes: acordeón colapsado por defecto. */
.buy-page .mlauto-acc{background:#141414; border:1px solid #262626; border-radius:16px; padding:14px 16px; margin-bottom:10px;}
.buy-page .mlauto-acc > summary{font-family:'Bungee', sans-serif; font-size:19px; color:#facc15; text-transform:uppercase; cursor:pointer; list-style:none;}
.buy-page .mlauto-acc > summary::-webkit-details-marker{display:none;}
.buy-page .mlauto-acc > summary::after{content:" ▾"; float:right;}
.buy-page .mlauto-acc[open] > summary::after{content:" ▴";}
body.theme-halloween .buy-page .mlauto-acc > summary{color:#fb923c;}

/* ===== ML — diamantes con imagen 3D (manual, automática y skins) ===== */
/* Iconos chicos de diamante en pestañas, chips y encabezados de ML. Solo las páginas de ML
   emiten estas clases, así que no afectan a otros juegos ni a pases/membresías/skins. */
.buy-page img.ml-ico{width:20px !important; height:20px !important; object-fit:contain; vertical-align:-4px;}
.buy-page .buy-chip img.ml-ico{margin-right:4px;}
.buy-page .bnx-side-title img.ml-ico{vertical-align:-5px; margin-right:2px;}
.buy-page .buy-hero img.hero-gem{flex:none; width:64px; height:64px; object-fit:contain; border-radius:18px;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .tile-ico.tile-img{object-fit:contain;}
/* Tarjetas de la automática: modelo horizontal SOLO para diamantes (imagen izquierda, cantidad,
   precio abajo a la derecha). Pases y membresías siguen con su diseño actual. */
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) > span{display:grid !important; grid-template-columns:56px minmax(0,1fr) auto !important; grid-template-rows:auto auto !important; column-gap:12px; align-items:center; text-align:left !important; flex-direction:row !important;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) img.pk-img{grid-column:1; grid-row:1 / 3; width:56px !important; height:56px !important; object-fit:contain;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) b{grid-column:2 !important; grid-row:1 !important; text-align:left !important;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) .pk-bonus{grid-column:2 !important; grid-row:2 !important; text-align:left !important;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) span > small:not(.rb-kind):not(.rb-stock){grid-column:3 !important; grid-row:1 / 3 !important; align-self:end !important;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) .pk-badge,
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) .badge{grid-column:2 !important; grid-row:1 !important;}
/* En móvil, las tarjetas de diamantes de ML ocupan todo el ancho (modelo de la captura del dueño);
   pases, membresías y otros juegos no cambian. */
@media (max-width:640px){
  .buy-page form[action="/recargas/mobile-legends"] .pack{grid-column:1 / -1 !important;}
  .buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass){grid-column:1 / -1 !important;}
}
/* ===== ML — tarjetas modelo gris (manual y automática, solo diamantes) ===== */
/* Fondo gris, icono 3D chico a la izquierda, texto completo centrado, precio abajo a la derecha.
   Pases, membresías, skins y otros juegos no cambian. */
.buy-page form[action="/recargas/mobile-legends"] .pack,
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass){
  background:#262626 !important; border-color:#3a3a3a !important;
}
.buy-page form[action="/recargas/mobile-legends"] .pack > span{
  display:grid !important; grid-template-columns:56px minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important; column-gap:12px; align-items:center; width:100%;
}
.buy-page form[action="/recargas/mobile-legends"] .pack img.pk-img{
  grid-column:1; grid-row:1 / 3; width:56px !important; height:56px !important;
  object-fit:contain; margin:0 !important;
}
.buy-page form[action="/recargas/mobile-legends"] .pack b{
  grid-column:2 !important; grid-row:1 !important; text-align:center !important;
  overflow-wrap:anywhere; min-width:0;
}
.buy-page form[action="/recargas/mobile-legends"] .pack .pk-unit{
  grid-column:2 !important; grid-row:2 !important; text-align:center !important;
  text-transform:uppercase; overflow-wrap:anywhere;
}
.buy-page form[action="/recargas/mobile-legends"] .pack span > small:not(.rb-kind):not(.rb-stock){
  grid-column:3 !important; grid-row:1 / 3 !important; align-self:end !important; text-align:right;
}
.buy-page form[action="/recargas/mobile-legends"] .pack .pk-badge,
.buy-page form[action="/recargas/mobile-legends"] .pack .badge{grid-column:2 !important;}
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) b,
.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) .pk-bonus{
  text-align:center !important;
}
@media (max-width:640px){
  .buy-page form[action="/recargas/mobile-legends"] .pack{grid-column:1 / -1 !important;}
}
/* ===== ML diamantes — layout final (manual y automática) =====
   Icono fijo a la izquierda; título, bono y precio apilados en la columna de texto,
   que ocupa todo el ancho restante y corta solo por palabras. Altura compacta y pareja. */
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .packs,
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .packs{
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important; align-items:stretch;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack,
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass){
  grid-column:auto !important; min-height:0 !important; padding:12px 14px !important; text-align:left !important;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack > span,
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) > span{
  display:grid !important; grid-template-columns:48px minmax(0,1fr) !important; grid-template-rows:none !important;
  grid-auto-rows:auto; column-gap:12px !important; row-gap:2px; align-items:start !important; align-content:center;
  text-align:left !important; width:100%; height:100%;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack > span > *,
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) > span > *{
  grid-column:2 !important; grid-row:auto !important; min-width:0; text-align:left !important;
  align-self:start !important; overflow-wrap:normal !important; word-break:normal !important; hyphens:none !important;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack img.pk-img,
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) img.pk-img{
  grid-column:1 !important; grid-row:1 / span 3 !important; align-self:center !important;
  width:48px !important; height:48px !important; object-fit:contain; margin:0 !important;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack b,
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) b{
  font-size:16px !important; line-height:1.25 !important; text-wrap:pretty;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack .pk-unit{font-size:12px !important; margin-top:-2px;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) .pk-bonus{
  font-size:12px !important; line-height:1.3 !important;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack span > small:not(.rb-kind):not(.rb-stock),
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) span > small:not(.rb-kind):not(.rb-stock){
  margin-top:6px !important; padding-top:0 !important; font-size:17px !important; white-space:nowrap;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack .pk-badge,
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) .pk-badge{
  position:absolute !important; grid-column:auto !important; top:-10px !important; left:auto !important; right:12px; transform:none !important;
}
@media (max-width:640px){
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .packs,
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .packs{grid-template-columns:minmax(0,1fr) !important; gap:10px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack,
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass){padding:10px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack > span,
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) > span{grid-template-columns:36px minmax(0,1fr) !important; column-gap:8px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack img.pk-img,
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) img.pk-img{width:36px !important; height:36px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack b,
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) b{font-size:14.5px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends"] .pack span > small:not(.rb-kind):not(.rb-stock),
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/mobile-legends/automatica"] .pack:not(.pk-pass) span > small:not(.rb-kind):not(.rb-stock){font-size:15px !important;}
}
/* Mobile Legends: código de creador compacto en el paso "Pagá" (una fila) y cambio de pestaña en el lugar. */
.buy-page .bb-creator-compact{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;margin:10px 0;}
.buy-page .bb-creator-compact .bb-creator-lbl{margin:0;flex:none;font-size:11px;}
.buy-page .bb-creator-compact .bb-creator-row{flex:1 1 220px;min-width:0;}
.buy-page .bb-creator-compact .bb-creator-row input{padding:6px 10px;}
.buy-page .bb-creator-compact .bb-creator-msg{flex-basis:100%;margin:0;font-size:11.5px;}
.buy-page .mlauto-notes{margin:12px 0 4px;}
#main.ml-switching .bnx-layout{opacity:.55;transition:opacity .15s;}
@media (prefers-reduced-motion: reduce){#main.ml-switching .bnx-layout{transition:none;}}

/* FF LATAM hero title: estilo del logo del banner — pesada, inclinada, blanca sobre el arte (texto con estilo, no imagen) */
.buy-page .ff-head .ff-title{
  font-family:'Bungee','Nunito',sans-serif !important;
  font-weight:900 !important;
  font-style:italic !important;
  transform:skewX(-8deg);
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 2px 0 #000,0 4px 14px rgba(0,0,0,.85),0 0 28px rgba(0,0,0,.6) !important;
  white-space:nowrap;
}
.buy-page .ff-head .ff-title::first-letter{color:#fff !important;-webkit-text-fill-color:#fff !important;}

/* FF LATAM: tarjetas verticales estilo referencia — imagen arriba, contenido abajo (solo form de /recargas/free-fire) */
form[action="/recargas/free-fire"] .packs{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:14px !important;}
form[action="/recargas/free-fire"] .pack{position:relative !important;min-height:0 !important;padding:0 0 14px !important;overflow:hidden !important;display:flex !important;flex-direction:column !important;}
form[action="/recargas/free-fire"] .pack > span{display:block !important;}
form[action="/recargas/free-fire"] .ff-card-img{display:block !important;background:#0a0a0a !important;height:120px !important;text-align:center !important;overflow:hidden !important;}
form[action="/recargas/free-fire"] .ff-card-img img{height:100% !important;width:auto !important;max-width:100% !important;object-fit:contain !important;margin:0 !important;}
form[action="/recargas/free-fire"] .ff-card-ticket{font-size:56px !important;line-height:120px !important;}
form[action="/recargas/free-fire"] .ff-card-body{display:block !important;padding:12px 12px 0 !important;text-align:left !important;}
form[action="/recargas/free-fire"] .ff-card-body b{display:block !important;font-size:22px !important;font-weight:900 !important;color:#fff !important;}
form[action="/recargas/free-fire"] .ff-unit{display:block !important;font-style:normal !important;font-size:15px !important;font-weight:800 !important;color:#22d3ee !important;}
form[action="/recargas/free-fire"] .ff-price{display:block !important;font-size:22px !important;font-weight:900 !important;color:#fff !important;margin-top:8px !important;}
form[action="/recargas/free-fire"] .ff-price small{display:block !important;font-size:12px !important;color:#a3a3a3 !important;font-weight:700 !important;}
form[action="/recargas/free-fire"] .ff-buy{display:block !important;margin-top:12px !important;background:#fb923c !important;color:#000 !important;font-weight:800 !important;text-align:center !important;padding:10px 8px !important;border-radius:12px !important;cursor:pointer !important;}
form[action="/recargas/free-fire"] .ff-top{position:absolute !important;top:10px !important;left:10px !important;z-index:1 !important;width:auto !important;height:auto !important;max-width:calc(100% - 20px) !important;display:inline-block !important;background:#facc15 !important;color:#000 !important;font-size:12px !important;font-weight:800 !important;padding:4px 10px !important;border-radius:999px !important;white-space:nowrap !important;}
form[action="/recargas/free-fire"] .ff-card span:not(.ff-card-img){height:auto !important;}
@media (max-width:1100px){form[action="/recargas/free-fire"] .packs{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media (max-width:640px){form[action="/recargas/free-fire"] .packs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}form[action="/recargas/free-fire"] .ff-card-img{height:96px !important;}form[action="/recargas/free-fire"] .ff-card-ticket{line-height:96px !important;}}

/* Miniatura de imagen de producto en tarjetas genéricas (solo visible si el producto tiene imagen subida) */
.packs .pack .pk-thumb{width:44px;height:44px;object-fit:cover;border-radius:10px;vertical-align:middle;margin-right:10px;}

/* FF LATAM y Brasil: secciones Diamantes / Pases (cada una en su propia grilla, sin mezcla) */
form[action="/recargas/free-fire"] .ff-sec,
form[action="/recargas/free-fire-brasil"] .ff-sec{font-size:18px;font-weight:800;color:#fff;margin:22px 0 10px;}
form[action="/recargas/free-fire"] .ff-sec:first-of-type,
form[action="/recargas/free-fire-brasil"] .ff-sec:first-of-type{margin-top:6px;}

/* FF Brasil: tarjetas de diamantes con imagen según cantidad (el grid genérico es 44px 1fr auto;
   sin imagen el texto caía en la columna angosta y se partía a mitad de palabra). */
form[action="/recargas/free-fire-brasil"] .pack.ffbr-dia > span{grid-template-columns:44px minmax(0,1fr) auto !important;}
form[action="/recargas/free-fire-brasil"] .pack.ffbr-dia .pk-thumb{grid-column:1; grid-row:1 / 3;}
form[action="/recargas/free-fire-brasil"] .pack.ffbr-dia b{grid-column:2; overflow-wrap:normal !important; word-break:normal !important; hyphens:none !important;}
form[action="/recargas/free-fire-brasil"] .pack.ffbr-dia .ffbr-num{white-space:nowrap;}
form[action="/recargas/free-fire-brasil"] .pack.ffbr-dia .pk-badge, form[action="/recargas/free-fire-brasil"] .pack.ffbr-dia .badge{grid-column:2;}
@media (max-width:640px){
  form[action="/recargas/free-fire-brasil"] .packs .pack.ffbr-dia{grid-column:1 / -1;}
}

/* ===== FF Brasil — layout final de tarjetas (diamantes, pases y packs), mismo modelo que ML:
   icono 48px (36px en móvil) a la izquierda; título, y precio abajo en la columna de texto,
   que corta solo por palabras. ===== */
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .packs{
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important; gap:12px !important; align-items:stretch;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack{
  grid-column:auto !important; min-height:0 !important; padding:12px 14px !important; text-align:left !important;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack > span{
  display:grid !important; grid-template-columns:48px minmax(0,1fr) !important; grid-template-rows:none !important;
  grid-auto-rows:auto; column-gap:12px !important; row-gap:2px; align-items:start !important; align-content:center;
  text-align:left !important; width:100%; height:100%;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack > span > *{
  grid-column:2 !important; grid-row:auto !important; min-width:0; text-align:left !important;
  align-self:start !important; overflow-wrap:normal !important; word-break:normal !important; hyphens:none !important;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack > span > img.pk-thumb{
  grid-column:1 !important; grid-row:1 / span 3 !important; align-self:center !important;
  width:48px !important; height:48px !important; object-fit:contain; margin:0 !important; border-radius:10px;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack b{
  font-size:16px !important; line-height:1.25 !important; text-wrap:pretty;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack b .ffbr-unit{font-size:12px; font-weight:700; color:#a3a3a3;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack .pk-bonus{font-size:12px !important; line-height:1.3 !important;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack span > small:not(.rb-kind):not(.rb-stock){
  margin-top:6px !important; padding-top:0 !important; font-size:17px !important; white-space:nowrap; align-self:start !important;
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack .pk-badge,
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack .badge{
  position:absolute !important; grid-column:auto !important; top:-10px !important; left:auto !important; right:12px; transform:none !important;
}
@media (max-width:640px){
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .packs{grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack{padding:10px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack > span{grid-template-columns:36px minmax(0,1fr) !important; column-gap:8px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack > span > img.pk-thumb{width:36px !important; height:36px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack b{font-size:14px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack span > small:not(.rb-kind):not(.rb-stock){font-size:14.5px !important;}
}
@media (max-width:360px){
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .packs{grid-template-columns:minmax(0,1fr) !important;}
}

/* FF LATAM: ajuste fino de tamaños en tarjetas verticales (títulos largos de pases sin desbordar). */
form[action="/recargas/free-fire"] .ff-card-body b{font-size:19px !important; line-height:1.2 !important; overflow-wrap:normal !important; word-break:normal !important; hyphens:none !important; text-wrap:pretty;}
form[action="/recargas/free-fire"] .ff-price{font-size:20px !important; white-space:nowrap;}
@media (max-width:640px){
  form[action="/recargas/free-fire"] .packs{gap:10px !important;}
  form[action="/recargas/free-fire"] .ff-card-body{padding:10px 10px 0 !important;}
  form[action="/recargas/free-fire"] .ff-card-body b{font-size:16px !important;}
  form[action="/recargas/free-fire"] .ff-unit{font-size:13px !important;}
  form[action="/recargas/free-fire"] .ff-price{font-size:17px !important;}
  form[action="/recargas/free-fire"] .ff-buy{margin-top:10px !important; padding:9px 6px !important;}
}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack.ffbr-dia b{display:block !important; text-align:left !important;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack.ffbr-dia b > span{display:inline !important; text-align:left !important; margin:0 !important; width:auto !important;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/free-fire-brasil"] .pack.ffbr-dia b .ffbr-num{font-size:17px; font-weight:900;}

/* FF LATAM: hero solo con el arte completo (sin textos ni logo de costado) */
/* FF LATAM y Brasil: hero tira banner (bajo), solo con la imagen de fondo */
.buy-page .ff-head.ff-hero-solo, .buy-page .gx-head.ffbr-hero-solo{
  padding:0 !important;
  height:190px !important;
  min-height:190px !important;
  background:var(--hero-bg) center/cover no-repeat,#000 !important;
}
@media (max-width:640px){
  .buy-page .ff-head.ff-hero-solo, .buy-page .gx-head.ffbr-hero-solo{height:120px !important;min-height:120px !important;}
}
/* FF: acordeones Datos / Preguntas (cerrados por defecto, se abren con click) */
.buy-page .ff-acc > summary{font-family:'Bungee', sans-serif; font-size:19px; color:#facc15; text-transform:uppercase; cursor:pointer; list-style:none;}
.buy-page .ff-acc > summary::-webkit-details-marker{display:none;}
.buy-page .ff-acc > summary::after{content:" \25BE"; float:right;}
.buy-page .ff-acc[open] > summary::after{content:" \25B4";}
body.theme-halloween .buy-page .ff-acc > summary{color:#fb923c;}

/* Free Fire: aviso de región no disponible (bloquea la compra) */
.ff-lookup.err{color:#fecaca !important; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.45); border-radius:10px; padding:8px 10px; font-weight:700;}
.ff-lookup.err a{color:#fde68a; text-decoration:underline;}
.ff-lookup.ok{font-weight:700;}

/* FF LATAM y Brasil: pestañas Diamantes / Pases / Packs (en el lugar). Con JS el título de sección sobra. */
.buy-page .ff-tabs{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px; margin:6px 0 14px; overflow:visible;}
.buy-page .ff-tabs .bb-tab{justify-content:center; padding:12px 10px; border-radius:14px; background:linear-gradient(180deg,#1e1e1e,#141414); border:1.5px solid #262626; color:#e5e5e5; font-weight:900; font-size:15px;}
.buy-page .ff-tabs .bb-tab.on{background:linear-gradient(180deg,#facc15,#eab308); border-color:#facc15; color:#000; box-shadow:0 4px 14px rgba(250,204,21,.25);}
.ff-tabs-js .buy-page .ff-tabsec > .ff-sec{display:none;}
.ff-tabsec[hidden]{display:none !important;}
@media (max-width:640px){ .buy-page .ff-tabs .bb-tab{padding:10px 4px; font-size:13.5px;} }

/* FF Brasil: banner sin recortar el logo (imagen 1168x784). Escritorio: franja 2.8:1 centrada (incluye logo y bandera);
   móvil: la imagen entera. Sin deformar (cover respeta la proporción). */
.buy-page.buy-page .gx-head.ffbr-hero-solo{
  height:auto !important; min-height:0 !important; aspect-ratio:2.8 / 1;
  background:var(--hero-bg) center 50%/cover no-repeat,#000 !important;
}
@media (max-width:640px){
  .buy-page.buy-page .gx-head.ffbr-hero-solo{aspect-ratio:1168 / 784; height:auto !important; min-height:0 !important;}
}

/* Roblox: hero solo con la imagen de fondo entera (sin textos ni miniatura de costado). Sin recorte ni deformación. */
.buy-page.buy-page .rb-hero-solo{
  padding:0 !important; min-height:0 !important; height:300px !important;
  background:var(--hero-bg) center/contain no-repeat,#000 !important;
}
.buy-page.buy-page .rb-hero-solo::before, .buy-page.buy-page .rb-hero-solo::after{display:none !important;}
@media (max-width:640px){
  .buy-page.buy-page .rb-hero-solo{height:auto !important; aspect-ratio:549 / 374;}
}

/* Roblox v2: portada a todo el ancho (2:1 escritorio / 16:9 móvil, sin cortar el texto ni los personajes). */
.buy-page.buy-page .rb-hero-solo{height:auto !important; aspect-ratio:2 / 1; background:var(--hero-bg) center 72% / cover no-repeat,#000 !important;}
@media (max-width:640px){ .buy-page.buy-page .rb-hero-solo{aspect-ratio:16 / 9; background-position:center !important;} }

/* Roblox v2: tarjetas como ML/FF Brasil — miniatura a la izquierda, una sola etiqueta, nombre en una línea, precio abajo. */
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .packs{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack > span{display:grid !important; grid-template-columns:64px minmax(0,1fr) !important; grid-auto-rows:auto; column-gap:12px !important; row-gap:2px !important; align-items:center !important; text-align:left !important; padding:10px 12px !important; min-height:0 !important;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack img.tier-art{grid-column:1 !important; grid-row:1 / 5 !important; width:64px !important; height:auto !important; max-height:64px !important; object-fit:contain !important; margin:0 !important; border-radius:6px;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack .rb-badge{grid-column:2 !important; justify-self:start !important; width:auto !important; height:auto !important; display:inline-block !important; padding:1px 8px !important; font-size:10.5px !important; line-height:1.5 !important; white-space:nowrap !important; margin:0 !important; writing-mode:horizontal-tb !important;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack b{grid-column:2 !important; display:block !important; white-space:nowrap !important; overflow-wrap:normal !important; word-break:normal !important; font-size:16px !important; margin:0 !important; text-align:left !important;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack small.rb-kind{display:none !important;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack span > small:not(.rb-kind):not(.rb-stock){grid-column:2 !important; grid-row:auto !important; align-self:start !important; font-size:16px !important; text-align:left !important; margin:0 !important;}
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack small.rb-stock{grid-column:2 !important; font-size:11px !important; text-align:left !important; margin:0 !important; position:static !important;}
@media (max-width:420px){
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack > span{grid-template-columns:44px minmax(0,1fr) !important; column-gap:8px !important; padding:8px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack img.tier-art{width:44px !important; max-height:44px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack b, .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack span > small:not(.rb-kind):not(.rb-stock){font-size:14px !important;}
}
@media (max-width:359px){ .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .packs{grid-template-columns:1fr !important;} }
/* Roblox v2 móvil: que las tarjetas no se salgan del ancho */
.buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .packs > .pack{min-width:0 !important; max-width:100% !important; overflow:hidden !important;}
@media (max-width:420px){
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack > span{grid-template-columns:36px minmax(0,1fr) !important; column-gap:6px !important; padding:8px 6px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack img.tier-art{width:36px !important; max-height:36px !important; grid-row:1 / 3 !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack .rb-badge{font-size:9px !important; padding:0 5px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack b{white-space:normal !important; font-size:13px !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack span > small:not(.rb-kind):not(.rb-stock){grid-column:1 / -1 !important; font-size:14px !important; white-space:nowrap !important;}
  .buy-page.buy-page.buy-page.buy-page form[action="/recargas/roblox"] .pack small.rb-stock{grid-column:1 / -1 !important;}
}

/* Roblox v3: portada más baja para ahorrar espacio (se recorta cielo/escenario; texto y personajes completos). */
.buy-page.buy-page .rb-hero-solo{aspect-ratio:2.8 / 1 !important; background-position:center 90% !important;}
@media (max-width:640px){ .buy-page.buy-page .rb-hero-solo{aspect-ratio:2.13 / 1 !important; background-position:center 85% !important;} }

/* ===== Juegos genéricos + ML: portada solo imagen (sin textos), a todo el ancho sin deformar ===== */
.buy-page.buy-page .gx-hero-solo, .buy-page.buy-page .ml-hero-solo{
  padding:0 !important; min-height:0 !important; height:auto !important; aspect-ratio:2.4 / 1;
  background:var(--hero-bg) center 45% / cover no-repeat,#000 !important;
}
.buy-page.buy-page .ml-hero-solo{background-position:center 30% !important;}
.buy-page.buy-page .gx-hero-solo::before, .buy-page.buy-page .gx-hero-solo::after,
.buy-page.buy-page .ml-hero-solo::before, .buy-page.buy-page .ml-hero-solo::after{display:none !important;}
@media (max-width:640px){ .buy-page.buy-page .gx-hero-solo, .buy-page.buy-page .ml-hero-solo{aspect-ratio:16 / 9;} }

/* ===== Juegos genéricos: tarjetas como ML/FF Brasil (imagen a la izquierda, nombre sin cortar palabras, precio abajo) ===== */
.buy-page.buy-page.buy-page.buy-page .packs.gx-cards{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important;}
.buy-page.buy-page.buy-page.buy-page .packs.gx-cards > .pack{min-width:0 !important; max-width:100% !important;}
.buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack > span{display:grid !important; grid-template-columns:48px minmax(0,1fr) !important; column-gap:12px !important; row-gap:2px !important; align-items:center !important; align-content:center !important; text-align:left !important; padding:10px 12px !important; min-height:72px !important;}
.buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack img.pk-thumb{grid-column:1 !important; grid-row:1 / 4 !important; width:48px !important; height:48px !important; object-fit:cover !important; border-radius:8px !important; margin:0 !important; position:static !important;}
.buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack b{grid-column:2 !important; display:block !important; white-space:normal !important; overflow-wrap:normal !important; word-break:normal !important; hyphens:none !important; font-size:15px !important; line-height:1.25 !important; margin:0 !important; text-align:left !important;}
.buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack .pk-badge, .buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack .badge{grid-column:2 !important; justify-self:start !important;}
.buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack span > small{grid-column:2 !important; grid-row:auto !important; align-self:start !important; font-size:16px !important; text-align:left !important; margin:0 !important; white-space:nowrap !important;}
@media (max-width:640px){
  .buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack > span{grid-template-columns:36px minmax(0,1fr) !important; column-gap:8px !important; padding:8px !important; min-height:60px !important;}
  .buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack img.pk-thumb{width:36px !important; height:36px !important;}
  .buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack b{font-size:13.5px !important;}
  .buy-page.buy-page.buy-page.buy-page .packs.gx-cards .pack span > small{font-size:14px !important;}
}
@media (max-width:359px){ .buy-page.buy-page.buy-page.buy-page .packs.gx-cards{grid-template-columns:1fr !important;} }

/* ===== Datos del producto / Preguntas frecuentes: plegados (cada pregunta también) ===== */
.buy-page .bnx-info .ff-acc{border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; background:rgba(255,255,255,.02);}
.buy-page .bnx-info .ff-acc > summary{font-size:15px !important;}
.buy-page .bnx-info .ff-acc details{border-top:1px solid rgba(255,255,255,.06); padding:8px 0;}
.buy-page .bnx-info .ff-acc details > summary{cursor:pointer; font-weight:700;}

/* FF LATAM / FF Brasil: portada solo fondo, a todo el ancho sin deformar (como Roblox) */
.buy-page.buy-page.buy-page .ff-hero-solo, .buy-page.buy-page.buy-page .ffbr-hero-solo{padding:0 !important; min-height:0 !important; height:335px !important; aspect-ratio:auto !important; background:var(--hero-bg) center 40% / cover no-repeat,#000 !important;}
.buy-page.buy-page.buy-page .ff-hero-solo::before, .buy-page.buy-page.buy-page .ff-hero-solo::after, .buy-page.buy-page.buy-page .ffbr-hero-solo::before, .buy-page.buy-page.buy-page .ffbr-hero-solo::after{display:none !important;}
@media (max-width:640px){ .buy-page.buy-page.buy-page .ff-hero-solo, .buy-page.buy-page.buy-page .ffbr-hero-solo{height:150px !important;} }

/* Todas las portadas (genéricos + ML): misma altura que Roblox para ahorrar espacio */
.buy-page.buy-page.buy-page .gx-hero-solo, .buy-page.buy-page.buy-page .ml-hero-solo{height:335px !important; aspect-ratio:auto !important;}
@media (max-width:640px){ .buy-page.buy-page.buy-page .gx-hero-solo, .buy-page.buy-page.buy-page .ml-hero-solo{height:150px !important;} }
.buy-page.buy-page.buy-page.buy-page .ml-hero-solo{background-position:center 12% !important;}
.buy-page.buy-page.buy-page.buy-page .ff-hero-solo, .buy-page.buy-page.buy-page.buy-page .ffbr-hero-solo{background-position:center 50% !important;}