/* =========================
   HERO / BANNER
========================= */

.hero-slider {
  width: 100%;
  margin-top: 0;
  background-color: #1a0707;
  position: relative;
}

.hero-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.hero-track {
  display: flex;
  width: 100%;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  cursor: grab;
}

.hero-slider:active .hero-track {
  cursor: grabbing;
}

.hero-slide {
  width: 100%;
  min-width: 100%;
  flex-shrink: 0;
  display: block;
  touch-action: pan-y;
}

.hero-slide,
.hero-slide img {
  user-select: none;
  -webkit-user-drag: none;
}

.hero-slide picture,
.hero-slide img {
  width: 100%;
  display: block;
}

.hero-slide img {
  height: auto;
  pointer-events: none;
}

/* ---------- BANNER EM LAYERS ---------- */

.hero-slide--layered {
  position: relative;
  width: 100%;
  aspect-ratio: 3840 / 1080;
  overflow: hidden;
  background: #1a0707;
}

@media (max-width: 768px) {
  .hero-slide--layered {
    aspect-ratio: 1080 / 1514;
  }
}

.hero-slide--layered .hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-slide--layered .hero-layer img,
.hero-slide--layered .hero-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-slide--layered .hero-layer--front {
  z-index: 2;
}

.hero-slide--layered .hero-layer--bg {
  z-index: 1;
  transform: scale(1.08);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hero-slide--layered .hero-layer--chef {
  z-index: 2;
  transform: translate3d(0, 0, 0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hero-slide--layered .hero-layer--hotdog {
  z-index: 3;
  transform: translate3d(0, 0, 0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ---------- MOBILE IMAGE ---------- */

.hero-mobile-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 4;
}

@media (max-width: 768px) {
  .hero-mobile-img {
    display: block;
  }

  .hero-slide--layered .hero-layer,
  .hero-copy > *:not(.hero-cta-cardapio),
  .hero-disclaimer {
    display: none;
  }

  .hero-copy {
    inset: auto 0 8% 0;
    top: auto;
    left: 0;
    right: 0;
    width: auto;
    align-items: center;
    z-index: 5;
  }
}

@media (min-width: 769px) {
  .hero-mobile-img {
    display: none !important;
  }

  .hero-slide--layered .hero-layer {
    display: block !important;
  }

  .hero-slide--layered .hero-layer img {
    display: block !important;
  }
}

/* ---------- TEXTOS ---------- */

.hero-copy {
  position: absolute;
  z-index: 5;
  left: 18%;
  top: 16%;
  width: 30%;
  color: #F4E3AE;
  text-align: left;
  font-family: 'Yeah', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-copy > *:not(.hero-cta-cardapio) {
  pointer-events: none;
}

.hero-cta-cardapio {
  pointer-events: auto;
}

.hero-copy__title {
  font-family: 'Cnossus', 'Yeah', sans-serif;
  font-size: 3.2vw;
  line-height: 0.92;
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  gap: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.hero-copy__title > span:first-child {
  font-size: 0.36em;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-bottom: -0.05em;
}

.hero-copy__title--accent {
  color: #FFFFFF;
  text-shadow: 0 0.12vw 0.52vw rgba(0, 0, 0, 0.55);
}

.hero-copy__sub {
  font-family: 'Cnossus', 'Yeah', sans-serif;
  font-size: 1.45vw;
  margin: -0.1em 0 1vw;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #F4E3AE;
  -webkit-font-smoothing: antialiased;
}

.hero-copy__feats {
  list-style: none;
  padding: 0;
  margin: 0 0 1vw;
  display: flex;
  flex-direction: column;
  gap: 0.25vw;
  font-size: 1.1vw;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.hero-copy__feats li {
  position: relative;
  padding-left: 2.2vw;
  display: flex;
  align-items: center;
  min-height: 1.5vw;
}

.hero-copy__feats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.45vw;
  height: 1.45vw;
  background-image: url('../img/icons/pig_icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
}

.hero-copy__disclaimer {
  font-size: 0.55vw;
  opacity: 0.78;
  margin: 0;
  letter-spacing: 0.02em;
  max-width: 95%;
}

/* ---------- DISCLAIMER ---------- */

.hero-disclaimer {
  position: absolute;
  z-index: 5;
  right: 18%;
  bottom: 4%;
  text-align: right;
  font-family: 'Yeah', sans-serif;
  font-size: 0.6vw;
  color: #F4E3AE;
  opacity: 0.78;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- SELO ---------- */

.hero-slide--layered img.hero-seal {
  position: absolute;
  z-index: 5;
  right: 11%;
  top: 11%;
  width: 9%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0.7vw 1.1vw rgba(0,0,0,0.35));
  transform-origin: center;
  animation: heroSealHeartbeat 1.4s ease-in-out infinite;
}

@keyframes heroSealHeartbeat {
  0%   { transform: rotate(9deg) scale(1); }
  14%  { transform: rotate(9deg) scale(1.10); }
  28%  { transform: rotate(9deg) scale(1); }
  42%  { transform: rotate(9deg) scale(1.08); }
  70%  { transform: rotate(9deg) scale(1); }
  100% { transform: rotate(9deg) scale(1); }
}

/* ---------- DOTS ---------- */

.hero-dots {
  width: 100%;
  padding: 1.2vw 0 1.1vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9vw;
  background-color: #F9F1D7;
}

.hero-dot {
  width: 1.3vw;
  height: 1.3vw;
  border: none;
  border-radius: 999px;
  background-color: #92402D;
  cursor: pointer;
  transition:
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease;
}

.hero-dot.is-active {
  width: 2.6vw;
  background-color: #EF381A;
  pointer-events: none;
  cursor: default;
}

.hero-dot:not(.is-active):hover {
  width: 2.6vw;
}

/* ---------- CTA ---------- */

.hero-cta-cardapio {
  align-self: flex-start;
  margin-top: 0.6vw;
  display: inline-flex;
  align-items: center;
  gap: 0.7vw;
  padding: 0.7vw 1.8vw;
  background: linear-gradient(180deg, #F9F0D5 0%, #F4E3AE 100%);
  color: #92402D;
  font-family: 'Yeah', sans-serif;
  font-size: 1.1vw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0.1vw solid #92402D;
  border-radius: 999px;
  box-shadow: 0 0.6vw 1.35vw -0.7vw rgba(146, 64, 45, 0.45);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s,
    color 0.4s,
    box-shadow 0.4s;
  position: relative;
  z-index: 2;
  width: fit-content;
}

.hero-cta-cardapio svg {
  width: 1.1vw;
  height: 1.1vw;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cta-cardapio:hover {
  background: #EF381A;
  color: #F9F0D5;
  border-color: #EF381A;
  transform: translateY(-0.15vw);
  box-shadow: 0 0.9vw 1.7vw -0.7vw rgba(239, 56, 26, 0.55);
}

.hero-cta-cardapio:hover svg {
  transform: translateX(0.3vw);
}

.hero-cta-cardapio--alt {
  position: absolute;
  left: 18%;
  bottom: 12%;
  z-index: 5;
  margin: 0;
}

@media (max-width: 768px) {

  .hero-cta-cardapio {
    align-self: center;
  }

}

@media (max-width: 768px) {

  .hero-cta-cardapio--alt {
    left: 50%;
    bottom: 6%;
    transform: translateX(-50%);
  }

}

/* ---------- SUBTITLE ---------- */

.hero-banner-sub {
  position: absolute;
  z-index: 5;
  left: 18%;
  bottom: 28%;
  width: 38%;
  font-family: 'Cnossus', 'Yeah', sans-serif;
  font-size: 2vw;
  line-height: 1;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 0.12vw 0.52vw rgba(0,0,0,0.55);
  pointer-events: none;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

  .hero-copy {
    top: auto;
    bottom: 6%;
    left: 4%;
    right: 4%;
    width: auto;
    text-align: center;
    align-items: center;
  }

  .hero-copy__title {
    font-size: 8vw;
    line-height: 1;
    gap: 0.3vw;
    margin-bottom: 2vw;
  }

  .hero-copy__sub {
    font-size: 4vw;
  }

  .hero-copy__feats {
    font-size: 3vw;
    gap: 1vw;
  }

  .hero-copy__feats li {
    padding-left: 8vw;
    min-height: 4vw;
  }

  .hero-copy__feats li::before {
    width: 5vw;
    height: 5vw;
  }

  .hero-copy__disclaimer,
  .hero-banner-sub,
  .hero-disclaimer,
  .hero-slide--layered img.hero-seal {
    display: none;
  }

  .hero-cta-cardapio {
    font-size: 4vw;
    padding: 2.8vw 6vw;
  }

  .hero-cta-cardapio svg {
    width: 4vw;
    height: 4vw;
  }

  .hero-dots {
    padding: 4vw 0 5vw;
    gap: 2vw;
  }

  .hero-dot {
    width: 4vw;
    height: 4vw;
  }

  .hero-dot.is-active,
  .hero-dot:not(.is-active):hover {
    width: 8vw;
  }
}