/* ============================================================
   MARVEL FOOD — NAV + FOOTER compartidos (todas las páginas)
   ============================================================ */
:root{
  --mf-plum:#8e0a9b; --mf-honey:#ffb91d; --mf-honey-soft:#ffd56b;
  --mf-void:#161616; --mf-pill:999px;
  --mf-font:"Archivo","Archivo SemiExpanded",system-ui,-apple-system,sans-serif;
}
html,body{margin:0}
.mf-wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:rgba(142,10,155,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2.5px solid var(--mf-void)}
.nav-inner{display:flex;align-items:center;gap:16px;height:74px}
.nav-logo{height:52px;width:auto;display:block}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:var(--mf-font);font-stretch:112%}
.nav-links a{color:#fff;font-weight:700;font-size:14px;padding:9px 14px;border-radius:var(--mf-pill);text-transform:uppercase;letter-spacing:.02em;transition:.15s;text-decoration:none}
.nav-links a:hover{background:rgba(255,255,255,.15)}
.nav-links a.cta{background:var(--mf-honey);color:var(--mf-void);box-shadow:2px 2px 0 var(--mf-void)}
.nav-links a.cta:hover{transform:translateY(-1px);background:var(--mf-honey-soft)}
.nav-ig{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--mf-pill);color:#fff;padding:0}
.nav-ig:hover{background:rgba(255,255,255,.15)}
.nav-ig svg{width:27px;height:27px}
/* Móvil: mantenemos TODOS los links (como en escritorio), en una fila debajo del logo */
@media(max-width:680px){
  .nav-inner{flex-wrap:wrap;height:auto;gap:8px;padding-top:9px;padding-bottom:9px;justify-content:center}
  .nav-logo{height:42px}
  .nav-links{margin-left:0;width:100%;justify-content:center;flex-wrap:wrap;gap:5px}
  .nav-links a{font-size:12px;padding:7px 12px}
  .nav-ig{width:38px;height:38px}
  .nav-ig svg{width:22px;height:22px}
}
@media(max-width:380px){
  .nav-links a{font-size:11px;padding:6px 10px;letter-spacing:0}
  .nav-logo{height:38px}
}

/* FOOTER */
.footer{background:var(--mf-void);color:#fff;padding:48px 0 28px;font-family:var(--mf-font);font-stretch:112%}
.footer-top{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.footer-logo{height:54px;width:auto}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap}
.footer-nav a{color:rgba(255,255,255,.85);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.04em;text-decoration:none}
.footer-nav a:hover{color:var(--mf-honey)}
.footer-ig{display:inline-flex;align-items:center;gap:9px;color:#fff;font-weight:700;border:2px solid rgba(255,255,255,.3);padding:9px 16px;border-radius:var(--mf-pill);text-decoration:none}
.footer-ig svg{width:23px;height:23px}
.footer-ig:hover{border-color:var(--mf-honey);color:var(--mf-honey)}
.footer-bottom{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);font-size:13px;text-align:center}

/* ============================================================
   Blindaje: que el nav/footer se vean IGUAL en todas las páginas,
   sin que el line-height del body de cada página los afecte,
   y que los íconos no los encoja el flexbox.
   ============================================================ */
.nav,.nav-inner,.nav-links,.nav-links a{line-height:1.1}
.footer,.footer-top,.footer-nav,.footer-nav a,.footer-ig,.footer-bottom{line-height:1.3}
.nav-ig svg,.footer-ig svg{flex-shrink:0}
.nav-links a,.footer-nav a,.footer-ig{flex-shrink:0}