/* ============================================================
   LUFE TRIPS / CHILE 2027
   sections.css: Estilo de cada seção da página, na ordem em
   que aparecem no index.html
   ============================================================ */

/* ============================================================
   1. HERO
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-top: 120px;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
  background: var(--preto);
}

.hero__fundo { position: absolute; inset: 0; z-index: 0; }

/* A foto é vertical e a tela é deitada. Esticá-la na largura toda
   amplia demais e corta os rostos, então no desktop ela ocupa só a
   faixa da direita, que é a área livre do texto, quase no tamanho
   original: cabem os dois rostos inteiros e a bandeira. A borda
   esquerda se dissolve no fundo escuro atrás do texto.
   Celular e tablet têm enquadramento próprio em responsive.css. */
.hero__fundo img {
  width: 62%; height: 100%;
  margin-left: auto;
  /* sem isto o reset global (max-width: 100%) trava a largura nas
     ampliações do celular e do tablet */
  max-width: none;
  object-fit: cover;
  object-position: 50% 58%;
  filter: saturate(1.06) brightness(.82);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}

/* O véu escurece a esquerda, onde fica o texto, e clareia para a
   direita, deixando o casal e a bandeira aparecerem. O tom rosa
   entra só como leve atmosfera, sem tingir a foto. */
.hero__veu {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(21, 9, 16, .88) 0%, rgba(21, 9, 16, .72) 32%, rgba(21, 9, 16, .34) 58%, rgba(21, 9, 16, .22) 100%),
    radial-gradient(90% 70% at 20% 30%, rgba(230, 25, 143, .18) 0%, transparent 62%),
    linear-gradient(180deg, rgba(21, 9, 16, .55) 0%, transparent 22%, transparent 62%, rgba(21, 9, 16, .72) 88%, var(--preto) 100%);
}

