/* ═══════════ menú de productos ═══════════
   El header es el mismo en todo el sitio: marca, catálogo por categoría
   y el paso siguiente. La navegación de la página vive en el marcador
   lateral, no aquí. */
.hdr__in{ position:relative; }
.hdr__prod{ position:static; }
.hdr__prod > button{
  background:none; border:0; cursor:pointer;
  font-family:inherit;
  font-size:var(--t-xs); font-weight:400;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey-1);
  padding-block:var(--s1);
  display:flex; align-items:center; gap:0.5rem;
  transition:color 0.3s var(--ease);
}
.hdr__prod > button:hover,
.hdr__prod[data-open="true"] > button{ color:var(--text); }
.hdr__prod > button svg{
  width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1.6;
  transition:transform 0.35s var(--ease);
}
.hdr__prod[data-open="true"] > button svg{ transform:rotate(180deg); }

.hdr__menu{
  position:absolute; z-index:40; top:calc(100% + 1.1rem); right:0;
  width:min(46rem, calc(100vw - 3rem));
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.hdr__prod[data-open="true"] .hdr__menu{ opacity:1; visibility:visible; transform:none; }

.hdr__cat{
  background:#0C0C0E;
  padding:var(--s3);
  display:grid; gap:0.55rem; align-content:start;
}
.hdr__cat > b,
.hdr__cat > .hdr__cat-t{
  font-family:var(--font-display); font-weight:700;
  font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase;
  color:#C9A85C;
  padding-bottom:0.55rem;
  border-bottom:1px solid var(--line);
}
.hdr__cat-t{
  display:block;
  transition:color 0.25s var(--ease);
}
.hdr__cat-t:hover{ color:var(--text) !important; }
.hdr__cat a:not(.hdr__cat-t){
  font-size:var(--t-sm); color:var(--grey-1);
  display:flex; align-items:baseline; gap:0.6rem;
  transition:color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.hdr__cat a:hover{ color:var(--text); padding-left:0.3rem; }
.hdr__cat a em{
  font-style:normal; font-size:0.6rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--grey-2);
}
.hdr__cat span{
  font-size:var(--t-sm); color:var(--grey-2);
  display:flex; align-items:baseline; gap:0.6rem;
}
.hdr__cat span em{
  font-style:normal; font-size:0.58rem; letter-spacing:0.12em;
  text-transform:uppercase; color:#4A4A4A;
}

/* ═══════════ marcador lateral de secciones ═══════════
   Dónde estoy y cuánto falta, sin robarle sitio al contenido. */
.guia{
  position:fixed; z-index:35;
  right:clamp(0.9rem, 2vw, 2rem);
  top:50%; transform:translateY(-50%);
  display:grid; gap:0.9rem;
  padding:0.4rem 0;
}
.guia a{
  display:flex; align-items:center; justify-content:flex-end; gap:0.7rem;
  color:var(--grey-2);
}
.guia__p{
  width:6px; height:6px; border-radius:999px;
  background:var(--grey-2); opacity:0.42; flex:none;
  transition:opacity 0.35s var(--ease), background-color 0.35s var(--ease),
             transform 0.35s var(--ease);
}
.guia__r{
  font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase;
  white-space:nowrap;
  opacity:0; transform:translateX(6px);
  transition:opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}
.guia a:hover .guia__p{ opacity:1; }
.guia a:hover .guia__r{ opacity:1; transform:none; color:var(--text); }
.guia a[aria-current="true"] .guia__p{
  background:#C9A85C; opacity:1; transform:scale(1.5);
}
.guia a[aria-current="true"] .guia__r{ opacity:1; transform:none; color:#C9A85C; }
.guia a:focus-visible{ outline:1px solid var(--accent); outline-offset:4px; }

@media (max-width:64rem){ .guia{ display:none; } }
@media (max-width:52rem){
  .hdr__menu{
    position:fixed; left:1rem; right:1rem; top:auto; width:auto;
    grid-template-columns:1fr;
  }
}
@media (prefers-reduced-motion:reduce){
  .guia__p, .guia__r, .hdr__menu, .hdr__prod > button svg{ transition:none; }
}

/* con cinco categorías el menú pasa a tres columnas en pantallas anchas
   y, si la pantalla es baja, se desplaza por dentro en lugar de cortarse */
.hdr__menu{ max-height:calc(100vh - 6.5rem); overflow-y:auto; overscroll-behavior:contain; }
@media (min-width:68rem){
  .hdr__menu{ width:min(66rem, calc(100vw - 3rem)); grid-template-columns:repeat(3, minmax(0,1fr)); }
  .hdr__menu::after{ content:""; background:#0C0C0E; }
}