/* ============================================================
   AUDIO PLANET — Header: menú principal (.apm) + buscador (.aps)
   v1.1 — Menú adaptado a header oscuro + apertura con más presencia
          (cortina, línea cobre, cascada de links, fondo atenuado).
============================================================= */
:root{
  --ap-accent:#C38356;
  --ap-accent-2:#d9a079;
  --ap-dark:#282727;
  --ap-ink:#1b1b1b;
  --ap-muted:#6b6f76;
  --ap-line:rgba(0,0,0,.08);
  --ap-ease:cubic-bezier(.22,.61,.36,1);
  --ap-out:cubic-bezier(.16,1,.3,1);

  /* Menú sobre header oscuro */
  --apm-text:#EDEDEB;              /* ítems del header */
  --apm-text-dim:rgba(237,237,235,.72);
  --apm-panel:rgba(24,23,23,.94);  /* panel desplegable */
  --apm-panel-line:rgba(255,255,255,.08);
  --apm-link:#E6E6E3;
  --apm-link-sub:#9DA1A7;
}

/* ---------------- MENÚ ---------------- */
.apm{ position:relative; }
.apm-bar{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.apm-item{ position:static; }

.apm-trigger{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:15px; font-weight:500; letter-spacing:-.01em;
  color:var(--apm-text) !important; background:none; border:0; cursor:pointer;
  padding:10px 14px; border-radius:999px; text-decoration:none !important;
  transition:background-color .25s ease, color .25s ease;
}
button.apm-trigger::after{
  content:""; width:6px; height:6px; margin-top:-3px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.6; transition:transform .35s var(--ap-out), margin .35s var(--ap-out);
}
/* Indicador cobre debajo del ítem activo */
.apm-trigger::before{
  content:""; position:absolute; left:50%; bottom:2px; width:18px; height:2px; margin-left:-9px;
  border-radius:2px; background:var(--ap-accent);
  transform:scaleX(0); transition:transform .35s var(--ap-out);
}
.apm-trigger:hover{ background:rgba(255,255,255,.07); }
.apm-item.is-open > .apm-trigger{ background:rgba(255,255,255,.1); color:#fff !important; }
.apm-item.is-open > .apm-trigger::before,
.apm-trigger:hover::before{ transform:scaleX(1); }
.apm-item.is-open > button.apm-trigger::after{ transform:rotate(225deg); margin-top:3px; }
.apm-trigger:focus-visible{ outline:2px solid var(--ap-accent); outline-offset:2px; }

/* Panel: se abre como una cortina desde arriba */
.apm-panel{
  position:absolute; top:100%; right:0; z-index:1002;
  width:min(1040px, calc(100vw - 48px));
  margin-top:16px; padding:38px 40px 32px;
  background:var(--apm-panel);
  -webkit-backdrop-filter:saturate(1.4) blur(20px); backdrop-filter:saturate(1.4) blur(20px);
  border:1px solid var(--apm-panel-line); border-radius:18px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(195,131,86,.06);
  opacity:0; visibility:hidden;
  transform:translateY(-14px) scale(.985); transform-origin:top right;
  clip-path:inset(0 0 100% 0 round 18px);
  transition:opacity .25s ease, transform .45s var(--ap-out), clip-path .5s var(--ap-out), visibility 0s linear .5s;
}
/* Puente invisible entre botón y panel */
.apm-panel::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
/* Línea cobre superior que se "dibuja" al abrir */
.apm-panel::after{
  content:""; position:absolute; left:40px; right:40px; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(195,131,86,0), var(--ap-accent) 25%, var(--ap-accent-2) 50%, var(--ap-accent) 75%, rgba(195,131,86,0));
  transform:scaleX(0); transition:transform .7s var(--ap-out) .12s;
}

.apm-item:hover > .apm-panel,
.apm-item:has(:focus-visible) > .apm-panel,
.apm-item.is-open > .apm-panel{
  opacity:1; visibility:visible; transform:none; clip-path:inset(0 0 0 0 round 18px);
  transition:opacity .25s ease, transform .45s var(--ap-out), clip-path .5s var(--ap-out), visibility 0s;
}
.apm-item:hover > .apm-panel::after,
.apm-item:has(:focus-visible) > .apm-panel::after,
.apm-item.is-open > .apm-panel::after{ transform:scaleX(1); }
/* Con JS, la apertura la controla el script (con retardo de intención) */
.apm.js .apm-item:hover:not(.is-open) > .apm-panel{
  opacity:0; visibility:hidden; transform:translateY(-14px) scale(.985); clip-path:inset(0 0 100% 0 round 18px);
}
.apm.js .apm-item:hover:not(.is-open) > .apm-panel::after{ transform:scaleX(0); }

/* Fondo de la página atenuado mientras el menú está abierto */
.apm-scrim{
  position:fixed; inset:0; z-index:1000; pointer-events:none;
  background:rgba(10,10,10,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s ease;
}
html.apm-open .apm-scrim{ opacity:1; }
html.apm-open #header{ position:relative; z-index:1001; }

/* Columnas y links */
.apm-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 38px; }
.apm-h{
  margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ap-accent);
}
.apm-col ul{ list-style:none; margin:0 0 26px; padding:0; }
.apm-col ul:last-child{ margin-bottom:0; }
.apm-col a{
  position:relative; display:block; padding:6px 0; font-size:15px; line-height:1.3;
  color:var(--apm-link) !important; text-decoration:none !important;
  transition:color .2s ease, transform .3s var(--ap-out);
}
.apm-col a small{ display:block; font-size:12.5px; color:var(--apm-link-sub); margin-top:2px; }
.apm-col a:hover{ color:var(--ap-accent-2) !important; transform:translateX(5px); }
.apm-col a::before{
  content:""; position:absolute; left:-12px; top:50%; width:5px; height:5px; margin-top:-2.5px;
  border-radius:50%; background:var(--ap-accent); opacity:0; transform:scale(0);
  transition:opacity .2s ease, transform .3s var(--ap-out);
}
.apm-col a:hover::before{ opacity:1; transform:scale(1); }

