:root{
  --verde: #063216;
  --verde-escuro: #031f0e;
  --ouro: #ffb452;
  --ouro-escuro: #b57b32;
  --creme: #f6ebd9;
  --claro: #f1f0ec;
  --branco: #fffdf9;

  --grad-ouro: linear-gradient(155deg, #b57b32 8.57%, #f2c46f 48.34%, #ffb452 91.43%);
  --grad-ouro-texto: linear-gradient(180deg, #ffe3a3 0%, #f2c46f 40%, #c98f3c 100%);

  --font-titulo: 'Playfair Display', serif;
  --font-texto: 'termina', 'Montserrat', sans-serif;
}

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

html{
  scroll-behavior: smooth;
}

html, body{
  margin: 0;
  padding: 0;
}

body{
  font-family: var(--font-texto);
  font-weight: 300;
  color: var(--creme);
  background: var(--verde-escuro);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, p, ul{
  margin: 0;
}

ul{
  padding: 0;
  list-style: none;
}

a{
  color: inherit;
  text-decoration: none;
}

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

.page{
  container-type: inline-size;
  max-width: 1920px;
  margin: 0 auto;
  --u: min(1px, 100cqw / 1920);
}




/* ================= FUNDOS ================= */

.secao{
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Verde com arcos dourados finos */
.secao--verde{
  color: var(--creme);
  background:
    url('../img/linhas-ouro.svg') center / cover no-repeat,
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(15,82,40,.55), rgba(15,82,40,0)),
    var(--verde-escuro);
}

/* Claro com formas suaves */
.secao--claro{
  color: var(--verde);
  background:
    url('../img/formas-claro.svg') center / cover no-repeat,
    var(--claro);
}




/* ================= ARCO (foto com topo arredondado) ================= */

.arco{
  overflow: hidden;
  border: calc(2 * var(--u)) solid var(--ouro-escuro);
  border-radius: 999px 999px 0 0;
  background: var(--verde-escuro);
}

.arco img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/* ================= TIPOGRAFIA E BOTÕES ================= */

.titulo{
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: calc(58 * var(--u));
  line-height: 1.2;
}

.titulo--ouro{
  background: var(--grad-ouro-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.titulo--verde{
  color: var(--verde);
}

.sobretitulo{
  margin-bottom: calc(16 * var(--u));
  font-size: max(9px, calc(11 * var(--u)));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ouro-escuro);
}

.secao--verde .sobretitulo{
  color: var(--ouro);
}

.botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(50 * var(--u));
  padding: calc(8 * var(--u)) calc(32 * var(--u));
  border-radius: 999px;
  font-size: max(10px, calc(11 * var(--u)));
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: transform .2s ease, filter .2s ease, background-color .2s ease;
}

.botao:hover{
  transform: translateY(-2px);
}

.botao--ouro{
  color: var(--verde);
  background: var(--grad-ouro);
  filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(181,123,50,.28));
}

.botao--ouro:hover{
  filter: drop-shadow(0 calc(10 * var(--u)) calc(14 * var(--u)) rgba(181,123,50,.28)) brightness(1.06);
}

.botao--contorno{
  color: var(--ouro);
  background: rgba(3,31,14,.3);
  border: calc(1.5 * var(--u)) solid var(--ouro);
}

.botao--contorno:hover{
  background: rgba(255,180,82,.12);
}

/* Logo WAM em dourado (o arquivo é branco; a máscara aplica o degradê) */
.logo-ouro{
  display: block;
  aspect-ratio: 578 / 91;
  background: var(--grad-ouro);
  -webkit-mask: url('../img/logo-wam-experience.webp') center / contain no-repeat;
  mask: url('../img/logo-wam-experience.webp') center / contain no-repeat;
}




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

.hero{
  height: calc(1080 * var(--u));
}

.hero__barra{
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(105 * var(--u));
  background: var(--verde-escuro);
  border-bottom: 1px solid rgba(255,180,82,.18);
}

.hero__logo{
  width: calc(240 * var(--u));
  height: auto;
}

.hero__arco{
  position: absolute;
  z-index: 2;
  top: calc(320 * var(--u));
  width: calc(460 * var(--u));
  height: calc(605 * var(--u));
  box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.35);
}

.hero__arco--esq{ left: calc(-24 * var(--u)); }
.hero__arco--dir{ right: calc(-24 * var(--u)); }

.hero__conteudo{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(160 * var(--u));
}

/* Título "Réveillon 2027" montado em texto */
.selo-reveillon{
  margin: 0;
  line-height: 0;
}

.selo-reveillon__img{
  width: calc(680 * var(--u));
  height: auto;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.35));
}








