@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/d1e79943-f4be-4cd2-8d53-60847f5512c8.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/f9f7dbb4-748d-4314-9706-c7a1b13abb63.woff2") format("woff2");
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  mix-blend-mode: normal;
}

::view-transition-old(kz-site-header),
::view-transition-new(kz-site-header) {
  animation: none;
  mix-blend-mode: normal;
}

:root {
  --kz-shell-cream: #EFE8D7;
  --kz-shell-brown: #26150D;
  --kz-shell-copper: #B5784A;
  --kz-shell-line: #DED3BE;
  --kz-shell-muted: #5C4A38;
}

.kz-site-header {
  position: sticky;
  view-transition-name: kz-site-header;
  top: 0;
  z-index: 80;
  width: 100%;
  background: rgba(239,232,215,.96);
  border-bottom: 1px solid var(--kz-shell-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.kz-site-header-inner {
  width: min(1240px, calc(100% - 80px));
  min-height: 70px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 30px;
}

.kz-site-brand {
  justify-self: start;
  color: var(--kz-shell-brown);
  text-decoration: none;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .18em;
  padding-left: .18em;
}

.kz-site-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 !important;
}

.kz-site-nav a {
  position: relative;
  padding: 27px 0 25px;
  color: var(--kz-shell-muted) !important;
  text-decoration: none !important;
  font-family: "Hanken Grotesk", Arial, sans-serif;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  border: 0 !important;
  transition: color .2s ease;
}

.kz-site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 18px;
  height: 1px;
  background: var(--kz-shell-copper);
  transition: left .2s ease, right .2s ease;
}

.kz-site-nav a:hover,
.kz-site-nav a.is-active {
  color: var(--kz-shell-copper) !important;
}

.kz-site-nav a.is-active::after {
  left: 0;
  right: 0;
}

.kz-site-wa {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  background: var(--kz-shell-brown);
  border: 1px solid var(--kz-shell-brown);
  color: var(--kz-shell-cream) !important;
  text-decoration: none !important;
  font-family: "Hanken Grotesk", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease;
}

.kz-site-wa:hover {
  background: var(--kz-shell-copper);
  border-color: var(--kz-shell-copper);
}

@media (max-width: 760px) {
  .kz-site-header-inner {
    width: calc(100% - 40px);
    min-height: 62px;
    grid-template-columns: auto 1fr auto;
    column-gap: 14px;
  }

  .kz-site-brand {
    font-size: 20px;
  }

  .kz-site-nav {
    gap: 14px;
  }

  .kz-site-nav a {
    padding: 23px 0 21px;
    font-size: 10px !important;
    letter-spacing: .06em !important;
  }

  .kz-site-nav a::after {
    bottom: 15px;
  }

  .kz-site-wa {
    display: none;
  }
}

@media (max-width: 440px) {
  .kz-site-header-inner {
    width: calc(100% - 28px);
  }

  .kz-site-nav {
    justify-self: end;
    gap: 12px;
  }

  .kz-site-nav a[href="/#regalos"] {
    display: none;
  }
}
