/* =================================================================
   IATE CLUBE DE ITACURUÇÁ — Menu de atalhos (Lojas & Serviços)
   Barra sticky de chips com scroll-spy, na página Marina.
   Depende das variáveis de css/styles.css.
   ================================================================= */

/* offset das âncoras para o menu fixo não cobrir o título */
.partner{scroll-margin-top:clamp(132px,17vh,164px)}

.shortcuts{
  position:sticky;top:58px;z-index:40;
  background:rgba(243,239,231,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sand);
  box-shadow:0 8px 24px rgba(12,35,53,.06);
}
.shortcuts__row{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;
  padding:14px clamp(20px,5vw,56px);
}
.shortcuts__lead{
  font-family:var(--sans);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);margin-right:6px;
}

.chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 22px;border-radius:50px;
  background:#fff;border:1px solid var(--sand);color:var(--navy-800);
  font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 6px 16px rgba(12,35,53,.06);white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.chip__ic{display:grid;place-items:center;flex:0 0 auto;color:var(--coral);transition:color .3s var(--ease)}
.chip__ic svg{width:18px;height:18px;display:block}
.chip:hover{transform:translateY(-2px);border-color:var(--coral);box-shadow:0 14px 28px rgba(12,35,53,.13)}
.chip:focus-visible{outline:3px solid rgba(207,111,97,.65);outline-offset:3px}
.chip.is-active{
  background:var(--coral);border-color:var(--coral);color:#fff;
  box-shadow:0 14px 30px rgba(184,88,75,.36);
}
.chip.is-active .chip__ic{color:#fff}

/* mobile: faixa horizontal com rolagem lateral + snap */
@media (max-width:640px){
  .shortcuts__row{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding:12px clamp(16px,5vw,24px);scrollbar-width:none;
  }
  .shortcuts__row::-webkit-scrollbar{display:none}
  .shortcuts__lead{display:none}
  .chip{scroll-snap-align:start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chip{transition:none}
}