/* ── Discovery: Banner carousel, curiosity banners ── */

/* ── DISCOVERY BANNER (auto-scroll carousel) ── */
#discoveryBanner{
  position:absolute;top:44px;left:0;right:0;z-index:10;
  pointer-events:none;padding:0;overflow:visible;
  transition:opacity .4s ease,transform .4s ease;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.2) 85%,transparent 100%)}
#discoveryBanner.hidden{opacity:0;transform:translateY(-20px);pointer-events:none}
#discoveryBanner *{pointer-events:auto}
/* Fade derecho: indica al usuario que hay más cards (scroll hint) */
#discoveryBanner::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:52px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.88));
  pointer-events:none;z-index:2}

.disco-scroll{display:flex;gap:10px;overflow-x:auto;overflow-y:visible;padding:22px 16px 40px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-behavior:smooth;justify-content:safe center}
.disco-scroll::-webkit-scrollbar{display:none}
.disco-scroll.paused .disco-card{animation:none}

.disco-card{
  flex:0 0 180px;scroll-snap-align:start;
  border-radius:12px;overflow:hidden;position:relative;cursor:pointer;
  background:var(--white);
  box-shadow:0 2px 12px rgba(11,31,56,.10),0 1px 3px rgba(0,0,0,.05);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease}
.disco-card:hover{transform:scale(1.33);
  box-shadow:0 14px 40px rgba(11,31,56,.28),0 6px 16px rgba(0,0,0,.12);z-index:10}
.disco-card:active{transform:scale(.97)}
.disco-founder .disco-name{font-weight:700}

.disco-img-wrap{position:relative;width:100%;height:85px;overflow:hidden;background:var(--color-neutral-border)}
.disco-img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.25,.1,.25,1)}
.disco-card:hover .disco-img{transform:none}

/* ── Category label (black frame at top of card) ── */
.disco-category-label{
  display:block;width:100%;
  padding:3px 0;
  font-size:10px;font-weight:800;font-family:'DM Sans',sans-serif;
  letter-spacing:.5px;text-transform:uppercase;text-align:center;
  border-radius:12px 12px 0 0;
  line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.disco-badge{position:absolute;top:6px;left:6px;
  padding:2px 7px;border-radius:20px;font-size:11px;font-weight:700;
  font-family:'DM Sans',sans-serif;letter-spacing:.3px;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.disco-badge.organic{background:rgba(16,185,129,.88);color:var(--color-white)}
.disco-badge.promoted{background:rgba(217,119,6,.88);color:var(--color-white)}
.disco-badge.top{background:rgba(13,148,136,.88);color:var(--color-white)}
.disco-badge.new{background:rgba(139,92,246,.88);color:var(--color-white)}

.disco-bolas{position:absolute;top:6px;right:6px;
  display:flex;gap:2px;padding:2px 6px;border-radius:10px;
  background:rgba(11,31,56,.7);backdrop-filter:blur(6px);font-size:10px}

/* ── Hover overlay — profile summary on card hover ── */
.disco-hover-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,31,56,.85) 0%,rgba(11,31,56,.95) 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:10px 12px;gap:4px;
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;z-index:2;
}
.disco-card:hover .disco-hover-overlay{opacity:1}

