/* =========================================
   SAL DRINKS — Landing Page
   Reset básico + variáveis globais
   As regras de cada seção serão adicionadas
   conforme construímos seção por seção.
   ========================================= */

:root {
  --var-color-1: #a8b2a1;
  --var-color-2: #7a6a5b;
  --var-color-3: #e7d8ca;
  --var-color-4: #fcfaf7;
  --var-color-5: #f5f1ea;

  --var-font-h: 'Instrument Serif', serif;
  --var-font-p: 'Montserrat', sans-serif;
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--var-color-4);
  min-height: 100%;
}

body {
  font-family: var(--var-font-p);
  background-color: var(--var-color-4);
  color: var(--var-color-2);
  line-height: 1.5;
  min-height: 100vh;
  padding-top: 8px;
}

.content {
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 900px) {
  .content {
    max-width: 1200px;
  }
}

.section {
  margin-bottom: 60px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--var-font-h);
  color: var(--var-color-1);
  text-align: left;
}

h1 {
  font-size: 4em;
  line-height: 1em;
}

h2 {
  font-size: 3em;
  line-height: 1em;
}

h3 {
  font-size: 2.2em;
  line-height: 1em;
}

h3 {
  font-size: 1.8em;
  line-height: 1em;
}

h4 {
  font-size: 1.2em;
  line-height: 1em;
}

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

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

/* ===== SEÇÕES ===== */
/* Cada seção adicionará seu próprio bloco de estilos aqui abaixo */

/* ----- SLIDETOP: Carrossel de imagens ----- */
.slidetop {
  --slidetop-visible: 4.2; /* quantidade de fotos visíveis (mobile) */
  --slidetop-gap: 8px;
  --slidetop-ratio: 2 / 3; /* retrato */

  container-type: inline-size; /* permite medir a largura do próprio .slidetop (não a da viewport) */
  width: 100%;
  overflow: hidden;
}

.slidetop__track {
  display: flex;
  gap: var(--slidetop-gap);
  width: max-content;
  animation: slidetop-loop 40s linear infinite;
}

.slidetop__item {
  flex: 0 0 calc((100cqw - (var(--slidetop-visible) - 1) * var(--slidetop-gap)) / var(--slidetop-visible));
  aspect-ratio: var(--slidetop-ratio);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--var-color-2);
}

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

@keyframes slidetop-loop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 900px) {
  .slidetop {
    --slidetop-visible: 7.2; /* quantidade de fotos visíveis (desktop) */
  }
}

/* ----- DRINK: parallax de camadas durante o scroll -----
   Camadas (do fundo para a frente):
   1. folhas — atrás do copo, movimento suave, sobe/desce conforme a direção da rolagem
   2. copo   — base do drink, fixo, sem movimento
   3. gelo   — cai em direção ao copo conforme o scroll avança, encontra sua parte superior (rim)
   4. limão  — cai em direção ao copo conforme o scroll avança, velocidade diferente do gelo
   5. logo   — topo, presa no topo da seção, sem movimento

   Diferente de um parallax comum (que oscila conforme a seção entra/sai da
   tela), gelo e limão têm um movimento DIRECIONAL amarrado ao progresso do
   scroll dentro da seção: começam deslocados (mais afastados, "flutuando"
   acima) e vão se aproximando até se encontrarem exatamente com o topo do
   copo — dando a sensação de um drink recebendo os ingredientes e o gelo
   enquanto a página rola. Folhas continua com o parallax tradicional
   (reversível, pra cima ou pra baixo conforme a direção da rolagem).

   Todas as camadas do drink compartilham a mesma largura (--drink-w).
   O copo define a altura de referência (--drink-copo-h); gelo e limão ficam
   posicionados logo acima dele (com uma pequena sobreposição, --drink-overlap),
   então o ponto final do movimento já é o encontro com o topo do copo.

   Cada camada com movimento usa data-speed e data-amplitude (lidos pelo
   sal.js), que aplica suavização (lerp) para um deslocamento fluido e
   cinematográfico — sem saltos abruptos ao rolar a página. A imagem de
   cada camada em movimento é renderizada mais alta que sua "janela"
   visível exatamente pela amplitude (pra cima e pra baixo) e centralizada,
   então o movimento nunca revela borda vazia. Ao criar as artes reais,
   mantenha essa folga extra de altura (folhas +24px, gelo +90px,
   limão +130px) além da arte "de repouso".
   ------------------------------------------------- */
