:root {
  --fundo: #f7eff4;
  --fundo-alt: #f0e6ed;
  --tinta: #401448;
  --tinta-suave: #806184;
  --acento: #581c61;
  --acento-2: #6a2475;
  --amarelo: #fcb90a;
  --creme: #f7eff4;
  --rodape: #401448;
  --linha: #ddd0dc;
  --display:
    "Luckiest Guy",
    "Figtree",
    system-ui,
    sans-serif;
  --texto:
    "Figtree",
    system-ui,
    sans-serif;
  --u: calc(min(100vw, 1920px) / 1920);
  --raio: 30px;
  --raio-foto: 15px;
  --raio-botao: 10px;
  --nav-h: 70px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 10px);
}
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 50px;
  background: var(--fundo);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.nav__lado {
  display: flex;
  align-items: center;
  gap: 50px;
}
.nav__lado--dir {
  justify-content: flex-end;
}
.nav__lado a:not(.botao):hover {
  color: var(--acento);
}
.nav__logo img {
  height: 58px;
  width: auto;
}
.botao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: var(--raio);
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  transition: transform .3s, background .3s;
}
.botao:hover {
  background: var(--tinta);
}
.nav__zap {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--acento);
  color: #fff;
}
.nav__abrir,
.nav__celular {
  display: none;
}
.hero {
  position: relative;
  margin-top: var(--nav-h);
  height: calc(700 * var(--u));
  min-height: 420px;
  border-radius: 0 0 var(--raio) var(--raio);
  overflow: hidden;
  background: var(--tinta);
}
.hero__videos {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__tinta {
  position: absolute;
  inset: 0;
  background: rgb(64 20 72 / .36);
}
.hero__palavra {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(220 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--creme);
  text-shadow: 0 4px 0 var(--tinta);
  padding: 0 4vw;
}
.troca {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
}
.troca__item {
  grid-area: 1 / 1;
  display: inline-block;
  white-space: nowrap;
}
.cardapio {
  padding: 50px 50px 0;
}
.cardapio__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.prato a {
  display: block;
  padding: 10px 0;
  text-align: center;
  position: relative;
}
.prato img {
  width: 100%;
  height: auto;
  aspect-ratio: 455 / 318.5;
  object-fit: contain;
  transition: transform .3s;
}
.prato h3,
.prato__ver {
  display: block;
  margin-top: 14px;
  font-family: var(--texto);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.4px;
  line-height: 22px;
  text-transform: uppercase;
  transition: opacity .3s;
}
.prato__ver {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  opacity: 0;
  color: var(--acento);
}
.prato a:hover img {
  transform: scale(1.04);
}
.prato a:hover h3 {
  opacity: 0;
}
.prato a:hover .prato__ver {
  opacity: 1;
}
.historia {
  position: relative;
  padding: calc(150 * var(--u)) 50px 50px;
}
.historia__topo {
  position: relative;
  min-height: calc(916 * var(--u));
}
.gigante {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.01em;
}
.gigante .linha {
  display: block;
}
.gigante--acento {
  position: relative;
  z-index: 2;
  color: var(--acento);
  font-size: calc(250 * var(--u));
  margin-left: -10px;
  width: calc(1278 * var(--u));
}
.historia__grande {
  position: absolute;
  z-index: 1;
  left: calc(769 * var(--u));
  top: calc(-23 * var(--u));
  width: calc(900 * var(--u));
}
.historia__grande img {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 939;
  object-fit: cover;
  border-radius: var(--raio-foto);
}
.pilula {
  position: absolute;
  left: 0;
  top: -40px;
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--raio);
  background: var(--acento);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
  text-transform: uppercase;
}
.historia__linha {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  margin-top: calc(-40 * var(--u));
}
.historia__foto {
  display: flex;
  justify-content: flex-end;
}
.historia__foto img {
  width: calc(350 * var(--u));
  height: auto;
  min-width: 220px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio-foto);
}
.historia__texto {
  margin-top: calc(180 * var(--u));
  max-width: 885px;
}
.historia__texto h2,
.fidelidade__texto h2 {
  font-family: var(--texto);
  font-size: clamp(30px, calc(45 * var(--u)), 45px);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.1;
  text-transform: uppercase;
}
.historia__texto p,
.fidelidade__texto p {
  margin-top: 20px;
  max-width: 720px;
  font-size: clamp(18px, calc(22 * var(--u)), 22px);
  font-weight: 500;
  letter-spacing: -.2px;
  line-height: 1.4;
}
.seta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}
.seta__bola {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  color: var(--acento);
  font-size: 14px;
  transition:
    transform .3s,
    background .3s,
    color .3s;
}
.seta:hover .seta__bola {
  background: var(--acento);
  color: #fff;
  transform: translateX(4px);
}
.seta--clara .seta__bola {
  color: var(--amarelo);
}
.seta--clara:hover .seta__bola {
  background: var(--amarelo);
  color: var(--tinta);
}
.cartoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 800px));
  justify-content: center;
  gap: 50px;
  padding: 20px 50px 100px;
}
.cartao {
  position: relative;
  overflow: hidden;
  aspect-ratio: 800 / 607;
  border-radius: var(--raio-foto);
  padding: calc(40 * var(--u)) calc(40 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cartao--active {
  background: var(--amarelo);
  color: var(--tinta);
}
.cartao--active .cartao__img {
  width: 66%;
  right: calc(-60 * var(--u));
}
.cartao--brazilian {
  background: var(--acento);
  color: var(--creme);
}
.cartao__titulo {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(112 * var(--u));
  line-height: .9;
}
.cartao__titulo .linha {
  display: block;
}
.cartao--brazilian .cartao__titulo {
  color: var(--amarelo);
}
.cartao__sub {
  position: relative;
  z-index: 2;
  font-size: clamp(16px, calc(26 * var(--u)), 26px);
  font-weight: 600;
  text-transform: uppercase;
}
.cartao__img {
  position: absolute;
  right: calc(-20 * var(--u));
  bottom: calc(-10 * var(--u));
  width: 58%;
  height: auto;
  z-index: 1;
  max-height: 96%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 18px 24px rgb(64 20 72 / .25));
}
.fidelidade {
  position: relative;
  overflow: hidden;
  background: var(--acento);
  color: var(--creme);
  border-radius: var(--raio) var(--raio) 0 0;
  margin-bottom: -100px;
  padding: calc(170 * var(--u)) 50px 200px;
}
.fidelidade__manchas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--acento-2);
  pointer-events: none;
}
.gigante--fidelidade {
  position: relative;
  z-index: 1;
  font-size: calc(230 * var(--u));
  color: var(--creme);
  margin-left: -10px;
}
.linha--amarela {
  color: var(--amarelo);
}
.fidelidade__linha {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  margin-top: calc(40 * var(--u));
}
.fidelidade__cartao img {
  width: 82%;
  max-width: 760px;
  height: auto;
  border-radius: var(--raio-foto);
  box-shadow: 0 30px 60px rgb(40 10 45 / .35);
}
.fidelidade__texto {
  padding-bottom: 50px;
}
.selo {
  display: inline-block;
  padding: 8px 10px;
  border-radius: var(--raio);
  background: var(--tinta);
  color: var(--creme);
  font-size: 13px;
  font-weight: 600;
  line-height: 13px;
  text-transform: uppercase;
}
.fidelidade__texto h2 {
  margin-top: 20px;
  max-width: 564px;
  color: var(--creme);
}
.fidelidade__apps {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}
.app {
  width: 160px;
  height: 48px;
  border-radius: var(--raio-botao);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 16px;
  background: var(--tinta);
  color: var(--creme);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.05;
  transition: transform .3s;
}
.app small {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--amarelo);
}
.app:hover {
  transform: scale(.95);
}
.rodape {
  position: relative;
  z-index: 3;
  background: var(--rodape);
  color: var(--creme);
  border-radius: var(--raio) var(--raio) 0 0;
  padding: 50px 50px 70px;
}
.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}
.rodape__rotulo {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--amarelo);
  letter-spacing: .04em;
}
.rodape__endereco {
  margin-top: 12px;
  font-size: clamp(18px, calc(22 * var(--u)), 22px);
  line-height: 1.4;
  font-weight: 600;
}
.rodape__perto {
  margin-top: 18px;
  font-size: 14px;
  opacity: .85;
}
.rodape__colunas {
  display: grid;
  grid-template-columns: 248px 310px 1fr;
  gap: 20px;
}
.rodape__links li {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 22.4px;
  text-transform: uppercase;
}
.rodape__links a:hover {
  color: var(--amarelo);
}
.rodape__links--horas {
  margin-top: 20px;
}
.pilula--clara {
  position: static;
  background: var(--creme);
  color: var(--tinta);
  padding: 11px 23px 10px;
  font-size: 15px;
  display: inline-block;
}
.rodape__ig {
  color: var(--creme);
  display: inline-block;
}
.rodape__social p {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
}
.rodape__social a:hover {
  color: var(--amarelo);
}
.rodape__nota {
  color: var(--amarelo);
}
.rodape__marca {
  margin-top: 80px;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(300 * var(--u));
  line-height: .8;
  white-space: nowrap;
  padding-bottom: calc(70 * var(--u));
  text-align: center;
  color: var(--creme);
}
.rodape__marca .amarelo {
  color: var(--amarelo);
}
@media (max-width: 1100px) {
  .nav__lado a:not(.botao):not(.nav__zap) {
    display: none;
  }
  .nav {
    grid-template-columns: auto 1fr auto;
    padding: 0 16px;
  }
  .nav__lado--esq {
    display: none;
  }
  .nav__logo {
    grid-column: 1;
    grid-row: 1;
  }
  .nav__lado--dir {
    grid-column: 3;
    grid-row: 1;
    gap: 12px;
  }
  .nav__abrir {
    display: inline-block;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-right: 12px;
    background: none;
    border: 1.5px solid var(--tinta);
    border-radius: var(--raio);
    padding: 8px 16px;
    font: 600 14px var(--texto);
    text-transform: uppercase;
    color: var(--tinta);
  }
  .nav__celular:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    padding: 12px 16px 20px;
    background: var(--fundo);
    border-bottom: 1px solid var(--linha);
  }
  .nav__celular a {
    padding: 10px 0;
    font-size: 18px;
    font-weight: 600;
  }
  .cardapio__grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .historia__linha,
  .fidelidade__linha,
  .rodape__grade {
    grid-template-columns: minmax(0, 1fr);
  }
  .rodape__colunas {
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }
  .rodape__social {
    grid-column: 1 / -1;
  }
}
@media (max-width: 767px) {
  :root {
    --nav-h: 64px;
  }
  .nav__logo img {
    height: 50px;
  }
  .botao--order {
    padding: 9px 16px;
    font-size: 14px;
  }
  .hero {
    height: 78svh;
    min-height: 480px;
  }
  .hero__videos {
    grid-template-columns: 1fr;
  }
  .hero__video--extra {
    display: none;
  }
  .hero__palavra {
    font-size: 15vw;
    line-height: .95;
  }
  .hero__palavra .troca__item {
    white-space: normal;
    max-width: 92vw;
  }
  .cardapio {
    padding: 30px 16px 0;
  }
  .prato h3,
  .prato__ver {
    font-size: 16px;
    line-height: 18px;
  }
  .historia {
    padding: 60px 16px 30px;
  }
  .historia__topo {
    min-height: 0;
  }
  .gigante--acento {
    font-size: 92px;
    width: auto;
    margin-left: 0;
  }
  .historia__grande {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-top: 50px;
  }
  .historia__linha {
    margin-top: 30px;
    gap: 24px;
  }
  .historia__foto {
    justify-content: flex-start;
  }
  .historia__foto img {
    width: 60%;
  }
  .historia__texto {
    margin-top: 0;
  }
  .cartoes {
    grid-template-columns: 1fr;
    padding: 10px 16px 60px;
    gap: 20px;
  }
  .cartao {
    padding: 24px;
  }
  .cartao__titulo {
    font-size: 54px;
  }
  .fidelidade {
    padding: 80px 16px 160px;
  }
  .gigante--fidelidade {
    font-size: 64px;
    margin-left: 0;
  }
  .fidelidade__linha {
    margin-top: 30px;
  }
  .fidelidade__cartao img {
    max-width: 420px;
    margin: 0 auto;
  }
  .fidelidade__texto {
    padding-top: 20px;
  }
  .app {
    width: calc(50% - 10px);
  }
  .rodape {
    padding: 40px 16px 24px;
  }
  .rodape__colunas {
    grid-template-columns: 1fr;
  }
  .rodape__marca {
    font-size: 18vw;
    margin-top: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}