.hero__grao {                    /* grão sutil: dá acabamento de foto impressa */
  position: absolute; inset: 0;
  z-index: 2;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- NEVE CAINDO ----------
   Feita só com CSS, zero JavaScript. Cada camada de flocos é uma
   "folha" com um mosaico de pontinhos que desce exatamente a
   altura do próprio mosaico, então o ciclo fecha sem emenda.

   PERFORMANCE: a descida é feita com transform, não com
   background-position. Assim a folha é desenhada uma vez só e a
   placa de vídeo apenas a desliza. Animar background-position
   obrigava o navegador a redesenhar a hero inteira (foto, véu,
   granulado e textos) a cada quadro, o que travava em Android.

   Camadas maiores descem mais rápido que as menores, o que cria
   a sensação de profundidade (flocos perto x flocos longe).
   A animação "balancar" faz o vento, movendo o conjunto de lado.

   Para mais ou menos neve, acrescente ou remova gradientes em
   background-image de cada camada. Se mudar o tamanho de uma
   camada, mude junto o "top" negativo e o keyframe dela.
   -------------------------------- */

.hero__neve {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  animation: balancar 11s ease-in-out infinite alternate;
}

.hero__flocos {
  position: absolute;
  /* sobra nas laterais para o balanço de 18px não mostrar a borda */
  left: -24px; right: -24px;
  bottom: 0;
  background-repeat: repeat;
  will-change: transform;
}

/* camada da frente: flocos grandes e bem visíveis */
.hero__flocos--perto {
  top: -420px;                   /* começa acima da tela: os flocos já entram caindo */
  background-size: 420px 420px;
  background-image:
    radial-gradient(circle 3.4px at 30px 40px,   rgba(255,255,255,.98), rgba(255,255,255,0)),
    radial-gradient(circle 3px   at 210px 70px,  rgba(255,255,255,.92), rgba(255,255,255,0)),
    radial-gradient(circle 3.6px at 120px 180px, rgba(255,255,255,.96), rgba(255,255,255,0)),
    radial-gradient(circle 2.8px at 330px 250px, rgba(255,255,255,.9),  rgba(255,255,255,0)),
    radial-gradient(circle 3.2px at 380px 130px, rgba(255,255,255,.94), rgba(255,255,255,0)),
    radial-gradient(circle 3px   at 70px 320px,  rgba(255,255,255,.9),  rgba(255,255,255,0)),
    radial-gradient(circle 3.4px at 260px 390px, rgba(255,255,255,.95), rgba(255,255,255,0)),
    radial-gradient(circle 2.9px at 170px 300px, rgba(255,255,255,.88), rgba(255,255,255,0)),
    radial-gradient(circle 3.2px at 400px 350px, rgba(255,255,255,.92), rgba(255,255,255,0)),
    radial-gradient(circle 3px   at 250px 20px,  rgba(255,255,255,.9),  rgba(255,255,255,0));
  animation: nevar-420 16s linear infinite;
}

/* camada do meio */
.hero__flocos--meio {
  top: -300px;
  background-size: 300px 300px;
  background-image:
    radial-gradient(circle 2.3px at 20px 60px,   rgba(255,255,255,.82), rgba(255,255,255,0)),
    radial-gradient(circle 2.1px at 150px 30px,  rgba(255,255,255,.78), rgba(255,255,255,0)),
    radial-gradient(circle 2.4px at 90px 200px,  rgba(255,255,255,.84), rgba(255,255,255,0)),
    radial-gradient(circle 2.1px at 250px 150px, rgba(255,255,255,.76), rgba(255,255,255,0)),
    radial-gradient(circle 2.3px at 190px 265px, rgba(255,255,255,.8),  rgba(255,255,255,0)),
    radial-gradient(circle 2.2px at 60px 130px,  rgba(255,255,255,.78), rgba(255,255,255,0)),
    radial-gradient(circle 2.4px at 285px 240px, rgba(255,255,255,.82), rgba(255,255,255,0)),
    radial-gradient(circle 2px   at 130px 95px,  rgba(255,255,255,.74), rgba(255,255,255,0));
  animation: nevar-300 16s linear infinite;
}

/* camada do fundo: poeira de neve */
.hero__flocos--longe {
  top: -200px;
  background-size: 200px 200px;
  background-image:
    radial-gradient(circle 1.6px at 15px 25px,   rgba(255,255,255,.66), rgba(255,255,255,0)),
    radial-gradient(circle 1.5px at 130px 60px,  rgba(255,255,255,.6),  rgba(255,255,255,0)),
    radial-gradient(circle 1.7px at 70px 140px,  rgba(255,255,255,.64), rgba(255,255,255,0)),
    radial-gradient(circle 1.5px at 175px 175px, rgba(255,255,255,.58), rgba(255,255,255,0)),
    radial-gradient(circle 1.6px at 40px 185px,  rgba(255,255,255,.62), rgba(255,255,255,0)),
    radial-gradient(circle 1.5px at 190px 90px,  rgba(255,255,255,.58), rgba(255,255,255,0));
  animation: nevar-200 16s linear infinite;
}

/* Cada folha desce exatamente o tamanho do próprio mosaico */
@keyframes nevar-420 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 420px, 0); } }
@keyframes nevar-300 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 300px, 0); } }
@keyframes nevar-200 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 200px, 0); } }
@keyframes nevar-520 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 520px, 0); } }

@keyframes balancar {
  from { transform: translateX(-18px); }
  to   { transform: translateX(18px); }
}

/* Flocos grandes passando na frente de tudo, como se estivessem
   entre a pessoa e a paisagem. */
.hero__neve--frente {
  z-index: 5;
  opacity: .75;
  animation-duration: 7s;
}

/* O desfoque destes flocos já vem desenhado no próprio gradiente
   (raio um pouco maior, centro um pouco mais suave). Um filter:
   blur por cima teria de ser recalculado a cada quadro. */
.hero__flocos--frente {
  top: -520px;
  background-size: 520px 520px;
  background-image:
    radial-gradient(circle 6.9px at 80px 60px,   rgba(255,255,255,.9),  rgba(255,255,255,0)),
    radial-gradient(circle 6.2px at 300px 220px, rgba(255,255,255,.86), rgba(255,255,255,0)),
    radial-gradient(circle 7.4px at 180px 400px, rgba(255,255,255,.88), rgba(255,255,255,0)),
    radial-gradient(circle 6.4px at 430px 120px, rgba(255,255,255,.84), rgba(255,255,255,0)),
    radial-gradient(circle 6.8px at 60px 260px,  rgba(255,255,255,.86), rgba(255,255,255,0)),
    radial-gradient(circle 6px   at 350px 460px, rgba(255,255,255,.82), rgba(255,255,255,0)),
    radial-gradient(circle 6.6px at 240px 320px, rgba(255,255,255,.86), rgba(255,255,255,0)),
    radial-gradient(circle 5.8px at 470px 300px, rgba(255,255,255,.8),  rgba(255,255,255,0));
  animation: nevar-520 9s linear infinite;
}

.hero__grade {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: end;
  gap: var(--s-5);
}

