/* Inicio estilo El Rey / Mercado Libre para Bubika (2026-10-18) — vista bubika.inicio_ml.
   Réplica de herramientas/sitio/inicio_ml/inicio.css de El Rey: el amarillo #FFD426 pasa a mango #FFA226, el morado a
   cacao #3A1F16 y el lila de fondo a crema. Títulos Baloo 2 en mayúsculas, texto Archivo. Sin marcos cacao ni sombras
   duras (diseno_suave). */
#wrapwrap:has(.bk-ml),#wrapwrap:has(.bk-ml) main{background:#FFF6EA;}
.bk-ml{--mg:#FFA226;--mgo:#F29A2E;--ca:#3A1F16;--cm:#7A5A4C;--ro:#E8503A;--cr:#FFF3E2;--fd:#FFF6EA;--ln:#F0E4D4;
  font-family:Archivo,system-ui,sans-serif;color:var(--ca);background:var(--fd);padding-bottom:8px;}
.bk-ml *{box-sizing:border-box;}
.bk-ml a{text-decoration:none !important;}
.bk-ml h2{font-family:'Baloo 2',sans-serif;}

/* cabecera mango, franja, pestañas y diapositiva (.bk-ml-dia): global.css */

/* banner deslizable que «cae» sobre la crema */
.bk-ml-hero{background:linear-gradient(var(--mg) 0,var(--mg) 58%,var(--fd) 58%);padding:10px 0 4px;}
.bk-ml-banner{position:relative;max-width:1200px;margin:0 auto;padding:0 12px;}
.bk-ml-pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:16px;clip-path:inset(0 1px 0 0 round 16px);scroll-behavior:smooth;}
.bk-ml-pista::-webkit-scrollbar{display:none;}
.bk-ml-puntos{display:flex;justify-content:center;gap:6px;margin-top:8px;}
.bk-ml-puntos i{width:6px;height:6px;border-radius:99px;background:#E6D3BE;transition:width .2s;cursor:pointer;}
.bk-ml-puntos i.on{width:18px;background:var(--ca);}
@media (min-width:992px){
  .bk-ml-hero{padding-top:14px;}
  .bk-ml-dia{aspect-ratio:1200/380;}
  .bk-ml-dia::after{background:linear-gradient(90deg,rgba(30,16,11,.78) 0,rgba(30,16,11,.35) 48%,rgba(30,16,11,0) 75%);}
  .bk-ml-dia-txt{left:52px;bottom:auto;top:50%;transform:translateY(-50%);gap:12px;max-width:560px;}
  .bk-ml-dia-txt b{font-size:50px;}
  .bk-ml-dia-txt span{height:42px;padding:0 22px;font-size:15px;}
}

/* franja Socio Mayoreo: bloque CACAO plano con escalera Bronce → Plata → Oro y botón mango (El Rey: morado y amarillo) */
.bk-ml-socio{max-width:1200px;margin:14px auto 0;padding:0 12px;}
.bk-ml-socio a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px 32px;background:var(--ca);color:#fff !important;border-radius:18px;padding:22px 26px;}
.bk-ml-socio-tx{display:flex;flex-direction:column;gap:6px;min-width:0;}
.bk-ml-socio-tx small{font:700 11.5px/1 Archivo,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mg);}
.bk-ml-socio-tx b{font:800 clamp(23px,2.5vw,32px)/1 'Baloo 2',sans-serif;text-transform:uppercase;color:#FFF3E2;}
.bk-ml-socio-tx b em{font-style:normal;color:var(--mg);}
.bk-ml-socio-tx i{font-style:normal;font-size:14px;font-weight:500;line-height:1.4;color:#EAD9C6;}
.bk-ml-socio-esc{display:grid;grid-template-columns:repeat(3,96px);gap:8px;align-items:end;}
.bk-ml-socio-esc>span{display:flex;flex-direction:column;gap:6px;min-width:0;}
.bk-ml-socio-esc em{display:flex;align-items:flex-start;justify-content:center;padding-top:9px;border-radius:10px 10px 4px 4px;
  font:800 12.5px/1 'Baloo 2',sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;}
.bk-ml-socio-esc .bronce em{height:36px;background:#9C5B27;color:#fff;}
.bk-ml-socio-esc .plata em{height:52px;background:#BFC5CC;color:var(--ca);}
.bk-ml-socio-esc .oro em{height:68px;background:#FFD426;color:var(--ca);}
.bk-ml-socio-esc small{font-size:12px;font-weight:600;line-height:1.2;color:#EAD9C6;text-align:center;white-space:nowrap;}
.bk-ml-socio-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--mg);color:var(--ca);border-radius:12px;padding:14px 18px;font:700 15px/1.15 Archivo,system-ui,sans-serif;white-space:nowrap;}
.bk-ml-socio-cta svg{width:17px;height:17px;}
.bk-ml-socio a:hover .bk-ml-socio-cta{background:#FFB54F;}
.bk-ml-socio a:focus-visible{outline:3px solid var(--mg);outline-offset:3px;}
@media (max-width:980px){.bk-ml-socio a{grid-template-columns:minmax(0,1fr) auto;}.bk-ml-socio-cta{grid-column:1 / -1;}}
@media (max-width:640px){
  .bk-ml-socio a{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 16px;}
  .bk-ml-socio-tx b{font-size:24px;}
  .bk-ml-socio-tx i{font-size:13.5px;}
  .bk-ml-socio-esc{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bk-ml-socio-esc .bronce em{height:30px;}.bk-ml-socio-esc .plata em{height:42px;}.bk-ml-socio-esc .oro em{height:54px;}
  .bk-ml-socio-cta{width:100%;}
}

/* atajos en círculo */
.bk-ml-atajos{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:1200px;margin:16px auto 0;padding:4px 12px 6px;}
.bk-ml-atajos::-webkit-scrollbar{display:none;}
.bk-ml-atajo{flex:0 0 82px;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ca) !important;text-align:center;}
.bk-ml-atajo>span{width:66px;height:66px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(58,31,22,.12);display:flex;align-items:center;justify-content:center;}
.bk-ml-atajo img{width:100%;height:100%;object-fit:cover;display:block;}
.bk-ml-atajo>span svg{width:28px;height:28px;color:var(--ca);}
.bk-ml-atajo small{font:600 12px/1.2 Archivo,system-ui,sans-serif;color:var(--ca);}
@media (min-width:992px){.bk-ml-atajos{justify-content:center;gap:22px;}.bk-ml-atajo{flex-basis:108px;}.bk-ml-atajo>span{width:84px;height:84px;}.bk-ml-atajo small{font-size:13.5px;}}

/* secciones */
.bk-ml-sec{max-width:1200px;margin:22px auto 0;padding:0 10px;}
.bk-ml-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:0 4px 10px;}
.bk-ml-sec-h h2{margin:0;font:800 clamp(21px,5.2vw,28px)/1.02 'Baloo 2',sans-serif;text-transform:uppercase;color:var(--ca);}
.bk-ml-sec-h h2 small{display:block;margin-top:3px;font:500 12.5px/1.3 Archivo,system-ui,sans-serif;text-transform:none;color:var(--cm);}
.bk-ml-sec-h>a{flex:none;font:700 14px/1 Archivo,system-ui,sans-serif;color:var(--ro) !important;}

/* «Ahorra por volumen»: bloque mango con renglones blancos y rayo que late (El Rey: «Ofertas relámpago») */
.bk-ml-vol{max-width:1200px;margin:22px auto 0;padding:0 10px;}
.bk-ml-vol-h{display:flex;align-items:center;gap:8px;background:var(--mg);color:var(--ca);border-radius:16px 16px 0 0;padding:12px 14px;margin:0;}
.bk-ml-vol-h h2{margin:0;font:800 19px/1 'Baloo 2',sans-serif;text-transform:uppercase;color:var(--ca);}
.bk-ml-vol-h span{margin-left:auto;font:600 12.5px/1.2 Archivo,system-ui,sans-serif;color:#5A3420;text-align:right;}
.bk-ml-rayo{flex:none;width:22px;height:22px;animation:bk-ml-rayo 1.6s ease-in-out infinite;transform-origin:50% 60%;}
@keyframes bk-ml-rayo{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.18) rotate(-8deg)}55%{transform:scale(.95) rotate(4deg)}}
.bk-ml-vol-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;background:var(--mg);padding:0 8px 8px;border-radius:0 0 16px 16px;}
@media (min-width:768px){.bk-ml-vol-g{grid-template-columns:repeat(4,minmax(0,1fr));}}
.bk-ml-vol-g .bk-tj{height:100%;}

/* vista de departamento */
.bk-ml-vistas{overflow-x:clip;}
.bk-ml-desliza{animation:bk-ml-desliza .26s cubic-bezier(.2,.8,.2,1);}
@keyframes bk-ml-desliza{from{opacity:0;transform:translateX(calc(var(--d,1) * 34px))}to{opacity:1;transform:none}}
.bk-ml-dep-portada{max-width:1200px;margin:0 auto;padding:10px 12px 0;}
.bk-ml-dep-portada .bk-ml-dia{aspect-ratio:16/8;cursor:default;}
@media (min-width:992px){.bk-ml-dep-portada .bk-ml-dia{aspect-ratio:1200/300;}}
.bk-ml-vertodo{display:flex;align-items:center;justify-content:center;height:48px;margin:16px 0 4px;border-radius:12px;border:1px solid rgba(58,31,22,.14);
  background:#fff;color:var(--ca) !important;font:700 14.5px/1.2 Archivo,system-ui,sans-serif;text-align:center;padding:0 12px;}
.bk-ml-vertodo:hover{border-color:var(--mg);}
@media (min-width:992px){.bk-ml-vertodo{max-width:420px;margin:20px auto 4px;}}
.bk-ml-cargando{max-width:1200px;margin:20px auto;padding:0 16px;color:var(--cm);text-align:center;}

/* Preparaciones reales (los clips de siempre, con el encabezado del nuevo estilo) */
.bk-ml-clips{margin-top:26px;background:#fff;padding:22px 0 10px;}
.bk-ml-clips .bk-ml-sec{margin-top:0;}
.bk-ml-clips .bk-videos{padding:0 !important;background:none !important;}

/* Academia */
.bk-ml-aca{display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;color:var(--ca) !important;box-shadow:0 1px 3px rgba(58,31,22,.07);}
.bk-ml-aca-img{display:block;aspect-ratio:4/5;background:var(--ca) center/cover no-repeat;}
.bk-ml-aca-txt{display:flex;flex-direction:column;gap:4px;padding:9px 11px 12px;}
.bk-ml-aca-txt small{font:700 10.5px/1 Archivo,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ro);}
.bk-ml-aca-txt b{font:600 14px/1.3 Archivo,system-ui,sans-serif;color:var(--ca);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* confianza */
.bk-ml-confia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:1200px;margin:24px auto 0;padding:0 10px;}
@media (min-width:992px){.bk-ml-confia{grid-template-columns:repeat(4,minmax(0,1fr));}}
.bk-ml-confia a{background:#fff;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;color:var(--ca) !important;box-shadow:0 1px 3px rgba(58,31,22,.06);}
.bk-ml-confia svg{width:24px;height:24px;color:var(--mgo);}
.bk-ml-confia b{font:700 14px/1.25 Archivo,system-ui,sans-serif;}
.bk-ml-confia span{font:400 12.5px/1.35 Archivo,system-ui,sans-serif;color:var(--cm);}

/* FAQ de siempre al final */
.bk-ml .bk-faq{margin-top:26px;}

/* esqueleto mientras llega el catálogo */
.bk-ml-esq{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media (min-width:992px){.bk-ml-esq{grid-template-columns:repeat(5,1fr);}}
.bk-ml-esq i{display:block;height:300px;border-radius:14px;background:linear-gradient(90deg,#F6EADB 0,#FFF8EE 50%,#F6EADB 100%);background-size:200% 100%;animation:bk-ml-brillo 1.2s linear infinite;}
@keyframes bk-ml-brillo{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion: reduce){.bk-ml-rayo,.bk-ml-desliza,.bk-ml-esq i{animation:none !important;}}
/* portada de la categoría: el titular va sobre fotos claras (bolsas blancas, vasos): velo más firme */
.bk-ml-dep-portada .bk-ml-dia::after{background:linear-gradient(180deg,rgba(30,16,11,.05) 15%,rgba(30,16,11,.82) 100%);}
@media (min-width:992px){.bk-ml-dep-portada .bk-ml-dia::after{background:linear-gradient(90deg,rgba(30,16,11,.85) 0,rgba(30,16,11,.45) 50%,rgba(30,16,11,0) 80%);}}