/* =====================================================================
   REAL HOLDING GROUP · the bar's lines (nav-lines.js): "Líneas" opens a panel just under it, straight to each
   line's own rest. The trigger is the bar's own link (same type, size, colour, hover); the panel is the bar's
   material (graphite, its blur, a fine line, copper only on the mark). Placed by the script: --nl-top, --nl-left,
   --nl-w (and --nl-gap: the bridge between the trigger and the panel, so the pointer never falls through it).
   ===================================================================== */
.pill__lines{ margin:0; border:0; background:none; font-family:inherit; line-height:inherit; letter-spacing:inherit; text-transform:none; cursor:pointer;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
.pill__lines[aria-expanded="true"]{ color:var(--hi); background:rgba(174,167,163,.07); }

.nav-lines{ position:absolute; top:var(--nl-top, 84px); left:var(--nl-left, 0px); width:var(--nl-w, 300px); padding:6px; border-radius:22px;
  background:rgba(31,30,29,.78); border:1px solid var(--line-soft); backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 24px 60px -36px rgba(0,0,0,.85); opacity:0; transform:translateY(-6px);
  transition:opacity .18s cubic-bezier(.16,1,.3,1), transform .18s cubic-bezier(.16,1,.3,1); }
.nav-lines[hidden]{ display:none; }
.nav-lines.is-in{ opacity:1; transform:none; transition-duration:.26s; }
.nav-lines::before{ content:""; position:absolute; left:0; right:0; top:calc(-1 * var(--nl-gap, 10px) - 1px); height:calc(var(--nl-gap, 10px) + 1px); } /* (the bridge) */
.nav-lines__list{ position:relative; margin:0; padding:0; list-style:none; }
.nav-lines__opt{ position:relative; z-index:1; display:flex; align-items:center; width:100%; min-height:44px; margin:0; padding:0 18px; border:0; border-radius:15px; background:none;
  font-family:inherit; font-size:.92rem; font-weight:500; line-height:1.2; letter-spacing:inherit; color:var(--stone); text-align:left; cursor:pointer; transition:color .22s;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
.nav-lines__opt:hover, .nav-lines__opt.is-hot{ color:var(--hi); }
.nav-lines__opt:focus-visible{ color:var(--hi); outline-offset:-2px; }
.nav-lines__opt[aria-current="true"]{ color:var(--hi); }
.nav-lines__opt[aria-current="true"]::after{ content:""; position:absolute; right:18px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--cognac-lite); } /* (where the page is now) */
/* one mark for all of them: it travels to the option under the pointer or the focus */
.nav-lines__ind{ position:absolute; z-index:0; left:6px; right:6px; top:6px; height:44px; border-radius:15px; background:rgba(174,167,163,.075); opacity:0;
  transform:translateY(var(--nl-y, 0px)); transition:transform .22s cubic-bezier(.16,1,.3,1), height .22s cubic-bezier(.16,1,.3,1), opacity .18s; pointer-events:none; }
.nav-lines__ind::after{ content:""; position:absolute; left:18px; bottom:9px; width:18px; height:1px; background:var(--cognac-lite); }
.nav-lines.is-ind .nav-lines__ind{ opacity:1; }
.nav-lines.no-glide .nav-lines__ind{ transition:opacity .18s; } /* (it appears where it is, then travels) */

@media (max-width:600px){
  .nav-lines{ border-radius:20px; }
  .nav-lines__opt{ padding:0 16px; font-size:.9rem; }
  .nav-lines__opt[aria-current="true"]::after{ right:16px; }
  .nav-lines__ind::after{ left:16px; }
}
@media (prefers-reduced-motion:reduce){
  .nav-lines, .nav-lines.is-in, .nav-lines__ind, .nav-lines__opt{ transition:none; }
}