.hero__marca {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.4rem;
  animation: deslizar-cima .8s var(--ease) both;
}

.hero__marca-nome {
  font-size: .74rem;
  font-weight: var(--peso-black);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--branco);
}

/* .hero__marca-linha foi removida: era um traço antes do nome da marca */

.hero__titulo {
  font-size: var(--t-hero);
  font-weight: var(--peso-bold);
  color: var(--branco);
  line-height: .86;
  letter-spacing: -.045em;
  margin-bottom: .55rem;
  text-shadow: 0 10px 50px rgba(0, 0, 0, .4);
  animation: deslizar-cima .8s .1s var(--ease) both;
}

.hero__titulo span {
  display: block;
  font-size: .32em;
  font-weight: var(--peso-regular);
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--rosa-vivo);
  margin-top: .55rem;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}

.hero__texto {
  font-size: var(--t-lead);
  line-height: 1.65;
  color: rgba(255, 255, 255, .82);
  max-width: 48ch;
  font-weight: var(--peso-regular);
  margin-bottom: 1.8rem;
  animation: deslizar-cima .8s .2s var(--ease) both;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.8rem;
  animation: deslizar-cima .8s .3s var(--ease) both;
}

/* Bloco de preço em vidro */
.hero__preco {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.2rem 1.8rem;
  padding: 1.15rem 1.6rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-bottom: 1.8rem;
  animation: deslizar-cima .8s .38s var(--ease) both;
}

.hero__preco-rotulo {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--peso-black);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  margin-bottom: .2rem;
}

.hero__preco-valor {
  font-family: var(--fonte-display);
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: var(--peso-bold);
  color: var(--branco);
  line-height: 1;
  letter-spacing: -.03em;
}

.hero__preco-valor sup {
  font-size: .42em;
  font-weight: var(--peso-semi);
  vertical-align: super;
  margin-right: .12em;
  color: var(--rosa-vivo);
}

.hero__preco-pgto {
  font-size: .82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  font-weight: var(--peso-medio);
  max-width: 26ch;
}

.hero__preco-pgto strong { color: var(--branco); font-weight: var(--peso-black); }

.hero__ctas { animation: deslizar-cima .8s .46s var(--ease) both; }

/* Pilha de fotos (polaroids) */
.hero__pilha {
  position: relative;
  height: 470px;
  animation: deslizar-cima 1s .5s var(--ease) both;
}

.hero__polaroid {
  position: absolute;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sombra-xl);
  border: 6px solid rgba(255, 255, 255, .92);
  background: var(--branco);
}

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

/* A rotação entra nos próprios keyframes: se ficasse só no
   transform da classe, a animação a sobrescreveria. */
.hero__polaroid--a {
  width: 61%;
  aspect-ratio: 4 / 5;
  right: 6%;
  top: 0;
  transform: rotate(3.2deg);
  z-index: 2;
  animation: flutuar-a 7s ease-in-out infinite;
}

.hero__polaroid--b {
  width: 50%;
  aspect-ratio: 3 / 4;
  left: 0;
  bottom: 0;
  transform: rotate(-4.5deg);
  z-index: 3;
  animation: flutuar-b 8.5s ease-in-out .9s infinite;
}

@keyframes flutuar-a {
  0%, 100% { transform: rotate(3.2deg) translateY(0); }
  50%      { transform: rotate(3.2deg) translateY(-14px); }
}

@keyframes flutuar-b {
  0%, 100% { transform: rotate(-4.5deg) translateY(0); }
  50%      { transform: rotate(-4.5deg) translateY(-11px); }
}

.hero__selo {
  position: absolute;
  right: 2%;
  bottom: 14%;
  z-index: 4;
  width: 104px; height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(135deg, var(--rosa-vivo), var(--rosa-forte));
  color: var(--branco);
  box-shadow: var(--sombra-rosa);
  font-size: .62rem;
  font-weight: var(--peso-black);
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
  transform: rotate(-9deg);
}

.hero__selo strong { display: block; font-size: 1.5rem; letter-spacing: -.02em; }

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: .4rem;
  font-size: .58rem;
  font-weight: var(--peso-black);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.hero__scroll svg { width: 15px; height: 15px; animation: descer 2s infinite; }

/* ============================================================
   2. SEÇÃO EMOCIONAL MOSAICO
   ============================================================ */

