/*
 * Alista Marketing Services — shared shell.
 * Brand tokens + header, mobile drawer, footer and WhatsApp button used by
 * marketing.html, marketing/catalogo.html and marketing/cotizar.html.
 */

:root {
  --mk-ob: #12101a;
  --mk-ob-2: #1c1c2e;
  --mk-card: #221f33;
  --mk-crimson: #8b1a2b;
  --mk-crimson-hi: #a62d42;
  --mk-wine: #5c0e1f;
  --mk-gold: #c9a84c;
  --mk-gold-hi: #dfc16a;
  --mk-gold-lo: #a8862f;
  --mk-coral: #e07a5f;
  --mk-ivory: #faf7f2;
  --mk-cream: #f5f0e8;
  --mk-mute: #a39fb2;
  --mk-line: rgb(250 247 242 / 10%);
  --mk-display: 'Playfair Display', georgia, serif;
  --mk-body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --mk-mono: 'JetBrains Mono', ui-monospace, monospace;
  --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mk-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --mk-header-h: 72px;
}

html.mk-locked {
  overflow: hidden;
}

/* ── Skip link ─────────────────────────────────────────── */
.mk-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--mk-gold);
  color: var(--mk-ob);
  font: 600 0.85rem/1 var(--mk-body);
  transform: translateY(-160%);
  transition: transform 0.25s var(--mk-ease);
}

.mk-skip:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--mk-ivory);
  outline-offset: 2px;
}

/* ── Header ────────────────────────────────────────────── */
.mk-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 300;
  height: var(--mk-header-h);
  color: var(--mk-ivory);
}

.mk-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(18 16 26 / 72%);
  backdrop-filter: blur(18px) saturate(140%);
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari < 18 needs the prefix */
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--mk-line);
  box-shadow: 0 12px 40px -18px rgb(92 14 31 / 60%);
  opacity: 0;
  transition: opacity 0.35s var(--mk-ease);
}

.mk-header.is-scrolled::before,
.mk-header[data-solid]::before {
  opacity: 1;
}

.mk-header__inner {
  position: relative;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--mk-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.mk-logo {
  display: flex;
  align-items: center;
  border-radius: 6px;
}

.mk-logo img {
  height: 46px;
  width: auto;
}

.mk-logo:focus-visible {
  outline: 2px solid var(--mk-gold);
  outline-offset: 4px;
}

.mk-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mk-nav a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  font: 500 0.75rem/1 var(--mk-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mk-ivory);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.2s ease;
}

.mk-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--mk-gold), var(--mk-gold-hi));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--mk-ease);
}

.mk-nav a:hover,
.mk-nav a.is-active,
.mk-nav a[aria-current='page'] {
  opacity: 1;
}

.mk-nav a:hover::after,
.mk-nav a.is-active::after,
.mk-nav a[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: left;
}

.mk-nav a:focus-visible {
  opacity: 1;
  outline: 2px solid var(--mk-gold);
  outline-offset: 6px;
  border-radius: 2px;
}

.mk-nav a:active {
  transform: translateY(1px);
}

.mk-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mk-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mk-gold-hi), var(--mk-gold) 55%, var(--mk-gold-lo));
  color: var(--mk-ob);
  font: 600 0.78rem/1 var(--mk-body);
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgb(223 193 106 / 40%),
    0 10px 28px -10px rgb(201 168 76 / 65%);
  transition:
    transform 0.25s var(--mk-ease),
    box-shadow 0.25s var(--mk-ease);
}

.mk-cart:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgb(223 193 106 / 60%),
    0 16px 34px -10px rgb(201 168 76 / 80%);
}

.mk-cart:active {
  transform: translateY(0) scale(0.97);
}

.mk-cart:focus-visible {
  outline: 2px solid var(--mk-ivory);
  outline-offset: 3px;
}

.mk-cart[aria-current='page'] {
  box-shadow:
    0 0 0 2px var(--mk-ivory),
    0 10px 28px -10px rgb(201 168 76 / 65%);
}

.mk-cart__badge {
  display: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: var(--mk-crimson);
  color: var(--mk-ivory);
  font: 700 0.65rem/1 var(--mk-body);
}

.mk-cart__badge.visible {
  display: inline-flex;
  animation: mk-pop 0.4s var(--mk-ease);
}

@keyframes mk-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

.mk-burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--mk-line);
  border-radius: 50%;
  background: rgb(250 247 242 / 4%);
  cursor: pointer;
  position: relative;
}

.mk-burger span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1.5px;
  background: var(--mk-ivory);
  transition:
    transform 0.35s var(--mk-ease),
    opacity 0.2s ease;
}

.mk-burger span:nth-child(1) {
  transform: translateY(-5px);
}

.mk-burger span:nth-child(2) {
  transform: translateY(5px);
}

.mk-burger[aria-expanded='true'] span:nth-child(1) {
  transform: rotate(45deg);
}

.mk-burger[aria-expanded='true'] span:nth-child(2) {
  transform: rotate(-45deg);
}

.mk-burger:hover {
  background: rgb(250 247 242 / 10%);
}

.mk-burger:active {
  transform: scale(0.94);
}

.mk-burger:focus-visible {
  outline: 2px solid var(--mk-gold);
  outline-offset: 3px;
}