.disco-hover-name{
  font-size:11px;font-weight:800;color:var(--color-white);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.disco-hover-type{
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.5);font-weight:600;
}
.disco-hover-rating{
  font-size:10px;color:var(--color-gold-highlight);font-weight:700;
}
.disco-hover-bolas{
  display:flex;align-items:center;gap:4px;
  font-size:11px;color:rgba(255,255,255,.7);
}
.disco-hover-bolas img{height:18px}
.disco-hover-sabor{
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.1);border-radius:12px;
  padding:3px 10px;margin-top:2px;
}
.disco-sabor-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(255,255,255,.25);
}
.disco-sabor-name{
  font-size:10px;font-weight:700;color:var(--color-white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px;
}
.disco-sabor-votes{
  font-size:11px;color:rgba(255,255,255,.55);flex-shrink:0;
}
.disco-sabor-empty{
  font-size:10px;color:rgba(255,255,255,.35);font-style:italic;
}
.disco-hover-cta{
  font-size:11px;color:var(--teal);font-weight:700;margin-top:2px;
  letter-spacing:.03em;
}

.disco-body{padding:6px 10px 8px}
.disco-name{font-family:'DM Sans',sans-serif;font-weight:700;font-size:12px;
  color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.disco-meta{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--mid);font-family:'DM Sans',sans-serif}
.disco-meta .rating{color:var(--gold);font-weight:700}
.disco-meta .dist{color:var(--teal);font-weight:600}
.disco-loc{font-size:10px;color:var(--gray);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'DM Sans',sans-serif}

/* Discovery toggle button */
.disco-toggle{
  position:fixed;top:58px;left:278px;right:auto;z-index:11;
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  box-shadow:0 2px 8px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;pointer-events:auto;color:var(--navy)}
.disco-toggle:hover{background:var(--color-white);box-shadow:0 4px 12px rgba(0,0,0,.16)}
.disco-toggle svg{width:18px;height:18px;transition:transform .3s ease}
@media(max-width:900px){.disco-toggle{left:16px}}

/* ── Curiosity banners — collapsible side tabs ── */
.curiosity-tab{
  position:absolute;z-index:900;pointer-events:auto;
  font-family:'DM Sans',sans-serif;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.curiosity-tab.left{left:268px;bottom:120px}
.curiosity-tab.right{right:0;bottom:120px}

/* Collapsed tab handle */
.curiosity-handle{
  writing-mode:vertical-rl;text-orientation:mixed;
  background:linear-gradient(180deg,#1E293B 0%,#334155 100%);
  color:rgba(255,255,255,.85);padding:12px 7px;
  font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;user-select:none;
  transition:all .25s ease;
  display:flex;align-items:center;gap:6px;
}
.curiosity-tab.left .curiosity-handle{border-radius:0 10px 10px 0}
.curiosity-tab.right .curiosity-handle{border-radius:10px 0 0 10px;writing-mode:vertical-lr;transform:rotate(180deg)}
.curiosity-handle:hover{padding:12px 10px;background:linear-gradient(180deg,#334155 0%,#475569 100%)}
.curiosity-handle-icon{font-size:14px}

/* Expanded panel */
.curiosity-panel{
  position:absolute;bottom:0;
  background:linear-gradient(135deg,#1E293B 0%,#334155 100%);
  color:var(--color-white);border-radius:14px;padding:16px 18px 12px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
  width:240px;font-size:12px;line-height:1.5;
  opacity:0;transform:scale(.9);pointer-events:none;
  transition:all .3s cubic-bezier(.4,0,.2,1);
}
.curiosity-tab.open .curiosity-panel{opacity:1;transform:scale(1);pointer-events:auto}
.curiosity-tab.open .curiosity-handle{opacity:0;pointer-events:none;width:0;padding:0;overflow:hidden}
.curiosity-tab.left .curiosity-panel{left:0}
.curiosity-tab.right .curiosity-panel{right:0}

.curiosity-panel-close{position:absolute;top:4px;right:6px;background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.6);font-size:16px;cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1;z-index:10}
.curiosity-panel-close:hover{color:var(--color-white);background:rgba(255,255,255,.2)}
.curiosity-emoji{font-size:18px;margin-bottom:2px;display:block}
.curiosity-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.55);margin-bottom:3px;font-weight:600}
.curiosity-text{font-weight:500;font-size:12px;line-height:1.35;color:rgba(255,255,255,.85)}
.curiosity-value{font-size:20px;font-weight:800;color:var(--color-gold-highlight);display:block;margin:3px 0}
.curiosity-detail{font-size:10px;color:rgba(255,255,255,.5)}

/* Navigation arrows */
.curiosity-nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
.curiosity-nav-btn{
  width:0;height:0;cursor:pointer;border:none;background:none;padding:0;
  opacity:.5;transition:opacity .2s;
}
.curiosity-nav-btn:hover{opacity:1}
.curiosity-nav-btn.prev{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid var(--color-white)}
.curiosity-nav-btn.next{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid var(--color-white)}
.curiosity-nav-dots{display:flex;gap:4px}
.curiosity-nav-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .2s}
.curiosity-nav-dot.active{background:var(--color-gold-highlight)}


/* Admin banner controls */
.banner-admin-row{display:flex;gap:10px;align-items:center;padding:8px 0;
  border-bottom:1px solid rgba(0,0,0,.05)}
.banner-admin-row:last-child{border-bottom:none}
.banner-type-pill{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;text-transform:uppercase}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOUCH DEVICES — deshabilitar hover scale
   En móvil el :hover se queda "atascado" tras un tap y
   hace que la card aparezca 33% más grande hasta que
   tocas otro elemento. @media(hover:none) lo anula.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(hover:none){
  .disco-card:hover{
    transform:none!important;
    box-shadow:0 2px 12px rgba(11,31,56,.10),0 1px 3px rgba(0,0,0,.05)!important;
    z-index:auto!important;
  }
  .disco-card:hover .disco-hover-overlay{opacity:0!important}
  .disco-card:active{transform:scale(.96)!important}
}