.emocao__grade {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.emocao__texto { position: relative; }

.emocao__aspas {
  font-family: var(--fonte-display);
  font-size: 7rem;
  line-height: .6;
  color: var(--rosa-claro);
  margin-bottom: .6rem;
  user-select: none;
}

.emocao__assinatura {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: var(--s-4);
  font-size: var(--t-mini);
  font-weight: var(--peso-black);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosa);
}

/* sem traço decorativo antes do texto */

.mosaico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}

.mosaico .foto { box-shadow: var(--sombra-md); }
.mosaico__a { aspect-ratio: 3 / 4; margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.mosaico__b { aspect-ratio: 4 / 5; }
.mosaico__c { aspect-ratio: 4 / 5; margin-top: clamp(-1rem, -2vw, -2rem); }
.mosaico__d { aspect-ratio: 3 / 4; }

/* ============================================================
   3. VIAGEM COMPLETA CARDS
   ============================================================ */

.completa__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.3rem);
}

.completa .card { overflow: hidden; }

.completa .card::before {         /* halo rosa que acende no hover */
  content: '';
  position: absolute;
  top: -60%; right: -30%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: var(--rosa-halo);
  filter: blur(46px);
  opacity: 0;
  transition: opacity var(--medio) var(--ease);
  pointer-events: none;
}

.completa .card:hover::before { opacity: 1; }

/* ============================================================
   4. O QUE ESTÁ INCLUSO
   ============================================================ */

.incluso__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}

.bloco-incluso {
  position: relative;
  background: var(--branco);
  border: 1px solid rgba(21, 9, 16, .07);
  border-radius: var(--r-md);
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  transition: transform var(--medio) var(--ease), box-shadow var(--medio) var(--ease);
}

.bloco-incluso:hover { transform: translateY(-5px); box-shadow: var(--sombra-md); }

.bloco-incluso__topo {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px dashed rgba(230, 25, 143, .28);
}

.bloco-incluso__emoji {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--rosa-claro);
  font-size: 1.25rem;
}

.bloco-incluso__titulo {
  font-family: var(--fonte-texto);
  font-size: .82rem;
  font-weight: var(--peso-black);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--preto);
}

.lista-check { display: grid; gap: .7rem; }

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .94rem;
  color: var(--chumbo);
  line-height: 1.5;
}

.lista-check li::before {
  content: '';
  flex: none;
  width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--rosa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Bloco do que fica por conta do viajante. Visual mais sóbrio que
   os cards de incluso, para não competir com eles. */
.nao-incluso {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border-radius: var(--r-md);
  background: var(--creme-2);
  border: 1px dashed rgba(21, 9, 16, .18);
}

.nao-incluso__topo {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.1rem;
}

.nao-incluso__emoji {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--branco);
  font-size: 1.2rem;
}

.nao-incluso__titulo {
  font-family: var(--fonte-texto);
  font-size: .82rem;
  font-weight: var(--peso-black);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chumbo);
}

.lista-x {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: .65rem 1.4rem;
}

.lista-x li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .9rem;
  color: var(--cinza);
  line-height: 1.5;
}

.lista-x li::before {
  content: '';
  flex: none;
  width: 17px; height: 17px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--cinza-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.incluso__nota {
  margin-top: var(--s-4);
  padding: 1.1rem 1.4rem;
  border-radius: var(--r-sm);
  background: var(--rosa-vidro);
  border-left: 3px solid var(--rosa);
  font-size: .88rem;
  color: var(--chumbo);
  line-height: 1.6;
}

/* ============================================================
   5. HOSPEDAGEM
   ============================================================ */

.hospedagem { background: linear-gradient(180deg, var(--gelo) 0%, var(--creme) 68%); }

.hospedagem__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hospedagem__estrelas {
  display: flex;
  gap: .22rem;
  color: var(--rosa);
  margin-bottom: 1rem;
}

.hospedagem__estrelas svg { width: 19px; height: 19px; }

.hospedagem__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: .9rem;
  margin-top: var(--s-4);
}

.hospedagem__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 1.1rem;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(21, 9, 16, .06);
  border-radius: var(--r-sm);
  font-size: .9rem;
  font-weight: var(--peso-semi);
  color: var(--grafite);
  transition: transform var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}

.hospedagem__item:hover { transform: translateX(5px); border-color: rgba(230, 25, 143, .3); }
.hospedagem__item span:first-child { font-size: 1.2rem; }

.hospedagem__visual { position: relative; }

/* Quatro fotos reais do hotel, em formato paisagem */
.hospedagem__galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.2vw, .9rem);
}