/* Cascada: columnas y cada link entran escalonados */
.apm-col, .apm-col li, .apm-cards li, .apm-more{
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .55s var(--ap-out);
}
.apm-item.is-open .apm-col, .apm-item.is-open .apm-col li, .apm-item.is-open .apm-cards li, .apm-item.is-open .apm-more,
.apm-item:has(:focus-visible) .apm-col, .apm-item:has(:focus-visible) .apm-col li,
.apm-item:has(:focus-visible) .apm-cards li, .apm-item:has(:focus-visible) .apm-more,
.apm:not(.js) .apm-item:hover .apm-col, .apm:not(.js) .apm-item:hover .apm-col li,
.apm:not(.js) .apm-item:hover .apm-cards li, .apm:not(.js) .apm-item:hover .apm-more{ opacity:1; transform:none; }
.apm-col:nth-child(1){ transition-delay:.08s; } .apm-col:nth-child(2){ transition-delay:.13s; }
.apm-col:nth-child(3){ transition-delay:.18s; } .apm-col:nth-child(4){ transition-delay:.23s; }
.apm-col li:nth-child(1){ transition-delay:.12s; } .apm-col li:nth-child(2){ transition-delay:.16s; }
.apm-col li:nth-child(3){ transition-delay:.20s; } .apm-col li:nth-child(4){ transition-delay:.24s; }
.apm-col li:nth-child(5){ transition-delay:.28s; } .apm-col li:nth-child(6){ transition-delay:.32s; }
.apm-col li:nth-child(7){ transition-delay:.36s; } .apm-col li:nth-child(8){ transition-delay:.40s; }
.apm-cards li:nth-child(n){ transition-delay:calc(.08s + var(--i, 0) * .04s); }
.apm-more{ transition-delay:.4s; }
/* Al cerrar, todo sale junto y rápido */
.apm-item:not(.is-open) .apm-col, .apm-item:not(.is-open) .apm-col li,
.apm-item:not(.is-open) .apm-cards li, .apm-item:not(.is-open) .apm-more{ transition-delay:0s; transition-duration:.15s; }