.drink {
  --drink-w: min(100%, 500px); /* largura compartilhada por copo/folhas/gelo/limão */
  --drink-copo-h: calc(var(--drink-w) * 4 / 3); /* altura de referência do copo */
  --drink-overlap: 260px; /* sobreposição de gelo/limão sobre o topo do copo */
  --drink-amp-folhas: 204px;
  --drink-amp-gelo: 600px;
  --drink-amp-limao: 20000px;

  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
}

.drink__stage {
  position: absolute;
  inset: 0;
}

/* Base das camadas do drink — mesma largura, entrada cinematográfica */
.drink__layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(24px);
  width: var(--drink-w);
  overflow: hidden; /* corta a folga extra usada pelo parallax */
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 0.9s cubic-bezier(0.16, 0.84, 0.44, 1);
}
.drink--in-view .drink__layer {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.drink__layer img {
  width: 100%;
  display: block;
}

/* Copo — fundo do drink, sem movimento, define a altura de referência */
.drink__layer--copo {
  z-index: 3;
  height: var(--drink-copo-h);
  transition-delay: 0.15s;
}
.drink__layer--copo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Folhas — atrás do copo, ocupa a mesma área, movimento suave e reversível */
.drink__layer--folhas {
  z-index: 1;
  height: var(--drink-copo-h);
  transition-delay: 0s;
}
.drink__layer--folhas img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: calc(100% + (var(--drink-amp-folhas) * 2));
  transform: translateY(-50%);
  object-fit: contain;
}

/* Gelo — desce em direção ao copo conforme o scroll avança, até encontrar o topo dele */
.drink__layer--gelo {
  z-index: 4;
  bottom: calc(var(--drink-copo-h) - var(--drink-overlap));
  aspect-ratio: 1 / 1;
  transition-delay: 0.3s;
}
.drink__layer--gelo img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  /* height: calc(100% + (var(--drink-amp-gelo) * 2)); */
  transform: translateY(-50%);
  object-fit: contain;
}

/* Limão — desce em direção ao copo conforme o scroll avança, em outra velocidade */
.drink__layer--limao {
  z-index: 5;
  bottom: calc(var(--drink-copo-h) - var(--drink-overlap));
  aspect-ratio: 1 / 1;
  transition-delay: 0.45s;
}
.drink__layer--limao img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  /* height: calc(100% + (var(--drink-amp-limao) * 2)); */
  transform: translateY(-50%);
  object-fit: contain;
}

/* Logo — camada superior, presa no topo, sem movimento */
.drink__layer--logo {
  position: absolute;
  top: 24px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) translateY(24px);
  z-index: 6;
  width: 70%;
  aspect-ratio: 1 / 1;
  opacity: 0;
  transition-delay: 0.6s;
}
.drink--in-view .drink__layer--logo {
  transform: translateX(-50%) translateY(0);
}
.drink__layer--logo img {
  width: 100%;
  object-fit: cover;
}
@media (min-width: 900px) {
  .drink__layer--logo {
    width: 380px;
  }
}

/* ----- MARCA: título "OpenBar." ajustado à largura -----
   O tamanho da fonte é calculado via sal.js (não em CSS) para que o
   texto ocupe exatamente a largura disponível (100% menos 16px de
   cada lado), aumentando as letras mas mantendo a proporção natural
   da fonte (sem distorcer com scaleX) — ver initFitText() no sal.js.
   ------------------------------------------------- */
.marca {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  text-align: center;
  margin: -60px 0 0 0 !important;
}

.marca__inner {
  width: 100%;
}

.marca__text {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--var-font-h);
  color: var(--var-color-1);
  line-height: 1;
  font-size: 18vw; /* valor inicial, antes do sal.js calcular o encaixe exato */
}

/* ----- CARTA DE DRINKS: título + slide horizontal de colunas -----
   Mobile: slide parado (sem autoplay), arrastável, com scroll-snap.
   Cada coluna ocupa 90% da largura, com 16px de margem entre elas,
   e encaixa (snap) exatamente na borda esquerda do site.
   ------------------------------------------------- */