.hospedagem__galeria .foto {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  box-shadow: var(--sombra-md);
}

.hospedagem__galeria .foto__legenda { font-size: .64rem; letter-spacing: .1em; }

/* ============================================================
   6. ROTEIRO (TIMELINE)
   ============================================================ */

.roteiro { background: var(--creme-2); }

.linha-tempo { position: relative; display: grid; gap: clamp(2rem, 4vw, 3.4rem); }

.linha-tempo::before {            /* trilho vertical */
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--rosa-claro) 8%, var(--rosa-claro) 92%, transparent);
}

.dia {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
  align-items: center;
}

.dia__no {
  grid-column: 2;
  justify-self: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--branco);
  border: 2px solid var(--rosa);
  color: var(--rosa-forte);
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  font-weight: var(--peso-bold);
  box-shadow: 0 0 0 8px var(--creme-2);
  z-index: 2;
  transition: transform var(--medio) var(--ease), background var(--medio) var(--ease), color var(--medio) var(--ease);
}

.dia:hover .dia__no { transform: scale(1.1); background: var(--rosa); color: var(--branco); }

.dia__conteudo { grid-column: 1; text-align: right; padding-right: clamp(1rem, 2.4vw, 2.2rem); }
.dia__visual   { grid-column: 3; padding-left: clamp(1rem, 2.4vw, 2.2rem); }

.dia--invertido .dia__conteudo { grid-column: 3; text-align: left; padding-right: 0; padding-left: clamp(1rem, 2.4vw, 2.2rem); }
.dia--invertido .dia__visual   { grid-column: 1; padding-left: 0; padding-right: clamp(1rem, 2.4vw, 2.2rem); }

.dia__data {
  font-size: var(--t-mini);
  font-weight: var(--peso-black);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rosa);
  margin-bottom: .5rem;
}

.dia__titulo {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  color: var(--preto);
  margin-bottom: .55rem;
}

.dia__texto { color: var(--cinza); font-size: .96rem; line-height: 1.65; max-width: 38ch; }
.dia__conteudo .dia__texto { margin-left: auto; }
.dia--invertido .dia__conteudo .dia__texto { margin-left: 0; }

.dia__visual .foto { aspect-ratio: 4 / 5; max-width: 330px; box-shadow: var(--sombra-md); }
.dia:not(.dia--invertido) .dia__visual .foto { margin-right: auto; }
.dia--invertido .dia__visual .foto { margin-left: auto; }

.dia__final {
  max-width: 330px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-4);
  background: linear-gradient(150deg, var(--rosa-escuro), var(--preto));
  color: var(--branco);
  box-shadow: var(--sombra-lg);
  margin-right: auto;
}

.dia__final svg { width: 46px; height: 46px; margin: 0 auto 1rem; color: var(--rosa-vivo); }
.dia__final strong { font-family: var(--fonte-display); font-size: 1.5rem; display: block; margin-bottom: .4rem; }
.dia__final span { font-size: .85rem; opacity: .72; line-height: 1.5; }

.roteiro__nota {
  text-align: center;
  margin-top: var(--s-5);
  font-size: .85rem;
  color: var(--cinza);
  font-style: italic;
}

/* ============================================================
   7. O CHILE NO INVERNO (galeria escura)
   ============================================================ */

.inverno { background: var(--preto); overflow: hidden; }

.inverno__brilho {
  position: absolute;
  top: -20%; left: 50%;
  width: min(900px, 110vw); height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(230, 25, 143, .3), transparent);
  filter: blur(46px);
  pointer-events: none;
}

.inverno__galeria {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.7rem, 1.3vw, 1.1rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.inverno__galeria .foto { aspect-ratio: 3 / 4; }

/* Escalonamento feito com margem, não com transform: assim a
   animação de entrada (.reveal) continua livre para usar transform. */
.inverno__galeria .foto:nth-child(odd)  { margin-top: 0; margin-bottom: clamp(1.4rem, 2.4vw, 2.4rem); }
.inverno__galeria .foto:nth-child(even) { margin-top: clamp(1.4rem, 2.4vw, 2.4rem); margin-bottom: 0; }

.inverno__faixa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.inverno__stat { text-align: center; }

.inverno__stat strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: var(--peso-bold);
  color: var(--branco);
  line-height: 1;
  margin-bottom: .3rem;
}

.inverno__stat span {
  font-size: var(--t-micro);
  font-weight: var(--peso-black);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rosa-vivo);
}

/* ============================================================
   8. EXPERIÊNCIA LUFE TRIPS
   ============================================================ */

