/* ==========================================================================
   Réveillon Tropical Chic — Grande Hotel da Barra
   Paleta e tipografia conforme manual de marca da Plus Comunicação.
   ========================================================================== */

@font-face {
  font-family: Metropolis;
  src: url(fonts/metropolis-400.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Metropolis;
  src: url(fonts/metropolis-600.woff2) format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url(fonts/cormorant-garamond.woff2) format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* cores oficiais do manual */
  --verde:     #585F2E;
  --bege:      #E9CCA8;
  --terracota: #A86421;
  --marrom:    #4C2F13;
  /* derivadas, para leitura e detalhe */
  --creme:     #FAF3E8;
  --dourado:   #C9973F;
  --verde-esc: #3E4420;
  /* tom médio do papel das folhagens: é a cor que sobra por baixo do véu onde
     a arte não chega, e faz a emenda desaparecer */
  --papel:     #F1DCBC;

  /* Variantes AA. As quatro cores oficiais do manual não chegam a 4.5:1 uma
     sobre a outra em texto pequeno — terracota sobre bege fica em 3,03:1.
     Estas variantes escurecem ou clareiam o mínimo necessário e valem só para
     texto; fundo de seção, filete e traço de ícone seguem a cor oficial. */
  --terracota-txt: #7A4512;  /* kicker sobre creme 7,09:1 · sobre bege 5,09:1 */
  --terracota-cta: #9A5B1E;  /* fundo de botão, texto creme     4,90:1        */
  --bege-txt:      #F2DEC4;  /* texto pequeno sobre verde       5,18:1        */

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  Metropolis, 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap: 1120px;
  --gut: 20px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill, .pill svg, .conds li, .conds svg,
  .feat:hover .pill, .feat:hover .pill svg,
  .conds li:hover, .conds li:hover svg,
  .btn--ghost, .btn--ghost:hover, .btn--link, .btn--link:hover {
    transition: none; transform: none;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--marrom);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--marrom); color: var(--creme);
  padding: 12px 18px; font-size: 15px;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 760px; }
.center { text-align: center; }

/* --------------------------------------------------------------- tipografia */

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.12; }

h2 {
  font-size: clamp(30px, 5.2vw, 50px);
  color: var(--verde);
  letter-spacing: .005em;
}
h2.on-dark, .sec--olive h2 { color: var(--creme); }

/* a Cormorant usa algarismos old-style por padrão: elegante em texto, ruim em data */
h3 { font-size: 21px; color: var(--verde); font-variant-numeric: lining-nums; }

.kicker {
  margin: 0 0 14px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terracota-txt);
}
.kicker--gold { color: var(--bege-txt); }
.kicker--light { color: var(--terracota-txt); text-shadow: 0 1px 10px rgba(250, 243, 232, .9); }

.lead { font-size: clamp(17px, 2vw, 19px); margin: 0; }

.rule {
  width: 84px; height: 1px; margin: 22px auto 26px;
  background: linear-gradient(90deg, transparent, var(--dourado), transparent);
}
.rule--left { margin-inline: 0; background: linear-gradient(90deg, var(--dourado), transparent); }

/* ------------------------------------------------------------------- botões */

.btn {
  --btn-bg: var(--terracota-cta);
  display: inline-block;
  background: var(--btn-bg);
  color: var(--creme);
  font: 600 14px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 34px;
  border-radius: 999px;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { --btn-bg: #7A4512; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 20px 44px; font-size: 15px; }
.btn--block { display: block; text-align: center; padding: 17px 20px; }

/* Oito CTAs apontam para o mesmo lugar. Se todos fossem sólidos, brigariam
   entre si e a página inteira viraria um botão. Sólido só nos três pontos de
   decisão (hero, hospedagem, fechamento) e na barra fixa; no meio do texto o
   convite é discreto. */

/* contorno claro — para o bloco verde */
.btn--ghost {
  background: none;
  color: var(--creme);
  border: 1px solid var(--bege);
  padding: 16px 36px;
  transition: background .28s ease, color .28s ease, transform .28s ease;
}
.btn--ghost:hover { background: var(--bege); color: var(--marrom); transform: translateY(-2px); }

/* filete — para o meio das seções claras */
.btn--link {
  background: none;
  color: var(--terracota-txt);
  padding: 0 0 7px;
  border-radius: 0;
  border-bottom: 1px solid var(--dourado);
  transition: color .28s ease, border-color .28s ease, transform .28s ease;
}
.btn--link:hover { color: var(--marrom); border-color: var(--marrom); transform: translateY(-2px); }
.center .btn--link, .conds + .btn--link { margin-top: 38px; }
.feats__more + .btn { margin-top: 28px; }
.split__txt .btn--link { margin-top: 30px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transition: none; transform: none; }
}

/* --------------------------------------------------------------- revelação */

/* O conteúdo nasce visível: quem esconde é o JS, adicionando .reveal. Se o
   script falhar ou o IntersectionObserver não existir, a página aparece
   inteira — nunca em branco. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
              transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------- hero */

.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__bg {
  position: absolute; inset: -8% 0;
  background: url(img/folhagem-h.webp) center/cover no-repeat;
  z-index: -2;
  will-change: transform;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* o véu existe para o texto ter contraste, não para apagar a folhagem:
     apertado no centro, some antes das bordas */
  background: radial-gradient(ellipse 58% 54% at 50% 46%, rgba(250, 243, 232, .78) 0%, rgba(250, 243, 232, .56) 45%, rgba(250, 243, 232, 0) 100%);
}
/* sem barra de menu, o hero abre a página e precisa do respiro no topo */
.hero__in { padding: clamp(54px, 8vw, 96px) var(--gut) clamp(44px, 7vw, 76px); text-align: center; }

.hero__mark { margin: 0 auto; }
.hero__mark img { width: clamp(190px, 30vw, 286px); height: auto; margin-inline: auto; }

.hero__tagline {
  font-family: var(--serif);
  font-size: clamp(21px, 3.4vw, 30px);
  font-style: italic;
  color: var(--verde);
  margin: 26px 0 0;
}
.hero__date {
  margin: 12px 0 0;
  font: 600 13px/1.4 var(--sans);
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--marrom);
}