.hero__chamada{
  margin-top: calc(56 * var(--u));
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: calc(44 * var(--u));
  line-height: 1.3;
  color: #f6d48d;
}

.hero__texto{
  max-width: calc(620 * var(--u));
  margin-top: calc(28 * var(--u));
  font-size: max(12px, calc(15 * var(--u)));
  line-height: 1.7;
}

.hero__botoes{
  display: flex;
  gap: calc(22 * var(--u));
  margin-top: calc(44 * var(--u));
}




/* ================= SEU NOVO ANO ================= */

.novo-ano{
  padding: calc(150 * var(--u)) 0 calc(170 * var(--u));
}

.novo-ano__texto{
  position: relative;
  z-index: 2;
  max-width: calc(820 * var(--u));
  margin: 0 auto;
}

.novo-ano__paragrafo{
  margin-top: calc(34 * var(--u));
  font-size: max(12px, calc(15 * var(--u)));
  font-weight: 400;
  line-height: 1.8;
  color: #2c3b31;
}

.novo-ano__selos{
  position: absolute;
  z-index: 2;
  left: calc(1370 * var(--u));
  top: calc(60 * var(--u));
  width: calc(400 * var(--u));
  height: calc(360 * var(--u));
}

.novo-ano__selos .lacre--pix{ left: calc(40 * var(--u)); top: 0; }
.novo-ano__selos .lacre--juros{ left: calc(210 * var(--u)); top: calc(150 * var(--u)); }

.novo-ano__brilho{
  position: absolute;
  left: calc(80 * var(--u));
  top: calc(230 * var(--u));
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
}

/* Lacre de cera verde com texto dourado */
.lacre{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(170 * var(--u));
  height: calc(160 * var(--u));
  border-radius: 52% 48% 50% 50% / 50% 54% 46% 50%;
  background: radial-gradient(circle at 35% 30%, #1d5a2f 0%, #0a3317 45%, #04200c 100%);
  box-shadow:
    inset 0 0 0 calc(10 * var(--u)) rgba(0,0,0,.18),
    inset calc(-6 * var(--u)) calc(-8 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.35),
    0 calc(10 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.28);
  color: var(--ouro);
  font-size: max(10px, calc(22 * var(--u)));
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

.lacre::before{
  content: '';
  position: absolute;
  inset: calc(24 * var(--u));
  border: calc(2 * var(--u)) solid rgba(255,180,82,.7);
  border-radius: 50%;
}

.lacre strong{
  font-size: max(16px, calc(38 * var(--u)));
  font-weight: 700;
}

.lacre small{
  margin-top: calc(4 * var(--u));
  font-size: max(8px, calc(12 * var(--u)));
  font-weight: 600;
  letter-spacing: .08em;
}

.lacre--juros{
  transform: rotate(6deg);
}




/* ================= MOMENTOS DA VIRADA ================= */

.momentos{
  padding: calc(120 * var(--u)) 0 calc(150 * var(--u));
}

.momentos__grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, calc(690 * var(--u)));
  justify-content: center;
  gap: calc(60 * var(--u));
  margin-top: calc(70 * var(--u));
}

.momento{
  display: flex;
  flex-direction: column;
  background: rgba(3,31,14,.72);
  border: calc(1.5 * var(--u)) solid rgba(255,180,82,.75);
  box-shadow: 0 calc(24 * var(--u)) calc(45 * var(--u)) rgba(0,0,0,.22);
}

.momento__foto{
  width: 100%;
  height: calc(330 * var(--u));
  object-fit: cover;
}

.momento__corpo{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(48 * var(--u)) calc(48 * var(--u)) calc(70 * var(--u));
}

.momento__corpo .sobretitulo{
  margin-bottom: 0;
}

.momento__titulo{
  margin-top: calc(14 * var(--u));
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: calc(32 * var(--u));
  line-height: 1.25;
  color: #f6d48d;
}

.momento__texto{
  max-width: calc(470 * var(--u));
  margin-top: calc(22 * var(--u));
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.7;
}




/* ================= DESTINOS ================= */