/* Sonos: tarjetas claras para que los productos negros se vean */
.apm-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.apm-cards a{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px 14px;
  border-radius:14px; text-decoration:none !important; color:var(--apm-link) !important; font-size:14px; text-align:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  transition:background-color .25s ease, border-color .25s ease, transform .35s var(--ap-out);
}
.apm-cards a:hover{ background:rgba(255,255,255,.08); border-color:rgba(195,131,86,.5); transform:translateY(-3px); }
.apm-cards img{
  height:78px; width:100%; object-fit:contain; padding:6px; border-radius:10px;
  background:#F1F0ED; transition:transform .45s var(--ap-out);
}
.apm-cards a:hover img{ transform:scale(1.05); }
.apm-more{ display:inline-block; margin-top:20px; font-size:14px; font-weight:600; color:var(--ap-accent-2) !important; text-decoration:none !important; }
.apm-more:hover{ color:#fff !important; }

@media (max-width: 1100px){ .apm-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .apm-cards{ grid-template-columns:repeat(4,1fr); } }
@media (prefers-reduced-motion: reduce){
  .apm-panel, .apm-panel::after, .apm-col, .apm-col li, .apm-cards li, .apm-more, .apm-col a, .apm-scrim{ transition:none !important; }
  .apm-panel{ clip-path:none; }
}

/* ---------------- BUSCADOR ---------------- */
.aps{ position:fixed; inset:0; z-index:99999; display:flex; justify-content:center; align-items:flex-start; padding:12vh 16px 16px; }
.aps[hidden]{ display:none; }
.aps-backdrop{ position:absolute; inset:0; background:rgba(20,20,20,.38); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:aps-fade .2s ease; }
.aps-box{
  position:relative; width:min(680px, 100%); max-height:76vh; display:flex; flex-direction:column;
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.45);
  animation:aps-in .28s var(--ap-ease);
}
@keyframes aps-fade{ from{ opacity:0; } }
@keyframes aps-in{ from{ opacity:0; transform:translateY(-10px) scale(.985); } }

.aps-form{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--ap-line); margin:0; }
.aps-form svg{ flex:0 0 20px; width:20px; height:20px; color:var(--ap-muted); }
.aps-input{
  flex:1; min-width:0; border:0 !important; outline:0; background:transparent !important; box-shadow:none !important;
  font:inherit; font-size:19px; color:var(--ap-ink); padding:4px 0 !important; height:auto !important;
}
.aps-input::-webkit-search-cancel-button{ display:none; }
.aps-close{ font:inherit; font-size:12px; color:var(--ap-muted); background:#f2f2f0; border:0; border-radius:6px; padding:5px 8px; cursor:pointer; }

.aps-body{ overflow-y:auto; overscroll-behavior:contain; }
.aps-hints{ padding:18px 20px 22px; }
.aps-hints p{ margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ap-accent); }
.aps-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.aps-chip{ font:inherit; font-size:14px; padding:7px 14px; border-radius:999px; border:1px solid var(--ap-line); background:#fff; cursor:pointer; color:var(--ap-ink); transition:border-color .2s, color .2s; }
.aps-chip:hover{ border-color:var(--ap-accent); color:var(--ap-accent); }

.aps-list{ list-style:none; margin:0; padding:8px; }
.aps-opt a{
  display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:16px;
  padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--ap-ink);
}
.aps-opt[aria-selected="true"] a, .aps-opt a:hover{ background:#f5f3ef; }
.aps-thumb{ width:64px; height:64px; border-radius:10px; background:#f4f4f2; object-fit:contain; }
.aps-name{ font-size:15px; font-weight:500; line-height:1.3; }
.aps-name mark{ background:none; color:var(--ap-accent); font-weight:700; }
.aps-badge{ display:block; margin-top:4px; font-size:11.5px; color:var(--ap-muted); }
.aps-price{ text-align:right; font-size:15px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.aps-price del{ display:block; font-size:12px; font-weight:400; color:var(--ap-muted); }

.aps-status{ padding:18px 20px; font-size:14px; color:var(--ap-muted); }
.aps-note{ margin:0; padding:14px 20px 0; font-size:13px; color:var(--ap-muted); }
.aps-note[hidden]{ display:none; }
.aps-status:empty{ display:none; padding:0; }
.aps-skel{ height:84px; margin:8px; border-radius:12px; background:linear-gradient(90deg,#f3f3f1 25%,#ebebe8 50%,#f3f3f1 75%); background-size:200% 100%; animation:aps-sh 1.1s linear infinite; }
@keyframes aps-sh{ to{ background-position:-200% 0; } }

.aps-all{ display:block; padding:14px 20px; border-top:1px solid var(--ap-line); font-size:14px; font-weight:600; color:var(--ap-accent); text-decoration:none; }
.aps-all:hover{ background:#faf8f5; }
.aps-all[hidden]{ display:none; }

@media (max-width: 600px){
  .aps{ padding:0; }
  .aps-box{ width:100%; max-height:100%; height:100%; border-radius:0; }
  .aps-opt a{ grid-template-columns:52px 1fr; }
  .aps-thumb{ width:52px; height:52px; grid-row:span 2; }
  .aps-price{ grid-column:2; text-align:left; font-size:14px; }
}
html.aps-lock{ overflow:hidden; }