/* ---------------------------------------------------------------- contagem */

.count {
  display: flex; justify-content: center; gap: clamp(10px, 3vw, 26px);
  margin: 30px 0 34px;
}
.count__u {
  min-width: 68px;
  padding: 12px 8px;
  border: 1px solid rgba(169, 100, 33, .3);
  border-radius: 999px;
  background: rgba(250, 243, 232, .6);
}
.count__n {
  display: block;
  font-family: var(--serif);
  font-size: clamp(26px, 4.6vw, 36px);
  line-height: 1;
  color: var(--terracota);
  font-variant-numeric: lining-nums tabular-nums;
}
.count__l {
  display: block; margin-top: 5px;
  font: 400 10px/1 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--marrom); opacity: .75;
}

.hero__micro {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--marrom); opacity: .8;
}

/* ------------------------------------------------------------------ seções */

.sec { padding: clamp(56px, 9vw, 104px) 0; }
.sec--cream { background: var(--creme); }
.sec--sand  { background: var(--bege); }
.sec--olive {
  color: var(--creme);
  /* a folhagem das outras seções sob véu verde. O véu é `--verde-esc`, não o
     verde oficial: sobre o papel claro da arte, 82% de #3E4420 compõem #5E5F3C
     — praticamente o #585F2E do manual —, enquanto 82% do verde oficial
     subiriam para #747548 e derrubariam o texto creme para 4,11:1 */
  background:
    linear-gradient(rgba(62, 68, 32, .82), rgba(62, 68, 32, .82)),
    url(img/folhagem-h.webp) center / cover no-repeat,
    var(--papel);
}
.sec--olive h3 { color: var(--creme); }
.sec--sand h2, .sec--sand h3 { color: var(--verde-esc); }

/* ------------------------------------------------- o que te espera (ícones) */

.feats {
  list-style: none; margin: 46px auto 0; padding: 0;
  max-width: 720px;
  display: grid; gap: 26px 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 420px) { .feats { grid-template-columns: 1fr; } }

