/* ================================================================
   OK Drinks · MercaMX — Shared site CSS
   Single source of truth for nav + footer styling
   Each page sets its own :root vars (--accent, --bg, etc.)
   This file uses those vars so per-page brand colors are preserved
   ================================================================ */

/* ===== NAV ===== */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  height:72px;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(16px,3vw,40px);
  background:rgba(245,235,217,.85);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--border,rgba(15,12,10,.10));
}
.nav__logo{display:flex;align-items:center;gap:9px}
.nav__logo img{height:48px;width:auto}
.nav__logo img.nav__logo-merca{height:64px}
.nav__logo img.nav__logo-ok{height:48px}
.nav__by{font-size:12px;font-weight:600;font-style:italic;color:var(--ink3,#8a7866);white-space:nowrap;letter-spacing:.01em}
@media (max-width:600px){
  .nav__logo img.nav__logo-merca{height:52px}
  .nav__logo img.nav__logo-ok{height:38px}
  .nav__by{font-size:11px}
}
.nav__links{
  display:flex;
  gap:clamp(14px,2vw,28px);
  font-size:.92rem;
  font-weight:500;
  color:var(--ink2,#52453a);
}
.nav__links a{
  position:relative;
  padding:6px 2px;
  transition:color .3s cubic-bezier(.16,1,.3,1);
}
.nav__links a:hover,
.nav__links a.active{color:var(--ink,#0f0c0a)}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:2px;
  background:var(--accent,#a21357);
  transition:width .35s cubic-bezier(.16,1,.3,1);
}
.nav__links a:hover::after,
.nav__links a.active::after{width:100%}

.nav__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  background:var(--ink,#0f0c0a);
  color:var(--bg,#f5ebd9);
  font-weight:600;
  font-size:.88rem;
  transition:transform .2s cubic-bezier(.16,1,.3,1),background .3s cubic-bezier(.16,1,.3,1);
}
.nav__cta:hover{
  transform:translateY(-1px);
  background:var(--accent-d,#7a0d40);
}
.nav__cta:active{transform:translateY(0)}
.nav__cta svg{width:15px;height:15px}

.nav__hamburger{
  display:none;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  border-radius:999px;
  background:rgba(15,12,10,.06);
  color:var(--ink,#0f0c0a);
  cursor:pointer;
  border:none;
  font-family:inherit;
}
.nav__hamburger svg{width:20px;height:20px}
.nav__drawer{display:none}

/* ===== Language switcher (ES · IT) ===== */
.lang-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  color:var(--ink3,#9c8e7f);
  margin-left:6px;
  letter-spacing:.04em;
}
.lang-switch a{
  color:var(--ink3,#9c8e7f);
  padding:4px 6px;
  border-radius:4px;
  transition:color .25s cubic-bezier(.16,1,.3,1);
}
.lang-switch a:hover{color:var(--ink,#0f0c0a)}
.lang-switch a.active{color:var(--ink,#0f0c0a);background:rgba(15,12,10,.06)}
.lang-switch__sep{opacity:.4}

@media (max-width:780px){
  .nav__links{display:none}
  .nav__hamburger{display:inline-flex}
  .nav__drawer{
    display:flex;
    position:fixed;
    top:72px;left:0;right:0;bottom:0;
    width:100%;
    height:calc(100vh - 72px);
    background-color:#f5ebd9;
    background:#f5ebd9;
    z-index:9999;
    flex-direction:column;
    padding:24px clamp(16px,4vw,32px);
    gap:6px;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
    visibility:hidden;
    isolation:isolate;
    overflow-y:auto;
  }
  .nav__drawer.is-open{
    transform:translateX(0);
    visibility:visible;
  }
  .nav__drawer a{
    padding:14px 6px;
    color:var(--ink,#0f0c0a);
    font-size:1.05rem;
    font-weight:500;
    border-bottom:1px solid var(--border,rgba(15,12,10,.10));
  }
}

/* ===== FOOTER ===== */
.footer{
  padding:60px clamp(16px,4vw,64px) 36px;
  border-top:1px solid var(--border,rgba(15,12,10,.10));
  background:var(--bg-2,#ede0cf);
  position:relative;
  z-index:2;
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));
  gap:36px;
  margin-bottom:42px;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}
.footer__brand img{height:44px;width:auto;margin-bottom:18px}
.footer__lockup{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.footer__lockup img{margin-bottom:0}
.footer__brand img.footer__logo-merca{height:58px}
.footer__brand img.footer__logo-ok{height:44px}
.footer__by{font-size:12px;font-weight:600;font-style:italic;color:var(--ink2,#52453a);white-space:nowrap}
.footer__brand p,
.footer__tagline{
  color:var(--ink2,#52453a);
  font-size:.92rem;
  line-height:1.55;
  max-width:34ch;
}
.footer__col h4{
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink3,#9c8e7f);
  font-weight:700;
  margin-bottom:16px;
}
.footer__col ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
}
.footer__col a{
  color:var(--ink2,#52453a);
  font-size:.93rem;
  transition:color .25s cubic-bezier(.16,1,.3,1);
}
.footer__col a:hover{color:var(--ink,#0f0c0a)}
.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:28px;
  border-top:1px solid var(--border,rgba(15,12,10,.10));
  color:var(--ink3,#9c8e7f);
  font-size:.84rem;
  flex-wrap:wrap;
  gap:12px;
  max-width:1200px;
  margin:0 auto;
}
.footer__bottom strong{color:var(--ink2,#52453a);font-weight:600}

@media (max-width:780px){
  .footer__grid{
    grid-template-columns:1fr 1fr;
    gap:32px;
  }
  .footer__brand{grid-column:1/-1}
}