.destinos{
  padding: calc(120 * var(--u)) 0 calc(130 * var(--u));
}

.destinos__intro{
  max-width: calc(560 * var(--u));
  margin: calc(24 * var(--u)) auto 0;
  font-size: max(12px, calc(15 * var(--u)));
  font-weight: 400;
  line-height: 1.7;
  color: #2c3b31;
}

.grupo{
  position: relative;
  z-index: 2;
  margin-top: calc(90 * var(--u));
}

.grupo--caldas{
  margin-top: calc(110 * var(--u));
}

.grupo__titulo{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grupo__titulo img{
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.grupo__titulo h3{
  margin-top: calc(18 * var(--u));
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: calc(34 * var(--u));
  line-height: 1.3;
  color: var(--verde);
}

.grupo__titulo p{
  margin-top: calc(8 * var(--u));
  font-size: max(9px, calc(11 * var(--u)));
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ouro-escuro);
}

.hoteis{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: calc(44 * var(--u)) auto 0;
}

.hoteis--litoral{
  gap: calc(26 * var(--u));
}

.hoteis--caldas{
  max-width: calc(1800 * var(--u));
  gap: calc(40 * var(--u)) calc(22 * var(--u));
}




/* ================= CARD DE HOTEL ================= */

.hotel{
  --pad: calc(28 * var(--u));
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(426 * var(--u));
  overflow: hidden;
  text-align: left;
  background: var(--branco);
  border: calc(2 * var(--u)) solid #d8b77f;
  box-shadow: 0 calc(18 * var(--u)) calc(38 * var(--u)) rgba(70,50,20,.16);
}

.hotel--litoral{
  width: calc(465 * var(--u));
}

.hotel__foto{
  position: relative;
  flex: none;
  height: calc(260 * var(--u));
}

.hotel__foto > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotel__local{
  position: absolute;
  right: calc(14 * var(--u));
  bottom: calc(13 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--u));
  padding: calc(8 * var(--u)) calc(13 * var(--u));
  border-radius: 999px;
  background: var(--grad-ouro);
  color: var(--verde);
  font-size: max(9px, calc(10 * var(--u)));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hotel__local img{
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
}

.hotel__corpo{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(28 * var(--u)) var(--pad) calc(32 * var(--u));
  color: var(--verde);
}

.hotel__nome{
  min-height: 2.4em;
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: calc(29 * var(--u));
  line-height: 1.2;
  background: linear-gradient(180deg, #e0a64c 0%, #b57b32 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hotel--litoral .hotel__nome{
  min-height: 0;
}

.hotel__nome::after{
  content: '';
  display: block;
  height: 1px;
  margin-top: calc(22 * var(--u));
  background: linear-gradient(90deg, rgba(216,183,127,.3), #d8b77f 50%, rgba(216,183,127,.3));
}

.hotel__lista{
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  margin: calc(20 * var(--u)) 0 calc(28 * var(--u));
  font-size: max(10px, calc(11 * var(--u)));
  font-weight: 400;
  line-height: 1.7;
}

.hotel__lista li{
  position: relative;
  padding-left: calc(36 * var(--u));
}

.hotel__lista img{
  position: absolute;
  left: 0;
  top: 0;
  width: calc(22 * var(--u));
  height: calc(20 * var(--u));
  object-fit: contain;
}

.hotel__botoes{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(10 * var(--u));
  margin-top: auto;
}

.botao--card{
  min-height: calc(44 * var(--u));
  padding: calc(6 * var(--u)) calc(15 * var(--u));
  font-size: max(9px, calc(10 * var(--u)));
  font-weight: 500;
  color: var(--verde);
  border: calc(1.5 * var(--u)) solid var(--verde);
}

.botao--card:hover{
  background: rgba(6,50,22,.06);
}

.botao--card.botao--ouro{
  border-color: transparent;
}

/* Hotel lotado: no lugar do "Reserve já" */
.botao--esgotado{
  color: #8a6a2c;
  background: #f4ecdc;
  border-style: dashed;
  border-color: #c9a35a;
  cursor: default;
}

.botao--esgotado:hover{
  transform: none;
  background: #f4ecdc;
}




/* ================= BENEFÍCIOS ================= */

.beneficios{
  padding: calc(120 * var(--u)) 0 calc(150 * var(--u));
}

.beneficios__lista{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, calc(300 * var(--u)));
  justify-content: center;
  margin-top: calc(90 * var(--u));
}

.beneficio{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(10 * var(--u)) calc(40 * var(--u)) calc(20 * var(--u));
}

.beneficio + .beneficio{
  border-left: calc(1.5 * var(--u)) solid rgba(255,180,82,.4);
}

.beneficio__icone{
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--ouro);
  border-radius: 50%;
  background: rgba(3,31,14,.5);
}

.beneficio__icone img{
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}

.beneficio p{
  max-width: calc(210 * var(--u));
  margin-top: calc(30 * var(--u));
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.6;
}




/* ================= CADA DESTINO ================= */

.jeitos{
  padding: calc(120 * var(--u)) 0 calc(150 * var(--u));
}

.jeitos__grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, calc(470 * var(--u)));
  justify-content: center;
  gap: calc(40 * var(--u));
  margin-top: calc(64 * var(--u));
}