.feat { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* a moldura em pílula ecoa o símbolo da marca */
.pill {
  display: grid; place-items: center;
  width: 74px; height: 104px;
  border: 1px solid var(--dourado);
  border-radius: 999px;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.pill svg { width: 40px; height: 40px; transition: transform .28s ease; }

.feat:hover .pill {
  transform: translateY(-5px);
  border-color: var(--bege);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
}
.feat:hover .pill svg { transform: scale(1.06); }
.pill svg, .conds svg, .dists svg {
  fill: none;
  stroke: var(--dourado);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feat h3 { max-width: 15ch; }

.feats__more {
  margin: 34px 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2.6vw, 24px);
  color: var(--bege-txt);
}

/* ------------------------------------------------------- a noite do 31 (split) */

.split {
  display: grid; gap: clamp(30px, 5vw, 60px);
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.split__img { margin: 0; }
.split__img img { border-radius: 4px; box-shadow: 0 18px 44px -26px rgba(76, 47, 19, .55); }

.ticks { list-style: none; margin: 4px 0 0; padding: 0; }
.ticks li {
  position: relative;
  padding: 13px 0 13px 30px;
  border-bottom: 1px solid rgba(169, 100, 33, .18);
  font-size: 18px;
}
.ticks li:first-child { border-top: 1px solid rgba(169, 100, 33, .18); }
.ticks li::before {
  content: ''; position: absolute; left: 4px; top: 21px;
  width: 9px; height: 9px; border-radius: 999px;
  border: 1px solid var(--dourado);
}
.note { margin: 22px 0 0; font-size: 14px; opacity: .78; }

/* ----------------------------------------------------------- hospedagem */

.conds {
  list-style: none; margin: 46px 0 46px; padding: 0;
  display: grid; gap: 34px 26px;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
@media (max-width: 860px) { .conds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .conds { grid-template-columns: 1fr; } }

.conds li { transition: transform .28s ease; }
.conds svg { width: 42px; height: 42px; margin: 0 auto 16px; transition: transform .28s ease; }
.conds li:hover { transform: translateY(-3px); }
.conds li:hover svg { transform: scale(1.06); }
.conds h3 { margin-bottom: 6px; }
.conds p { margin: 0; font-size: 15px; opacity: .8; }

/* --------------------------------------------------------------- o hotel */

.hotel__logo { width: 168px; height: auto; margin: 0 auto 26px; }

.dists {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px;
  font-size: 15px;
}
.dists li { display: flex; align-items: center; gap: 8px; }
.dists svg { width: 20px; height: 20px; flex: none; }
.dists b { font-weight: 600; color: var(--terracota-txt); }

/* -------------------------------------------------------------- cta final */

.final { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.final__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url(img/folhagem-h.webp) center/cover no-repeat;
}
.final::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* sem o véu verde: a folhagem aparece na cor dela. O creme só abre um claro
     no miolo para o texto marrom manter AA, e some antes das bordas — mesmo
     tratamento do hero, para a página fechar como abriu */
  background: radial-gradient(ellipse 62% 62% at 50% 50%, rgba(250, 243, 232, .82) 0%, rgba(250, 243, 232, .6) 48%, rgba(250, 243, 232, 0) 100%);
}
.final__in { padding: clamp(60px, 9vw, 108px) var(--gut); }
.final__mark { width: 62px; height: auto; margin: 0 auto 26px; }
.final h2 { color: var(--marrom); margin-bottom: 30px; }
.final__micro { margin: 18px 0 0; font-size: 14px; color: var(--marrom); opacity: .8; }

/* ----------------------------------------------------------------- rodapé */

.foot { background: var(--marrom); color: var(--bege); padding: 52px 0 calc(52px + env(safe-area-inset-bottom)); }
.foot__in { text-align: center; }
.foot__logo { display: block; width: 120px; height: auto; margin: 0 auto 26px; }
.foot__addr { font-style: normal; font-size: 15px; line-height: 1.9; }
.foot__addr a { color: var(--bege); text-decoration-color: rgba(233, 204, 168, .4); text-underline-offset: 3px; }
.foot__addr a:hover { color: #fff; }
/* .6 derrubava esta linha para 3,92:1 — abaixo de AA mesmo sendo texto legal */
.foot__legal { margin: 26px 0 0; font-size: 12px; opacity: .78; }

/* ------------------------------------------------------- barra fixa mobile */

.bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 243, 232, .96);
  border-top: 1px solid rgba(169, 100, 33, .2);
  backdrop-filter: blur(6px);
  transform: translateY(110%);
  transition: transform .26s ease;
}
.bookbar.is-on { transform: translateY(0); }
@media (min-width: 721px) { .bookbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .bookbar { transition: none; } }

/* no mobile o rodapé ganha folga para a barra fixa não cobrir o conteúdo */
@media (max-width: 720px) { .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom)); } }

/* ---------------------------------------------------------------- cookies */

.cookies {
  position: fixed; z-index: 45; left: 12px; right: 12px; bottom: 12px;
  max-width: 460px; margin-inline: auto;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  background: var(--marrom); color: var(--bege);
  border-radius: 10px;
  box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .5);
  font-size: 13px; line-height: 1.5;
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0; }
.cookies button {
  flex: none;
  background: var(--bege); color: var(--marrom);
  border: 0; border-radius: 999px;
  padding: 9px 18px;
  font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
}
@media (max-width: 720px) { .cookies { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* --------------------------------------------------------------- folhagem */
/* em telas estreitas o fundo horizontal cortaria demais: usamos o vertical */
@media (max-width: 720px) {
  .hero__bg, .final__bg { background-image: url(img/folhagem-v.webp); }
  .sec--olive {
    background-image:
      linear-gradient(rgba(62, 68, 32, .82), rgba(62, 68, 32, .82)),
      url(img/folhagem-v.webp);
  }
  /* a seção final é baixa: no celular o `cover` deixa as folhas escuras caírem
     em cima do texto. Aproximar 20% joga a moldura para fora da área de
     leitura e permite manter o véu leve, com a folhagem ainda colorida */
  .final__bg { transform: scale(1.2); }
  .final::after {
    background:
      radial-gradient(ellipse 45% 43% at 50% 50%, rgba(250, 243, 232, .84) 0%, rgba(250, 243, 232, .66) 50%, rgba(250, 243, 232, 0) 100%),
      rgba(250, 243, 232, .38);
  }
}