.carta-drinks {
  width: 100%;
  padding: 60px 0;
}

.carta-drinks__title {
  text-align: left;
  padding: 0 16px;
  margin: 0 0 32px;
}

/* Linha de cardápio (Experience / Premium): título + slide de colunas */
.carta-drinks__row {
  --carta-accent: var(--var-color-1); /* Experience: esquema padrão do site */
  margin-bottom: 48px;
}
.carta-drinks__row:last-child {
  margin-bottom: 0;
}

.carta-drinks__row--premium {
  --carta-accent: #b8892f; /* mesmo dourado usado na sessão de preços */
}

.carta-drinks__row-title {
  color: var(--carta-accent);
  text-align: left;
  padding: 0 16px;
  margin: 0 0 16px;
}

.carta-drinks__row .carta-drinks__col-title,
.carta-drinks__row .carta-drinks__detail h3 {
  color: var(--carta-accent);
}

.carta-drinks__slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carta-drinks__slider::-webkit-scrollbar {
  display: none;
}

.carta-drinks__col {
  flex: 0 0 90%;
  scroll-snap-align: start;
}

.carta-drinks__col-title {
  margin: 0 0 12px;
}

.carta-drinks__img {
  width: 100%;
  aspect-ratio: 16 / 9; /* paisagem */
  object-fit: cover;
  border-radius: 8px;
  background-color: var(--var-color-3);
}

.carta-drinks__details {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.carta-drinks__detail {
  flex: 1 1 50%;
  min-width: 0;
}

.carta-drinks__detail h3 {
  margin: 0 0 4px;
}

.carta-drinks__detail p {
  margin: 0;
  font-size: 0.9rem;
}

/* Desktop: grade de 3 colunas, sem navegação horizontal — todos os
   drinks aparecem por completo; a partir do 4º item, quebra em nova linha */
@media (min-width: 900px) {
  .carta-drinks__slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .carta-drinks__col {
    flex: initial;
    scroll-snap-align: none;
  }
}

/* ----- QUALIDADE: título + imagem retrato em largura total ----- */
.qualidade {
  width: 100%;
  padding: 60px 0 0;
}

.qualidade__title {
  text-align: left;
  padding: 0 16px;
  margin: 0 0 8px;
}

.qualidade__subtitle {
  text-align: left;
  padding: 0 16px;
  margin: 0 0 24px;
}

.qualidade__img {
  width: 100%;
  aspect-ratio: 3 / 4; /* retrato */
  object-fit: cover;
  background-color: var(--var-color-1);
}

/* ----- TRABALHOS REALIZADOS: título + mosaico de fotos -----
   Mosaico em CSS Grid: quadros retrato ocupam 1 coluna, quadros
   paisagem ocupam 2 colunas — mas todos vivem na MESMA altura de
   linha (grid-auto-rows), que é o que garante o encaixe perfeito
   sem espaços entre as linhas. A imagem interna usa object-fit:
   cover para se adequar ao quadro (retrato ou paisagem) sem
   distorcer.

   Cada quadro tem margin: 8px (em vez de usar `gap`, como pedido).
   Como CSS não aceita padding negativo, para descontar esse
   respiro nas bordas do mosaico (e alinhar com o gutter de 16px
   do resto do site) uso margin negativa de -8px no contêiner do
   grid: ela "empurra" o grid para fora exatamente na medida do
   margin interno dos quadros, then o padding lateral de 16px do
   contêiner entra por cima — o resultado final bate com o mesmo
   respiro de 16px usado nas outras seções.
   ------------------------------------------------- */
.trabalhos {
  width: 100%;
}

.trabalhos__brand,
.trabalhos__title,
.trabalhos__subtitle {
  text-align: left;
  padding: 0 16px;
  margin: 0 0 8px;
}

.trabalhos__subtitle {
  margin-bottom: 32px;
}

.trabalhos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile: 2 colunas */
  grid-auto-rows: 67.5vw; /* +50% em relação aos 45vw originais */
  grid-auto-flow: dense;
  padding: 0 16px;
  margin: 0 -8px; /* desconta o margin dos quadros nas bordas do mosaico */
}

