:root {
  --cor-fundo:        #0f0f13;
  --cor-cartao:       #18191e;
  --cor-dourado:      #e7d16e;
  --cor-dourado-txt:  #c1aa6d;
  --cor-creme:        #fae68f;
  --cor-azul-escuro:  #0c1f33;
  --cor-branco:       #ffffff;
  --cor-lagos:        #57722a;
  --cor-jardins:      #7b217f;
  --cor-preco:        #181920;
  --fonte-titulo: "Bebas Neue", "Arial Narrow", sans-serif;
  --fonte-texto:  "Barlow", Arial, sans-serif;
  --fonte-data:   "Nunito Sans", Arial, sans-serif;
  /* 1u = 1px do layout original (1920px de largura): todo o desktop escala a partir daqui */
  --u: calc(100cqw / 1920);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

body {
  min-width: 300px;
  background: var(--cor-fundo);
  color: var(--cor-branco);
  font-family: var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
}

html {
  --sb-trilho: var(--cor-fundo);
  --sb-borda:  var(--cor-fundo);
  --sb-polegar: #6f6549;
  --sb-polegar-hover: #c1aa6d;
  scrollbar-gutter: stable;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--sb-trilho);
}
::-webkit-scrollbar-thumb {
  background: var(--sb-polegar);
  border: 3px solid var(--sb-borda);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sb-polegar-hover);
}
::-webkit-scrollbar-corner {
  background: var(--sb-trilho);
}

/* Firefox não suporta ::-webkit-scrollbar */
@supports (-moz-appearance: none) {
  html { scrollbar-color: #6f6549 var(--cor-fundo); scrollbar-width: thin; }
  .modal__corpo { scrollbar-color: #c8b989 #f1f3f5; }
}

.pagina {
  container-type: inline-size;
}

.hero {
  /* o topo nunca passa da altura da janela */
  --u: min(100cqw / 1920, 100svh / 1420);
  display: flex;
  justify-content: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: calc(var(--u) * 1250);
  background: var(--cor-fundo);
}

/* preenche as laterais quando a janela é mais larga que o palco */
.hero::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: url("../img/fundo-topo.jpg") center / cover no-repeat;
  filter: blur(28px) brightness(0.5);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 80);
  background: linear-gradient(to bottom, transparent, var(--cor-fundo));
  pointer-events: none;
}

.hero__palco {
  position: relative;
  flex: none;
  width: calc(var(--u) * 1920);
  height: 100%;
}

.hero__palco::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/fundo-topo.jpg") center / 100% 100% no-repeat;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, #000 92%, transparent);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, #000 92%, transparent);
          mask-composite: intersect;
}

.hero__selo {
  position: absolute;
  left:  calc(var(--u) * 220);
  top:   calc(var(--u) * -44);
  width: calc(var(--u) * 202);
}

.hero__data {
  position: absolute;
  left:  calc(var(--u) * 200);
  top:   calc(var(--u) * 365);
  width: calc(var(--u) * 240);
  text-align: center;
  font-family: var(--fonte-data);
  font-size: calc(var(--u) * 56);
  line-height: 1.04;
  text-transform: uppercase;
}
.hero__data strong { font-weight: 800; }

.hero__logo {
  position: absolute;
  left:  calc(var(--u) * 856);
  top:   calc(var(--u) * 100);
  width: calc(var(--u) * 209);
}

.hero__apresenta {
  position: absolute;
  left: 0;
  right: 0;
  top:  calc(var(--u) * 238);
  text-align: center;
  font-size: calc(var(--u) * 30);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hero__chamada {
  position: absolute;
  left: calc(var(--u) * 1030);
  top:  calc(var(--u) * 578);
  font-size: calc(var(--u) * 35);
  font-weight: 500;
  line-height: 1.22;
  text-transform: uppercase;
  color: var(--cor-creme);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hero__reveillon {
  position: absolute;
  left:  calc(var(--u) * 510);
  top:   calc(var(--u) * 768);
  width: calc(var(--u) * 900);
  max-width: none;
}

.hero__artista {
  position: absolute;
  left: 0;
  right: 0;
  top:  calc(var(--u) * 1060);
  text-align: center;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: calc(var(--u) * 106);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-text-stroke: calc(var(--u) * 2.5) #efd076;
  background: linear-gradient(to bottom, #fff7c4 10%, #f5dc7e 55%, #dcb85e 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

.oferta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 76);
  background:
    linear-gradient(to bottom, var(--cor-fundo), transparent calc(var(--u) * 120)) no-repeat,
    var(--cor-fundo) url("../img/fundo-baixo.jpg") center calc(var(--u) * -100) / 100% auto no-repeat;
}

.cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--u) * 1152);
  padding: calc(var(--u) * 62) 0 calc(var(--u) * 62);
  background: var(--cor-cartao);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--u) * 40);
}

