/* stock.css v2 */

.stock-body { background:var(--c-g1); }

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.stock-hero {
  width:100%; min-height:260px;
  background:rgba(10,17,22,.70);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.stock-hero::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.20),rgba(0,0,0,.45));
}
.stock-hero-inner {
  position:relative; z-index:1; max-width:800px; width:100%;
  padding:2.75rem 1.5rem;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.75rem;
}
.stock-line-top { width:60px; height:4px; border-radius:var(--pill); background:var(--c-orange); }
.stock-eyebrow  { font-size:.6875rem; letter-spacing:3px; text-transform:uppercase; font-weight:300; color:var(--c-orange); }
.stock-title    { font-family:var(--f-title); font-size:clamp(2rem,6vw,3.5rem); color:#fff; letter-spacing:.04em; line-height:1.1; }
.stock-line-bot { width:48px; height:3px; border-radius:var(--pill); background:var(--c-orange); }
.stock-sub      { font-size:.9375rem; color:var(--c-lgray); max-width:480px; line-height:1.65; }

/* ══════════════════════════════════
   FILTER TOOLBAR — overflow visible para dropdowns
══════════════════════════════════ */
.stock-filter-bar {
  width:100%; background:rgba(26,40,48,.96);
  border-bottom:1.5px solid var(--c-o20);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  position:sticky; top:var(--nav-h); z-index:100;
  /* CRITICAL: overflow visible para que los menús se muestren */
  overflow:visible;
}
.stock-filter-inner {
  max-width:1200px; margin:0 auto; padding:.625rem 1.5rem;
  display:flex; align-items:center; gap:.875rem;
  flex-wrap:nowrap;
  /* scroll horizontal en móvil sin cortar los dropdowns */
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.stock-filter-inner::-webkit-scrollbar { display:none; }
.sf-label {
  font-size:.65rem; letter-spacing:1.5px; text-transform:uppercase;
  font-weight:700; color:var(--c-orange); white-space:nowrap; flex-shrink:0;
}
.sf-divider { width:1px; height:18px; background:var(--c-o20); flex-shrink:0; }

/* Dropdown wrapper */
.sf-dropdown { position:relative; flex-shrink:0; }
.sf-btn {
  display:flex; align-items:center; gap:.4rem;
  background:transparent; border:var(--bos); color:var(--c-dgray);
  font-family:var(--f-display); font-size:.7rem; font-weight:600;
  padding:.3rem .75rem; border-radius:var(--pill);
  transition:background .2s, border-color .2s, color .2s;
  white-space:nowrap; cursor:pointer;
}
.sf-btn.open, .sf-btn:hover {
  background:var(--c-o15); border-color:var(--c-orange); color:var(--c-orange);
}
.sf-caret {
  display:inline-block; width:0; height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform .2s; flex-shrink:0;
}
.sf-btn.open .sf-caret { transform:rotate(180deg); }

/* Dropdown menu — JS asigna position:fixed + coordenadas exactas */
.sf-menu {
  display:none;
  position:fixed; /* Sobreescrito por JS en cada apertura */
  min-width:150px;
  background:var(--c-slate1);
  border:1px solid var(--c-o30);
  border-radius:var(--r-sm);
  z-index:9999;
  overflow:visible;
  box-shadow:0 12px 32px rgba(0,0,0,.70);
  /* Asegurar visibilidad en pantallas pequeñas */
  max-height:60vh;
  overflow-y:auto;
}
/* Posicionamiento manejado por JavaScript (position:fixed vía getBoundingClientRect) */
.sf-menu.open { display:block; }
.sf-menu-item {
  display:block; width:100%; padding:.55rem 1rem;
  font-family:var(--f-display); font-size:.75rem; font-weight:500;
  color:var(--c-lgray); background:transparent; border:none;
  text-align:left; cursor:pointer;
  transition:background .15s, color .15s;
  border-bottom:1px solid rgba(255,87,34,.08);
  white-space:nowrap;
}
.sf-menu-item:last-child { border-bottom:none; }
.sf-menu-item:hover { background:var(--c-o15); color:var(--c-orange); }
.sf-menu-item.sf-all {
  color:var(--c-orange); font-size:.7rem; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
  border-top:1px solid var(--c-o20); margin-top:.25rem; padding-top:.5rem;
}

/* ══════════════════════════════════
   CONTENT
══════════════════════════════════ */
.stock-content { max-width:1200px; margin:0 auto; padding:2rem 1.5rem 5rem; }
.stock-count   { font-size:.8125rem; color:var(--c-sgray); margin-bottom:1.5rem; }
.stock-count span { color:var(--c-orange); font-weight:700; }

.stock-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.25rem;
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width:900px) {
  .stock-grid { grid-template-columns:repeat(3,1fr); gap:1rem; }
}
@media (max-width:680px) {
  .stock-filter-inner { padding:.5rem .75rem; gap:.625rem; }
  .sf-btn { font-size:.65rem; padding:.25rem .6rem; }
  .stock-hero { min-height:200px; }
  .stock-grid { grid-template-columns:repeat(2,1fr); gap:.875rem; }
  .stock-content { padding:1.5rem 1rem 4rem; }
  /* Menú alfabético más compacto en móvil */
  #sfAlphaMenu { column-count:2; }
}
@media (max-width:380px) {
  .stock-grid { gap:.625rem; }
}