.trabalhos__frame {
  margin: 8px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--var-color-3);
}

.trabalhos__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* estica sem distorcer, encaixando no formato do quadro */
  display: block;
}

.trabalhos__frame--paisagem {
  grid-column: span 2;
}

.trabalhos__frame--retrato {
  grid-column: span 1;
}

@media (min-width: 900px) {
  .trabalhos__grid {
    grid-template-columns: repeat(4, 1fr); /* desktop: 4 colunas */
    grid-auto-rows: 33vw; /* +50% em relação aos 22vw originais */
  }
}

/* ----- PACOTES: tabela de preços com 3 cardápios -----
   Padrão de mercado: 3 cartões, o do meio (Premium) em destaque
   (badge + leve elevação). Mobile empilha em 1 coluna, desktop
   vira grid de 3 colunas iguais.
   ------------------------------------------------- */
.pacotes {
  width: 100%;
}

.pacotes__title {
  text-align: left;
  padding: 0 16px;
  margin: 0 0 32px;
}

.pacotes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0 16px;
}

.pacotes__card {
  --pacote-accent: var(--var-color-1); /* Experience: esquema padrão do site */

  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--var-color-5);
  border: 1px solid var(--pacote-accent);
  border-radius: 8px;
  overflow: visible; /* deixa a badge "Mais escolhido" vazar por cima do card */
}

.pacotes__card--gold {
  --pacote-accent: #b8892f; /* Premium: amarelo queimado / dourado */
}

.pacotes__card--olive {
  --pacote-accent: #6f7d3c; /* SAL Wedding (custom): verde oliva */
}

.pacotes__card--featured {
  background-color: var(--var-color-4);
}

.pacotes__card-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  z-index: 2;
  background-color: var(--pacote-accent);
  color: var(--var-color-4);
  font-family: var(--var-font-p);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
}

/* Cabeçalho com imagem ultrawide de fundo: nome do cardápio + preço */
.pacotes__card-header {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  padding: 24px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--pacote-accent); /* cor de fallback antes da imagem carregar */
  background-size: cover;
  background-position: center;
}

.pacotes__card-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.55));
}

.pacotes__card-header .pacotes__card-name,
.pacotes__card-header .pacotes__card-price {
  position: relative;
  z-index: 1;
  color: var(--var-color-4);
}

.pacotes__card-name {
  margin: 0 0 8px;
}

.pacotes__card-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pacotes__card-price-value {
  font-family: var(--var-font-h);
  font-size: 2.2rem;
  line-height: 1;
}

.pacotes__card-price-unit {
  font-size: 0.9rem;
  opacity: 0.85;
}

.pacotes__card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 24px;
}

.pacotes__card-intro {
  margin: 0 0 20px;
  font-size: 0.95rem;
}

/* "Ver carta": texto clicável (h4) que abre/fecha a lista de drinks */
.pacotes__card-toggle {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--pacote-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.pacotes__card-toggle::after {
  content: "▾";
  font-size: 0.7em;
  transition: transform 0.2s ease;
}

.pacotes__card-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.pacotes__card-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  flex-grow: 1;
}

.pacotes__card-list[hidden] {
  display: none;
}

.pacotes__card-list li {
  padding: 8px 0;
  border-top: 1px solid var(--var-color-3);
  font-size: 0.95rem;
}

.pacotes__card-list li::before {
  content: "✓";
  color: var(--pacote-accent);
  margin-right: 8px;
  font-weight: 600;
}

.pacotes__card-body:not(:has(.pacotes__card-list)) .pacotes__card-intro {
  flex-grow: 1;
  margin-bottom: 28px;
}

.pacotes__card-cta {
  display: inline-block;
  text-align: center;
  padding: 12px 24px;
  border-radius: 8px;
  background-color: var(--pacote-accent);
  color: var(--var-color-4);
  font-family: var(--var-font-p);
  font-weight: 600;
  font-size: 0.9rem;
}

.pacotes__closing {
  text-align: left;
  margin: 0 0 20px;
  flex-grow: 1;
}

@media (min-width: 900px) {
  .pacotes__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .pacotes__card--featured {
    margin-top: -12px;
  }
}