/* ================================================================
   Globo «Suscríbete y concursa» — belk.cl, concurso MY-07B (2026-10-08)
   Pedido del dueño: muy llamativo, con colores de concurso. Es un CTA de
   campaña (como el FAB de WhatsApp), no un flotante de la familia .bkf:
   no informa ni pregunta, invita. Los dorados son DATOS de la campaña
   (mismo dorado de la página del concurso), no tema. SELLO §13.
   ================================================================ */
.cx-globo{
  position:fixed; right:16px; bottom:var(--belk-float-bottom,16px); z-index:9980;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px 12px 14px; min-height:56px; border:0; border-radius:999px; cursor:pointer;
  font:inherit; text-align:left; text-decoration:none;
  color:#0D1B2A;                                                      /* DATOS: tinta sobre dorado, 11,9 */
  background:linear-gradient(135deg,#FFD54A 0%,#FFB020 45%,#F28A1E 100%); /* DATOS de campaña, no tema */
  box-shadow:0 8px 26px rgba(242,138,30,.55),0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.55);
  animation:cxGloboIn .45s cubic-bezier(.2,.9,.3,1.3) both, cxGloboLatido 2.6s ease-in-out 1.2s infinite;
  overflow:hidden;
}
.cx-globo:hover{transform:translateY(-2px) scale(1.03)}
.cx-globo:focus-visible{outline:3px solid #0D1B2A;outline-offset:3px}
/* Brillo que cruza el globo cada pocos segundos */
.cx-globo::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg); animation:cxGloboBrillo 3.4s ease-in-out 1.6s infinite;
}
.cx-globo-ico{font-size:28px;line-height:1;flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}
.cx-globo-txt{display:flex;flex-direction:column;line-height:1.15}
.cx-globo-txt strong{font-size:17px;font-weight:900;letter-spacing:.01em}
.cx-globo-txt small{font-size:12.5px;font-weight:700;opacity:.88}
.cx-globo[aria-busy="true"]{opacity:.75;cursor:progress}

/* Cerrar: 44x44 de área táctil (SELLO §6), fuera del globo para no tapar el texto */
.cx-globo-cerrar{
  position:fixed; z-index:9981; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer;
  right:4px; bottom:calc(var(--belk-float-bottom,16px) + 40px);
  display:flex; align-items:center; justify-content:center;
}
.cx-globo-cerrar span{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#0D1B2A; color:#FFD54A; font-size:14px; font-weight:900;  /* DATOS de campaña */
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

@keyframes cxGloboIn{from{opacity:0;transform:translateY(16px) scale(.8)}to{opacity:1;transform:none}}
@keyframes cxGloboLatido{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes cxGloboBrillo{0%,70%{left:-60%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){
  .cx-globo,.cx-globo::before{animation:none}
}
@media(max-width:380px){
  .cx-globo-txt strong{font-size:15.5px}
  .cx-globo-txt small{font-size:12px}
}
/* El mismo llamado arriba del menú ☰ (js/concurso-globo.js · pintarEnMenu).
   Mismos dorados de campaña que el globo; cabe en el ancho del menú. */
.cx-nav{
  position:relative; overflow:hidden; box-sizing:border-box;
  display:flex; align-items:center; gap:10px;
  margin:4px 12px 10px; padding:10px 12px; min-height:48px; border-radius:12px;
  color:#0D1B2A; text-decoration:none;                                /* DATOS: tinta sobre dorado */
  background:linear-gradient(135deg,#FFD54A 0%,#FFB020 45%,#F28A1E 100%); /* DATOS de campaña, no tema */
  box-shadow:0 4px 14px rgba(242,138,30,.35),inset 0 1px 0 rgba(255,255,255,.55);
}
.cx-nav:hover{filter:brightness(1.05)}
.cx-nav:focus-visible{outline:3px solid #FFD54A;outline-offset:2px}
.cx-nav::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg); animation:cxGloboBrillo 3.4s ease-in-out 1s infinite;
}
.cx-nav-ico{font-size:24px;line-height:1;flex-shrink:0}
.cx-nav-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.cx-nav-txt strong{font-size:14px;font-weight:900}
.cx-nav-txt small{font-size:11.5px;font-weight:700;opacity:.88}
@media (prefers-reduced-motion:reduce){.cx-nav::before{animation:none}}

/* Sobre el botón de cámara de Escaneo IA (.bn-fab, 2026-10-09): el globo sube
   lo justo para no taparlo; el botón queda centrado entre cápsula y globo. */
body:has(.bn-fab) .cx-globo{bottom:calc(var(--belk-float-bottom,16px) + 40px)}
body:has(.bn-fab) .cx-globo-cerrar{bottom:calc(var(--belk-float-bottom,16px) + 80px)}
/* Variante de suscripcion.html (2026-10-09, js/suscripcion-globo.js): recuerda que
   suscribirse ya es participar. Tres líneas (premio, fecha, ánimo), así que es una
   tarjeta redondeada y no una píldora; va SOBRE el botón de WhatsApp (abajo a la
   derecha) para no taparlo. La ✕ la ubica el JS en la esquina del globo. */
.cx-globo--sus{
  bottom:calc(var(--belk-float-bottom,18px) + 56px); max-width:min(340px, calc(100vw - 32px));
  border-radius:22px; padding:12px 16px 12px 14px;
}
.cx-globo--sus .cx-globo-txt strong{font-size:16px}
.cx-globo--sus .cx-globo-txt em{font-style:normal; font-size:12.5px; font-weight:600; margin-top:3px; opacity:.92}
.cx-globo--fuera{opacity:0 !important; pointer-events:none; transform:translateY(24px) !important; transition:opacity .2s ease, transform .2s ease}
@media(max-width:480px){
  .cx-globo--sus{bottom:68px}
}
/* Teléfono (2026-10-09, pedido del dueño): el mismo globo, en una línea que dice
   «¡Suscríbete y gana!». Reemplaza al botón redondo 🎁 que tuvo el Optimizador. */
.cx-globo-corto{display:none}
@media(max-width:768px){
  .cx-globo:not(.cx-globo--sus){min-height:48px;padding:10px 16px 10px 12px;gap:8px}
  .cx-globo:not(.cx-globo--sus) .cx-globo-ico{font-size:24px}
  .cx-globo:not(.cx-globo--sus) .cx-globo-largo,
  .cx-globo:not(.cx-globo--sus) .cx-globo-txt small{display:none}
  .cx-globo:not(.cx-globo--sus) .cx-globo-corto{display:block;font-size:16px}
  /* Optimizador (body.shell-fixed, solo index.html): «Calcular Plan de Corte»
     va pegado abajo y ocupa todo el ancho; el globo va justo encima. */
  body.shell-fixed .cx-globo:not(.cx-globo--sus){bottom:calc(var(--belk-float-bottom,16px) + 92px)}
  body.shell-fixed .cx-globo-cerrar:not(.cx-globo-cerrar--sus){bottom:calc(var(--belk-float-bottom,16px) + 124px)}
}
@media print{.cx-globo,.cx-globo-cerrar{display:none!important}}
/* Con el menú ☰ abierto el globo quedaba encima del menú (en el teléfono tapa
   su borde): se esconde y vuelve a entrar al cerrarlo. */
body:has(.nav-menu.open) .cx-globo,
body:has(.nav-menu.open) .cx-globo-cerrar{display:none}