.cartao__titulo {
  font-size: calc(var(--u) * 30);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pacotes {
  display: flex;
  gap: calc(var(--u) * 18);
  margin-top: calc(var(--u) * 48);
}

.pacote {
  display: flex;
  width: calc(var(--u) * 442);
  height: calc(var(--u) * 222);
  overflow: hidden;
  background: var(--cor-branco);
  color: var(--cor-preco);
  border-radius: calc(var(--u) * 19);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pacote:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.pacote:focus-visible {
  outline: 3px solid var(--cor-dourado);
  outline-offset: 4px;
}

.pacote__foto {
  width: calc(var(--u) * 192);
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.pacote__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: calc(var(--u) * 28);
}

.pacote__nome {
  margin-bottom: calc(var(--u) * 12);
  font-size: calc(var(--u) * 21);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pacote--lagos   .pacote__nome { color: var(--cor-lagos); }
.pacote--jardins .pacote__nome { color: var(--cor-jardins); }

.pacote__preco {
  font-size: calc(var(--u) * 41);
  font-weight: 300;
  line-height: 1.08;
}
.pacote__preco strong { font-weight: 700; }
.pacote__iss {
  margin-top: calc(var(--u) * 6);
  font-size: calc(var(--u) * 20);
  font-weight: 300;
}

.botao {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  calc(var(--u) * 380);
  height: calc(var(--u) * 60);
  margin-top: calc(var(--u) * 46);
  background: var(--cor-dourado);
  color: var(--cor-azul-escuro);
  border-radius: 999px;
  font-size: calc(var(--u) * 28);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.botao:hover {
  background: #f2dd7c;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(231, 209, 110, 0.35);
}

.botao:focus-visible,
.regulamento:focus-visible {
  outline: 3px solid var(--cor-branco);
  outline-offset: 4px;
}

.cartao__periodo {
  margin-top: calc(var(--u) * 46);
  font-size: calc(var(--u) * 28);
  text-transform: uppercase;
}

.aviso {
  margin-top: calc(var(--u) * 72);
  text-align: center;
  font-size: calc(var(--u) * 34);
  font-weight: 600;
  line-height: 1.27;
  color: var(--cor-dourado-txt);
}

.regulamento {
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  margin-top: calc(var(--u) * 82);
  color: var(--cor-branco);
  font-size: calc(var(--u) * 24);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.regulamento:hover { color: var(--cor-dourado); }

@media (min-width: 861px) {
  .regulamento {
    margin-top: calc(var(--u) * 62);
    padding: calc(var(--u) * 13) calc(var(--u) * 34);
    border: 1.5px solid rgba(193, 170, 109, 0.7);
    border-radius: 999px;
    font-size: calc(var(--u) * 21);
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .regulamento:hover {
    background: var(--cor-dourado-txt);
    border-color: var(--cor-dourado-txt);
    color: var(--cor-azul-escuro);
  }
}

.rodape {
  height: calc(var(--u) * 43);
  background: var(--cor-dourado-txt);
}

.modal {
  font-size: clamp(16px, 0.9vw, 64px);
  width: min(52em, calc(100% - 2em));
  max-height: calc(100dvh - 3em);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.5em;
  background: #fff;
  color: #2f3e4a;
  box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.6);
}

.modal[open] {
  display: flex;
  flex-direction: column;
  animation: modal-entrar 0.25s ease both;
}

.modal::backdrop {
  background: rgba(6, 6, 10, 0.78);
  backdrop-filter: blur(4px);
}

@keyframes modal-entrar {
  from { opacity: 0; transform: translateY(1em) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

body:has(.modal[open]) { overflow: hidden; }

.modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.5em 1em 2em;
  background: var(--cor-cartao);
  border-bottom: 3px solid var(--cor-dourado-txt);
  flex-shrink: 0;
}
.modal__titulo {
  font-family: var(--fonte-titulo);
  font-size: 2.4em;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cor-dourado);
}

.modal__fechar {
  font-size: 1em;
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.modal__fechar svg { width: 45%; height: 45%; }
.modal__fechar:hover { background: var(--cor-dourado); color: var(--cor-azul-escuro); transform: rotate(90deg); }
.modal__fechar:focus-visible { outline: 3px solid var(--cor-dourado); outline-offset: 3px; }

.modal__corpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5em 2em 2em;
  font-size: 1.06em;
  line-height: 1.6;
  --sb-trilho: #f1f3f5;
  --sb-borda:  #f1f3f5;
  --sb-polegar: #c8b989;
  --sb-polegar-hover: #b8973a;
}
.modal__corpo h3 {
  margin: 0.4em 0 0.7em;
  font-size: 1.2em;
  font-weight: 700;
  color: #1f2c36;
}
.modal__corpo h3:not(:first-child) { margin-top: 1.6em; }
.modal__corpo p { margin-bottom: 0.8em; }
.modal__corpo ul,
.modal__corpo ol { padding-left: 1.6em; }
.modal__corpo ul { list-style: disc; }
.modal__corpo ol { list-style: decimal; }
.modal__corpo li { margin-bottom: 0.6em; padding-left: 0.3em; }
.modal__corpo li::marker { color: #b8973a; font-weight: 700; }

@media (max-width: 600px) {
  .modal { width: calc(100% - 1.25em); max-height: calc(100dvh - 1.25em); border-radius: 1.1em; }
  .modal__topo { padding: 0.8em 1em 0.8em 1.25em; }
  .modal__titulo { font-size: 2em; }
  .modal__corpo { padding: 1.1em 1.25em 1.5em; font-size: 1em; }
}

@keyframes subir {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__logo,
.hero__apresenta,
.hero__chamada,
.hero__reveillon,
.hero__artista,
.cartao {
  animation: subir 0.9s ease both;
}
.hero__apresenta { animation-delay: 0.15s; }
.hero__chamada   { animation-delay: 0.3s; }
.hero__reveillon { animation-delay: 0.45s; }
.hero__artista   { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Celular e tablet: layout em coluna, medidas em px */
@media (max-width: 860px) {
  .hero {
    display: block;
    height: auto;
  }
  .hero::before,
  .hero::after { display: none; }
  .hero__palco::before { display: none; }

  .hero__palco {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 700px;
    padding: 28px 16px 20px;
    background-image:
      linear-gradient(to bottom, transparent 82%, var(--cor-fundo) 100%),
      url("../img/fundo-topo.jpg");
    background-size: 100% 100%, auto 100%;
    background-position: 0 0, 22% top;
  }

  .hero__logo,
  .hero__apresenta,
  .hero__chamada,
  .hero__reveillon,
  .hero__artista {
    position: static;
  }

  .hero__logo      { width: 118px; }
  .hero__apresenta { font-size: 13px; margin-top: 8px; }

  .hero__selo {
    left: 12px;
    top: -6px;
    width: 58px;
  }
  .hero__data {
    left: 4px;
    top: 100px;
    width: 76px;
    font-size: 17px;
  }

  .hero__chamada {
    order: 5;
    margin-top: 14px;
    text-align: center;
    font-size: 15px;
    line-height: 1.25;
  }
  .hero__chamada br { display: none; }

  .hero h1 {
    margin-top: auto;
    width: 100%;
    text-align: center;
  }
  .hero__reveillon {
    width: 96%;
    margin: 0 auto;
  }
  .hero__artista {
    display: block;
    margin-top: 2px;
    font-size: clamp(28px, 10.5vw, 56px);
    white-space: nowrap;
  }

  .oferta {
    padding: 8px 16px 40px;
    background-image:
      linear-gradient(to bottom, var(--cor-fundo), transparent 90px),
      url("../img/fundo-baixo.jpg");
    background-size: 100% 100%, cover;
    background-position: 0 0, center;
  }

  .cartao {
    width: 100%;
    max-width: 520px;
    padding: 34px 16px 34px;
    border-radius: 26px;
  }
  .cartao__titulo { font-size: 17px; }

  .pacotes {
    flex-direction: column;
    width: 100%;
    gap: 14px;
    margin-top: 24px;
  }
  .pacote {
    width: 100%;
    height: 124px;
    border-radius: 14px;
  }
  .pacote__foto  { width: 36%; }
  .pacote__texto { padding-left: 16px; min-width: 0; }
  .pacote__nome  { font-size: 13px; margin-bottom: 6px; white-space: normal; }
  .pacote__preco { font-size: 23px; }
  .pacote__iss { margin-top: 4px; font-size: 13px; }

  .botao {
    width: 100%;
    max-width: 340px;
    height: 56px;
    margin-top: 28px;
    padding: 0 12px;
    font-size: clamp(15px, 5vw, 20px);
    text-align: center;
  }
  .cartao__periodo {
    margin-top: 22px;
    font-size: 14px;
    text-align: center;
  }

  .aviso {
    margin-top: 36px;
    font-size: 18px;
    line-height: 1.3;
  }
  .aviso br { display: none; }

  .regulamento {
    margin-top: 32px;
    font-size: 15px;
  }

  .rodape { height: 20px; }
}