/* ══════════════════════════════════════════════════════════
   MENÚ DE COLECCIONES · compartido por la landing y la tienda
   ──────────────────────────────────────────────────────────
   El isotipo de Casa Ortiz es la puerta al catálogo entero.
   Late unas veces para avisar que ahí hay algo, y se calla
   para siempre en cuanto alguien lo abre.
   Se llena solo desde products.json: nunca ofrece una
   colección que ya no existe.
   ══════════════════════════════════════════════════════════ */

/* ── El isotipo, que además es el botón ─────────────────── */
.marca-ic{
  position:relative;width:46px;height:46px;flex:none;border-radius:14px;
  display:flex;align-items:center;justify-content:center;transition:var(--t);
}
.marca-ic .logo-ic{width:34px;height:auto;transition:transform .5s var(--ease)}
.marca-ic:hover{background:rgba(5,128,160,.08)}
.marca-ic:hover .logo-ic{transform:scale(1.06)}
.marca-ic[aria-expanded="true"]{background:rgba(5,128,160,.12)}
.marca-ic::before{
  content:"";position:absolute;inset:1px;border-radius:14px;
  border:1.5px solid var(--marca);opacity:0;pointer-events:none;
  animation:latido 3s var(--ease) infinite;
}
@keyframes latido{
  0%   {transform:scale(.86);opacity:0}
  18%  {opacity:.5}
  60%  {transform:scale(1.3);opacity:0}
  100% {transform:scale(1.3);opacity:0}
}
/* Cumplió su trabajo: deja de llamar la atención */
.marca-ic.visto::before,
.marca-ic[aria-expanded="true"]::before{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){ .marca-ic::before{animation:none} }

/* ── El panel ───────────────────────────────────────────── */
.menu-velo{
  position:fixed;inset:0;z-index:290;background:rgba(4,26,34,.42);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .38s var(--ease);
}
.menu-velo.on{opacity:1}
.menu-panel{
  position:fixed;top:0;left:0;right:0;z-index:295;
  background:rgba(255,255,255,.985);backdrop-filter:blur(26px) saturate(1.3);
  border-bottom:1px solid rgba(14,21,25,.1);
  border-radius:0 0 clamp(16px,2vw,24px) clamp(16px,2vw,24px);
  box-shadow:0 30px 70px -34px rgba(5,60,80,.42);
  transform:translateY(-14px);opacity:0;
  transition:transform .46s var(--ease),opacity .34s var(--ease);
  max-height:100svh;overflow-y:auto;overscroll-behavior:contain;
}
.menu-panel.on{transform:none;opacity:1}
.menu-in{max-width:1340px;margin:0 auto;padding:clamp(18px,2.4vw,26px) var(--pad) clamp(22px,3vw,32px)}
.menu-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,2vw,20px)}
.menu-ojo{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--marca)}
.menu-x{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(14,21,25,.12);transition:var(--t);
}
.menu-x svg{width:14px;height:14px;stroke:var(--linen-50);fill:none;stroke-width:1.8;stroke-linecap:round}
.menu-x:hover{border-color:var(--marca);background:rgba(5,128,160,.06)}
.menu-x:hover svg{stroke:var(--marca)}

.menu-grid{
  display:grid;gap:clamp(8px,1.2vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,252px),1fr));
}
.menu-item{
  display:flex;align-items:center;gap:13px;padding:9px;border-radius:16px;
  border:1px solid rgba(14,21,25,.08);background:#fff;transition:var(--t);
}
.menu-item:hover{border-color:rgba(5,128,160,.34);background:var(--ink-2);transform:translateY(-2px)}
.menu-item .foto{width:56px;height:56px;flex:none;border-radius:12px;overflow:hidden;background:var(--ink-3)}
.menu-item .foto img{width:100%;height:100%;object-fit:cover;display:block}
.menu-item .txt{min-width:0;flex:1}
.menu-item .n{
  font-size:.88rem;color:var(--linen);line-height:1.25;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.menu-item .m{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--linen-30)}
.menu-item .m b{color:var(--rojo,#C1121F);font-weight:600;letter-spacing:.04em}

.menu-pie{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:clamp(16px,2.2vw,22px);padding-top:clamp(14px,2vw,18px);
  border-top:1px solid rgba(14,21,25,.08);
}
.menu-todo,.menu-link{
  display:inline-flex;align-items:center;padding:11px 20px;border-radius:999px;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;transition:var(--t);
}
.menu-todo{background:var(--marca);color:#fff}
.menu-todo:hover{background:var(--marca-lt);transform:translateY(-1px)}
.menu-link{border:1px solid rgba(14,21,25,.14);color:var(--linen-70)}
.menu-link:hover{border-color:var(--marca);color:var(--marca);background:rgba(5,128,160,.05)}

body.menu-abierto{overflow:hidden}

@media (max-width:900px){
  .marca-ic{width:42px;height:42px}
  .marca-ic .logo-ic{width:31px}
  .menu-grid{grid-template-columns:1fr 1fr;gap:8px}
  .menu-item{flex-direction:column;align-items:flex-start;gap:9px;padding:8px}
  .menu-item .foto{width:100%;height:96px;border-radius:11px}
  .menu-item .n{font-size:.82rem}
  .menu-pie{flex-direction:column;align-items:stretch}
  .menu-todo,.menu-link{justify-content:center}
}
@media (max-width:380px){
  .menu-grid{grid-template-columns:1fr}
  .menu-item{flex-direction:row}
  .menu-item .foto{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){ .menu-panel{transition:opacity .01ms} }