.agencia__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.agencia__visual { position: relative; }

/* Quatro registros de viagens em grupo */
.agencia__galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 1.2vw, .9rem);
}

.agencia__galeria .foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  box-shadow: var(--sombra-md);
}

/* O recuo negativo só entra quando existe folga entre o container e a
   borda da janela. Sem isso, o card ultrapassa a tela por volta de
   1280px, que é justamente a largura em que o container trava. */
.agencia__flutuante {
  position: absolute;
  right: 0; top: 2rem;
  z-index: 3;
  background: var(--branco);
  border-radius: var(--r-sm);
  padding: 1rem 1.3rem;
  box-shadow: var(--sombra-lg);
  display: flex;
  align-items: center;
  gap: .8rem;
  max-width: 230px;
}

.agencia__flutuante-icone {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--rosa-claro);
  font-size: 1.15rem;
}

.agencia__flutuante strong { display: block; font-size: .84rem; color: var(--preto); font-weight: var(--peso-black); }
.agencia__flutuante span { font-size: .74rem; color: var(--cinza); }

.agencia__provas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: .8rem;
  margin-top: var(--s-4);
}

.agencia__prova {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .92rem;
  font-weight: var(--peso-semi);
  color: var(--grafite);
  padding: .55rem 0;
}

.agencia__prova svg { width: 20px; height: 20px; flex: none; color: var(--rosa); }

/* ============================================================
   9. FEEDBACKS (prova social)
   ============================================================ */

.feedbacks { background: linear-gradient(180deg, var(--creme) 0%, var(--rosa-claro) 100%); overflow: hidden; }

.feedbacks__composicao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
  align-items: start;
}

.depoimento {
  position: relative;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--r-md);
  padding: 1.1rem;
  box-shadow: var(--sombra-lg);
  transition: transform var(--medio) var(--ease), box-shadow var(--medio) var(--ease);
}

.depoimento:hover { transform: translateY(-8px) rotate(0deg) !important; box-shadow: var(--sombra-xl); z-index: 6; }

/* Profundidade: cada card em um nível e ângulo diferentes.
   A rotação é repetida no estado .is-visivel porque o .reveal
   zera o transform ao aparecer sem isso, os cards ficariam retos. */
.depoimento--1 { transform: rotate(-1.4deg) translateY(28px); margin-top: clamp(0rem, 2vw, 1.8rem); }
.depoimento--2 { transform: rotate(1.8deg) translateY(28px); }
.depoimento--3 { transform: rotate(1.1deg) translateY(28px); margin-top: clamp(-.5rem, -1vw, -1.2rem); }
.depoimento--4 { transform: rotate(-2deg) translateY(28px); margin-top: clamp(-1rem, -2vw, -2.2rem); }
.depoimento--convite { transform: rotate(1deg) translateY(28px); }

.depoimento--1.is-visivel { transform: rotate(-1.4deg); }
.depoimento--2.is-visivel { transform: rotate(1.8deg); }
.depoimento--3.is-visivel { transform: rotate(1.1deg); }
.depoimento--4.is-visivel { transform: rotate(-2deg); }
.depoimento--convite.is-visivel { transform: rotate(1deg); }

.depoimento__topo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  padding-inline: .3rem;
}

.depoimento__origem {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .64rem;
  font-weight: var(--peso-black);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rosa-forte);
}

.depoimento__origem svg { width: 14px; height: 14px; }

.depoimento__viagem {
  margin-left: auto;
  font-size: .62rem;
  font-weight: var(--peso-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cinza);
}

.depoimento__print {
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--branco);
  border: 1px solid rgba(21, 9, 16, .06);
}

.depoimento__print img { width: 100%; }

/* Card-convite que fecha a composição */
.depoimento--convite {
  display: grid;
  align-content: center;
  gap: 1rem;
  text-align: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: linear-gradient(145deg, var(--rosa), var(--rosa-forte));
  border: 0;
  color: var(--branco);
}

.depoimento--convite strong {
  font-family: var(--fonte-display);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.2;
}

.depoimento--convite p { font-size: .88rem; opacity: .9; line-height: 1.55; }
.depoimento--convite .btn { justify-self: center; }

.feedbacks__nota {
  text-align: center;
  margin-top: var(--s-5);
  font-size: .82rem;
  color: var(--chumbo);
  opacity: .8;
}

/* ============================================================
   10. INSTAGRAM
   ============================================================ */