.jeito{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.jeito__arco{
  width: 100%;
  height: calc(330 * var(--u));
  border-color: #d8b77f;
}

.jeito__caixa{
  position: relative;
  width: calc(430 * var(--u));
  min-height: calc(150 * var(--u));
  margin-top: calc(-50 * var(--u));
  padding: calc(30 * var(--u)) calc(34 * var(--u));
  background: var(--branco);
  border: calc(1.5 * var(--u)) solid #e3caa0;
  box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(70,50,20,.12);
}

.jeito__titulo{
  font-family: var(--font-titulo);
  font-style: italic;
  font-weight: 600;
  font-size: calc(30 * var(--u));
  line-height: 1.2;
  background: linear-gradient(180deg, #e0a64c 0%, #b57b32 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.jeito__caixa p{
  margin-top: calc(14 * var(--u));
  font-size: max(11px, calc(13 * var(--u)));
  font-weight: 400;
  line-height: 1.65;
  color: #2c3b31;
}




/* ================= PERGUNTAS FREQUENTES ================= */

.faq{
  padding: calc(120 * var(--u)) 0 calc(150 * var(--u));
}

.faq__lista{
  position: relative;
  z-index: 2;
  max-width: calc(1180 * var(--u));
  margin: calc(70 * var(--u)) auto 0;
  text-align: left;
  border-top: 1px solid rgba(255,180,82,.5);
}

.faq__item{
  border-bottom: 1px solid rgba(255,180,82,.5);
}

.faq__item summary{
  position: relative;
  padding: calc(26 * var(--u)) calc(50 * var(--u)) calc(26 * var(--u)) 0;
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 400;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}

.faq__item summary::-webkit-details-marker{
  display: none;
}

.faq__item summary:hover{
  color: var(--ouro);
}

/* Sinal de + / – */
.faq__item summary::before,
.faq__item summary::after{
  content: '';
  position: absolute;
  right: calc(6 * var(--u));
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--ouro);
  transition: transform .2s ease;
}

.faq__item summary::after{
  transform: rotate(90deg);
}

.faq__item[open] summary::after{
  transform: rotate(0deg);
}

.faq__item p{
  max-width: calc(900 * var(--u));
  padding-bottom: calc(28 * var(--u));
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.7;
  color: rgba(246,235,217,.8);
}

.faq__item p a{
  color: var(--ouro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq__item p a:hover{
  color: #fff;
}




/* ================= RODAPÉ ================= */

.rodape{
  position: relative;
  padding: calc(80 * var(--u)) 0 calc(60 * var(--u));
  border-top: calc(3 * var(--u)) solid var(--ouro-escuro);
  color: var(--verde);
  text-align: center;
}

.rodape__logo{
  width: calc(260 * var(--u));
  margin: 0 auto;
}

.rodape__contatos{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(28 * var(--u));
  margin-top: calc(40 * var(--u));
  font-size: max(11px, calc(14 * var(--u)));
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .09em;
}

.rodape__contatos a:hover{
  color: var(--ouro-escuro);
}

.rodape__divisor{
  width: 1px;
  height: calc(20 * var(--u));
  background: rgba(181,123,50,.5);
}

.rodape__aviso{
  max-width: calc(1600 * var(--u));
  margin: calc(40 * var(--u)) auto 0;
  padding-top: calc(25 * var(--u));
  border-top: 1px solid rgba(181,123,50,.25);
  font-size: max(9px, calc(11 * var(--u)));
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .05em;
  color: rgba(6,50,22,.7);
}