/* ── FIX PADDING HERO — logo no pegado al techo ── */
.home-hero{padding-top:1.8rem !important}
#homeLogo{margin-top:.3rem}

/* Botón ⚡ rail */
.odin-rayo{font-size:22px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),filter .2s}
#btnRailOdin:hover .odin-rayo{transform:scale(1.22) rotate(-8deg);filter:drop-shadow(0 0 5px rgba(192,57,43,.4))}
#btnRailOdin.rail-btn-active{background:var(--red-soft)}
#btnRailHome .fe-rail{filter:drop-shadow(0 1px 3px rgba(0,0,0,.18))}
/* P blanca cuando hay un negocio activo (fondo del rail puede ser de color) */
body.modo-negocio #btnRailHome .fe-rail{filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.25))}



/* ── SKELETON HERO — neutro para todos los negocios ── */
/* Santa Llanera lo sobreescribe con su negocio_config.js  */
:root {
  --sk-base: #e8e6e1;
  --sk-shine: #f0ede8;
  --sk-bg: var(--surface, #fff);
}
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.hero-skeleton{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2.2rem 1.5rem 1.8rem;gap:12px;min-height:160px;
  background:var(--sk-bg);
}
.sk-circle{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(90deg,var(--sk-base) 25%,var(--sk-shine) 50%,var(--sk-base) 75%);
  background-size:200% 100%;
  animation:skShimmer 1.4s ease-in-out infinite;
  margin-bottom:4px;
}
.sk-line{
  height:14px;border-radius:8px;
  background:linear-gradient(90deg,var(--sk-base) 25%,var(--sk-shine) 50%,var(--sk-base) 75%);
  background-size:200% 100%;
  animation:skShimmer 1.4s ease-in-out infinite;
}
.sk-line--title{width:160px;height:20px}
.sk-line--sub{width:220px;opacity:.7}
.sk-chip-row{display:flex;gap:8px;margin-top:4px}
.sk-chip{
  width:72px;height:30px;border-radius:100px;
  background:linear-gradient(90deg,var(--sk-base) 25%,var(--sk-shine) 50%,var(--sk-base) 75%);
  background-size:200% 100%;
  animation:skShimmer 1.4s ease-in-out infinite;
}

/* ── Skeleton del RAIL (botones de categoría) ── */
.sk-rail-btn{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;margin:3px 0;
  background:linear-gradient(90deg,var(--sk-base) 25%,var(--sk-shine) 50%,var(--sk-base) 75%);
  background-size:200% 100%;
  animation:skShimmer 1.4s ease-in-out infinite;
}
.sk-rail-btn:nth-child(2){animation-delay:.08s}
.sk-rail-btn:nth-child(3){animation-delay:.16s}
.sk-rail-btn:nth-child(4){animation-delay:.24s}
.sk-rail-btn:nth-child(5){animation-delay:.32s}
.sk-rail-btn:nth-child(6){animation-delay:.40s}
.sk-rail-btn:nth-child(7){animation-delay:.48s}

/* ── Skeleton de la IMAGEN dentro de cards (capa de fondo) ── */
/* Va en ::before del wrapper. La imagen real se monta encima con z-index:2 */
.hc-img-wrap, .mc-img-wrap, .prod-img-wrap{position:relative}
.hc-img-wrap.sk-loading::before, .mc-img-wrap.sk-loading::before, .prod-img-wrap.sk-loading::before{
  content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(90deg,var(--sk-base) 25%,var(--sk-shine) 50%,var(--sk-base) 75%);
  background-size:200% 100%;
  animation:skShimmer 1.4s ease-in-out infinite;
  pointer-events:none;
}
.hc-img-wrap .hc-img, .mc-img-wrap .mc-img, .prod-img-wrap img{position:relative;z-index:2}

/* ── Flechas de scroll del rail ── */
.rail-scroll-btn{
  width:28px;height:22px;border-radius:8px;
  background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);flex-shrink:0;margin:2px 0;
  transition:background .15s,color .15s,opacity .2s,transform .2s var(--spring);
}
.rail-scroll-btn:hover{background:var(--surface);color:var(--text);transform:scale(1.08)}
.rail-scroll-btn:active{transform:scale(.92)}
.rail-scroll-btn svg{width:14px;height:14px}
.rail-scroll-btn.hidden{opacity:0;pointer-events:none;height:0;margin:0;border-width:0;padding:0;overflow:hidden}

/* Botón de chat en el rail — fondo coral para que el globo blanco resalte */
.rail-btn-chat{
  background:var(--coral,#FF6B4A) !important;
  border-radius:12px !important;
}
.rail-btn-chat:hover{
  background:var(--coral2,#E8552F) !important;
  transform:scale(1.08);
}
.rail-btn-chat img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}