.insta__grade {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.insta__vitrine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1vw, .8rem);
}

.insta__vitrine .foto {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-sm);
}

.insta__vitrine .foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(230, 25, 143, .5), rgba(21, 9, 16, .3));
  opacity: 0;
  transition: opacity var(--medio) var(--ease);
}

.insta__vitrine .foto:hover::after { opacity: 1; }

.insta__arroba {
  font-family: var(--fonte-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: var(--peso-bold);
  color: var(--rosa);
  display: block;
  margin-bottom: 1rem;
}

.insta__destaque {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
  margin-bottom: var(--s-3);
  max-width: 300px;
}

/* ============================================================
   11. INVESTIMENTO
   ============================================================ */

.investimento { background: var(--preto); overflow: hidden; }

.investimento__brilho {
  position: absolute;
  right: -10%; top: 10%;
  width: min(700px, 90vw); height: 700px;
  background: radial-gradient(closest-side, rgba(230, 25, 143, .32), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.preco-card {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
  background: linear-gradient(155deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.6rem);
  text-align: center;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--sombra-xl);
}

.preco-card__faixa {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--rosa);
  color: var(--branco);
  font-size: var(--t-micro);
  font-weight: var(--peso-black);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}

.preco-card__rotulo {
  font-size: .82rem;
  font-weight: var(--peso-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: .6rem;
}

.preco-card__valor {
  font-family: var(--fonte-display);
  /* Calibrado para manter o tamanho atual no desktop (99px a partir
     de ~875px de largura) e caber com folga em 320px. */
  font-size: clamp(2.9rem, 1rem + 9.5vw, 6.2rem);
  font-weight: var(--peso-bold);
  color: var(--branco);
  line-height: .95;
  letter-spacing: -.04em;
  margin-bottom: .5rem;
}

.preco-card__valor sup {
  font-size: .3em;
  vertical-align: super;
  color: var(--rosa-vivo);
  margin-right: .1em;
}

.preco-card__valor small { font-size: .42em; font-weight: var(--peso-semi); letter-spacing: -.02em; }

.preco-card__pessoa {
  font-size: .9rem;
  color: rgba(255, 255, 255, .62);
  margin-bottom: var(--s-4);
}

.preco-card__pagamentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: .8rem;
  margin-bottom: var(--s-4);
  text-align: left;
}

.pgto {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.2rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: border-color var(--rapido) var(--ease), background var(--rapido) var(--ease);
}

.pgto:hover { border-color: var(--rosa); background: rgba(230, 25, 143, .12); }

.pgto__icone { font-size: 1.3rem; flex: none; }
.pgto strong { display: block; font-size: .88rem; color: var(--branco); font-weight: var(--peso-bold); line-height: 1.3; }
.pgto span { font-size: .72rem; color: rgba(255, 255, 255, .55); }

.preco-card__sinal {
  display: inline-block;
  padding: .7rem 1.2rem;
  margin-bottom: var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(230, 25, 143, .16);
  border: 1px solid rgba(230, 25, 143, .4);
  font-size: .88rem;
  color: rgba(255, 255, 255, .88);
}

.preco-card__sinal strong { color: var(--branco); font-weight: var(--peso-black); }

.preco-card__nota {
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .45);
  margin-top: 1.1rem;
  max-width: 54ch;
  margin-inline: auto;
}

/* ============================================================
   12. RESUMO RÁPIDO
   ============================================================ */

.resumo__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 1px;
  background: rgba(21, 9, 16, .09);
  border: 1px solid rgba(21, 9, 16, .09);
  border-radius: var(--r-md);
  overflow: hidden;
}

.resumo__item {
  background: var(--branco);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  transition: background var(--rapido) var(--ease);
}

.resumo__item:hover { background: var(--rosa-vidro); }

.resumo__rotulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--t-micro);
  font-weight: var(--peso-black);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rosa);
  margin-bottom: .55rem;
}

.resumo__valor {
  font-family: var(--fonte-display);
  font-size: 1.14rem;
  font-weight: var(--peso-semi);
  color: var(--preto);
  line-height: 1.32;
}

/* ============================================================
   13. FAQ
   ============================================================ */

.faq__grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.faq__aside { position: sticky; top: 110px; }

.faq__ajuda {
  margin-top: var(--s-4);
  padding: 1.5rem;
  border-radius: var(--r-md);
  background: var(--branco);
  border: 1px solid rgba(230, 25, 143, .2);
  box-shadow: var(--sombra-sm);
}