/* ── Mobile drawer ─────────────────────────────────────── */
.mk-drawer {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: calc(var(--mk-header-h) + 1rem) var(--mk-gutter) 2.5rem;
  background:
    radial-gradient(120% 60% at 100% 0%, rgb(139 26 43 / 55%), transparent 60%),
    radial-gradient(80% 50% at 0% 100%, rgb(201 168 76 / 18%), transparent 60%),
    var(--mk-ob);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s var(--mk-ease),
    visibility 0s linear 0.35s;
}

.mk-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--mk-ease);
}

.mk-drawer a {
  font: italic 700 clamp(2.2rem, 9vw, 3.2rem) / 1.15 var(--mk-display);
  color: var(--mk-ivory);
  text-decoration: none;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.45s var(--mk-ease),
    transform 0.45s var(--mk-ease);
}

.mk-drawer.is-open a {
  opacity: 1;
  transform: none;
}
.mk-drawer.is-open a:nth-child(2) { transition-delay: 0.04s; }
.mk-drawer.is-open a:nth-child(3) { transition-delay: 0.08s; }
.mk-drawer.is-open a:nth-child(4) { transition-delay: 0.12s; }
.mk-drawer.is-open a:nth-child(5) { transition-delay: 0.16s; }
.mk-drawer.is-open a:nth-child(6) { transition-delay: 0.2s; }

.mk-drawer a:hover,
.mk-drawer a:focus-visible {
  color: var(--mk-gold-hi);
  outline: none;
}

.mk-drawer a:active {
  opacity: 0.7;
}

.mk-drawer__meta {
  margin-top: 2rem;
  font: 400 0.75rem/1.6 var(--mk-mono);
  letter-spacing: 0.08em;
  color: var(--mk-mute);
}

@media (width <= 1024px) {
  .mk-nav {
    display: none;
  }

  .mk-burger {
    display: inline-block;
  }
}

@media (width <= 480px) {
  .mk-logo img {
    height: 38px;
  }

  .mk-cart {
    padding: 0.65rem 0.9rem;
  }

  .mk-cart__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* ── Footer ────────────────────────────────────────────── */
.mk-footer {
  position: relative;
  overflow: hidden;
  background: var(--mk-ob);
  color: var(--mk-ivory);
  font-family: var(--mk-body);
  padding: clamp(4rem, 8vw, 6rem) var(--mk-gutter) 2rem;
  border-top: 1px solid var(--mk-line);
}

.mk-footer::before {
  content: '';
  position: absolute;
  inset: auto -10% -60%;
  height: 120%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(139 26 43 / 35%), transparent 70%);
  pointer-events: none;
}

.mk-footer__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.mk-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
}

.mk-footer__logo {
  height: 52px;
  width: auto;
  margin-bottom: 1.25rem;
}

.mk-footer__tag {
  max-width: 30ch;
  color: var(--mk-mute);
  font-size: 0.92rem;
  line-height: 1.65;
}

.mk-footer__title {
  margin-bottom: 1rem;
  font: 500 .75rem/1 var(--mk-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mk-gold);
}

.mk-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mk-footer a {
  color: rgb(250 247 242 / 75%);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.mk-footer a:hover {
  color: var(--mk-gold-hi);
}

.mk-footer a:focus-visible {
  outline: 2px solid var(--mk-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.mk-footer a:active {
  opacity: 0.7;
}

.mk-footer__socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.mk-footer__socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--mk-line);
  transition:
    transform 0.25s var(--mk-ease),
    border-color 0.25s ease,
    color 0.2s ease;
}

.mk-footer__socials a:hover {
  transform: translateY(-3px);
  border-color: var(--mk-gold);
}

.mk-footer__word {
  margin: clamp(3rem, 6vw, 5rem) 0 1.5rem;
  font: italic 900 clamp(2.6rem, 10.5vw, 11rem) / 0.9 var(--mk-display);
  letter-spacing: -0.03em;
  color: rgb(250 247 242 / 7%);
  user-select: none;
  white-space: nowrap;
}

.mk-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mk-line);
  font-size: 0.78rem;
  color: var(--mk-mute);
}

.mk-footer__group {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.mk-footer__group img {
  height: 26px;
  width: auto;
  opacity: 0.85;
}

@media (width <= 1024px) {
  .mk-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (width <= 480px) {
  .mk-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ── WhatsApp button ───────────────────────────────────── */
.mk-wa {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 250;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1fa855;
  color: #fff;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 12%),
    0 14px 30px -10px rgb(31 168 85 / 70%);
  transition: transform 0.25s var(--mk-ease);
}

.mk-wa:hover {
  transform: translateY(-3px) scale(1.04);
}

.mk-wa:active {
  transform: scale(0.95);
}

.mk-wa:focus-visible {
  outline: 2px solid var(--mk-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .mk-header *,
  .mk-header::before,
  .mk-drawer,
  .mk-drawer a,
  .mk-footer *,
  .mk-wa,
  .mk-skip {
    transition: none !important;
    animation: none !important;
  }
}

.mk-footer__addr {
  color: var(--mk-mute);
  font-size: 0.85rem;
  line-height: 1.6;
}

.mk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}