.faq__ajuda strong { display: block; font-family: var(--fonte-display); font-size: 1.2rem; color: var(--preto); margin-bottom: .4rem; }
.faq__ajuda p { font-size: .88rem; color: var(--cinza); margin-bottom: 1.1rem; line-height: 1.55; }

/* ============================================================
   14. CTA FINAL
   ============================================================ */

.final {
  position: relative;
  overflow: hidden;
  background: var(--preto);
  text-align: center;
  padding-block: clamp(5rem, 11vw, 10rem);
}

.final__fundo { position: absolute; inset: 0; z-index: 0; }

.final__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  transform: scale(1.12);
  filter: blur(22px) brightness(.55) saturate(1.1);
}

.final__veu {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(230, 25, 143, .3), transparent 62%),
    linear-gradient(180deg, var(--preto) 0%, rgba(21, 9, 16, .55) 38%, rgba(21, 9, 16, .82) 100%);
}

.final__conteudo { position: relative; z-index: 2; }

.final__titulo {
  font-size: var(--t-display);
  color: var(--branco);
  max-width: 17ch;
  margin-inline: auto;
  margin-bottom: 1.1rem;
  text-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}

.final__titulo em { font-style: italic; color: var(--rosa-vivo); font-variation-settings: 'SOFT' 40, 'WONK' 1; }

.final__texto {
  font-family: var(--fonte-display);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: var(--peso-regular);
  font-style: italic;
  color: rgba(255, 255, 255, .8);
  margin-bottom: var(--s-4);
}

.final__dados {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.2rem, 4vw, 3rem);
  margin-bottom: var(--s-4);
  padding-block: var(--s-3);
}

.final__dado { text-align: center; }

.final__dado strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: var(--peso-bold);
  color: var(--branco);
  line-height: 1;
  letter-spacing: -.02em;
}

.final__dado span {
  font-size: var(--t-micro);
  font-weight: var(--peso-black);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rosa-vivo);
  display: block;
  margin-top: .45rem;
}

.final__divisor { width: 1px; height: 46px; background: rgba(255, 255, 255, .22); }

.final .grupo-botoes { justify-content: center; }

/* ============================================================
   15. RODAPÉ
   ============================================================ */

.rodape { background: var(--preto); color: rgba(255, 255, 255, .7); padding-top: clamp(3.5rem, 7vw, 5.5rem); }

.rodape__topo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.rodape__marca {
  font-family: var(--fonte-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: var(--peso-bold);
  color: var(--branco);
  line-height: 1;
  letter-spacing: -.03em;
  margin-bottom: .7rem;
}

.rodape__slogan {
  font-family: var(--fonte-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--rosa-vivo);
  margin-bottom: var(--s-3);
}

.rodape__texto { font-size: .92rem; line-height: 1.7; max-width: 42ch; color: rgba(255, 255, 255, .6); }

.rodape__registro {
  display: inline-block;
  margin-top: var(--s-3);
  padding: .55rem 1rem;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

.rodape__registro strong { color: rgba(255, 255, 255, .82); letter-spacing: .04em; }

.rodape__contatos { display: grid; gap: 1.1rem; align-content: start; }

.rodape__contato {
  display: flex;
  align-items: center;
  gap: .9rem;
  transition: color var(--rapido) var(--ease);
}

.rodape__contato:hover { color: var(--branco); }

.rodape__contato-icone {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--rosa-vivo);
  transition: background var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}

.rodape__contato:hover .rodape__contato-icone { background: var(--rosa); border-color: var(--rosa); color: var(--branco); }
.rodape__contato-icone svg { width: 20px; height: 20px; }

.rodape__contato-rotulo {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--peso-black);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

.rodape__contato-valor { font-size: 1rem; font-weight: var(--peso-bold); color: var(--branco); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3) var(--s-4);
  font-size: .8rem;
  color: rgba(255, 255, 255, .4);
}

/* Assinatura Santare.AI discreta, sem competir com a Lufe Trips */
.assinatura {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .45);
}

.assinatura__ponto { width: 3px; height: 3px; border-radius: 50%; background: var(--dourado); opacity: .8; }

.assinatura__marca {
  color: var(--dourado-claro);
  font-weight: var(--peso-bold);
  letter-spacing: .02em;
}

.assinatura__arroba {
  color: rgba(255, 255, 255, .5);
  border-bottom: 1px solid rgba(201, 169, 97, .4);
  transition: color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}

.assinatura__arroba:hover { color: var(--dourado); border-color: var(--dourado); }