/* ============================================================
   LUFE TRIPS / CHILE 2027
   responsive.css: Adaptações por tamanho de tela.

   PRINCÍPIO
   O desktop é a referência e não muda. O que acontece aqui é a
   adaptação dessa mesma composição para telas menores, seção por
   seção: onde a relação "texto ao lado da imagem" cabe, ela é
   mantida; onde não cabe, a imagem vira um bloco editorial com
   largura própria, em vez de simplesmente empilhar tudo.

   A margem lateral vem do .container (base.css), em um lugar só.

   Pontos de quebra:
   1180px notebook / 980px tablet / 760px mobile grande /
   520px mobile / 400px mobile estreito
   ============================================================ */

/* ============ TELAS MUITO GRANDES ============ */
@media (min-width: 1600px) {
  :root { --largura-max: 1400px; }
  .hero__pilha { height: 540px; }
}

/* Só aqui existe folga lateral suficiente para o card da seção da
   agência avançar sobre a margem sem encostar na borda da janela. */
@media (min-width: 1420px) {
  .agencia__flutuante { right: -1rem; }
}

/* ============ NOTEBOOK ============ */
@media (max-width: 1180px) {
  .hero__pilha { height: 400px; }
  .hero__selo { width: 90px; height: 90px; font-size: .56rem; }
  .hero__selo strong { font-size: 1.25rem; }
  .inverno__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inverno__galeria .foto:nth-child(n) { margin-top: 0; margin-bottom: 0; }
  .agencia__flutuante { right: 0; }
}

/* ============================================================
   TABLET E ABAIXO (≤980px)
   Mudanças de estrutura: menu, topo e as grades de duas colunas.
   ============================================================ */
@media (max-width: 980px) {
  html { scroll-padding-top: 76px; }

  /* ---- ANIMAÇÃO DE ENTRADA SEM DESLOCAMENTO LATERAL ----
     No desktop os blocos entram deslizando de lado. Em coluna
     única isso não faz sentido e, pior, o deslocamento de 32px
     para a direita cria scroll horizontal enquanto o elemento
     ainda não foi revelado. Aqui a entrada passa a ser vertical. */
  .reveal--esq,
  .reveal--dir { transform: translateY(28px); }

  /* ---- Menu vira hamburger ---- */
  .menu__links { display: none; }
  .menu__burger { display: flex; }

  /* ---- TOPO ----
     A foto de fundo perde o desfoque: nesta largura a resolução
     original já é suficiente e a imagem aparece nítida. */
  .hero {
    align-items: flex-end;
    min-height: 100svh;
    padding-top: 104px;
  }

  /* A foto entra ampliada para que os rostos subam até a faixa que
     fica livre entre o parágrafo e os chips. Sem isso eles cairiam
     exatamente atrás do bloco de preço. */
  .hero__fundo img {
    width: 145%;
    margin-left: -22.5%;
    object-position: 50% 95%;
    filter: brightness(.8) saturate(1.08);
    /* a dissolvência lateral é só do desktop */
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Vertical em vez de lateral: escuro no topo (menu) e na base
     (preço e botões), leve no miolo, onde está o casal. */
  .hero__veu {
    background:
      linear-gradient(180deg,
        rgba(21, 9, 16, .82) 0%,
        rgba(21, 9, 16, .62) 16%,
        rgba(21, 9, 16, .50) 30%,
        rgba(21, 9, 16, .22) 40%,
        rgba(21, 9, 16, .24) 48%,
        rgba(21, 9, 16, .68) 62%,
        rgba(21, 9, 16, .92) 84%,
        var(--preto) 100%);
  }

  /* Com o véu mais leve, o texto precisa da sombra para continuar
     legível sobre a neve clara da foto. */
  .hero__titulo,
  .hero__texto,
  .hero__marca-nome { text-shadow: 0 2px 18px rgba(21, 9, 16, .85); }

  .hero__grade { grid-template-columns: minmax(0, 1fr); }
  .hero__pilha { display: none; }
  .hero__scroll { display: none; }
  .hero__texto { max-width: 100%; }

  /* ---- Grades de duas colunas passam a uma ---- */
  .emocao__grade,
  .hospedagem__grade,
  .agencia__grade,
  .insta__grade,
  .faq__grade { grid-template-columns: minmax(0, 1fr); }

  .emocao__texto   { order: 1; }
  .emocao__mosaico { order: 2; }
  .hospedagem__conteudo { order: 1; }
  .hospedagem__visual   { order: 2; }
  .agencia__conteudo { order: 1; }
  .agencia__visual   { order: 2; }

  .faq__aside { position: static; }
  .titulo-secao { max-width: 100%; }

  /* ---- HOSPEDAGEM: as quatro fotos do hotel continuam em
     duas colunas, que é a composição do desktop. ---- */
  .hospedagem__visual { position: relative; max-width: 100%; }
  .hospedagem__galeria { gap: .55rem; }

  /* ---- AGÊNCIA: idem, com o cartão sobreposto no rodapé ---- */
  .agencia__visual {
    position: relative;
    max-width: 100%;
    padding-bottom: clamp(2rem, 6vw, 3rem);
  }

  .agencia__galeria { gap: .55rem; }

  .agencia__flutuante {
    position: absolute;
    right: 0;
    left: auto;
    top: auto;
    bottom: 0;
    max-width: min(66%, 240px);
    margin: 0;
    padding: .85rem 1rem;
  }

  /* ---- ROTEIRO: trilho único à esquerda ---- */
  .linha-tempo::before { left: 27px; transform: none; }

  .dia {
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 0 1.1rem;
  }

  .dia__no {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 54px; height: 54px;
    box-shadow: 0 0 0 7px var(--creme-2);
  }

  .dia__conteudo,
  .dia--invertido .dia__conteudo {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding: 0 0 1rem 0;
  }

  .dia__visual,
  .dia--invertido .dia__visual {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
  }

  .dia__conteudo .dia__texto,
  .dia--invertido .dia__conteudo .dia__texto { margin-left: 0; max-width: 100%; }

  .dia__visual .foto,
  .dia--invertido .dia__visual .foto,
  .dia__final { max-width: 100%; margin: 0; }

  /* 5/4 corta bem menos destas fotos verticais do que um formato
     panorâmico, e ainda assim não deixa o item alto demais. */
  .dia__visual .foto { aspect-ratio: 5 / 4; }
  .dia__final { aspect-ratio: 5 / 4; padding: var(--s-3); }

  /* O botão flutuante do WhatsApp fica sobre o canto inferior
     direito. Este respiro impede que ele cubra a assinatura do
     rodapé, que é a última linha da página. */
  .rodape__base { padding-bottom: calc(var(--s-4) + 64px); }

  /* ---- CTAs fixos entram em cena ---- */
  .barra-mobile { display: flex; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .wa-flutuante { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .wa-flutuante__texto { display: none; }
}

/* ============================================================
   TOPO EM TABLET (600px a 980px)
   Nesta faixa a tela é alta e larga ao mesmo tempo, e o recorte
   do celular deixaria os rostos cortados no topo. Ampliação e
   enquadramento próprios.
   ============================================================ */
@media (min-width: 600px) and (max-width: 980px) {
  .hero__fundo img {
    width: 118%;
    margin-left: -9%;
    object-position: 50% 70%;
  }

  .hero__texto { margin-bottom: 2.4rem; }
}

/* ============================================================
   ROTEIRO LADO A LADO (460px a 980px)
   A partir de 460px sobra largura para o texto do dia e a foto
   ficarem lado a lado, que é a composição do desktop. O corte é
   460 e não 420 porque abaixo disso a foto cairia para uns 130px
   e deixaria de cumprir sua função. Nessas telas ela passa para
   baixo do texto, em formato mais largo (regra acima).
   ============================================================ */
@media (min-width: 460px) and (max-width: 980px) {
  .dia {
    grid-template-columns: 54px minmax(0, .95fr) minmax(0, 1fr);
    align-items: center;
    gap: 0 clamp(.7rem, 2.6vw, 1.1rem);
  }

  .dia__conteudo,
  .dia--invertido .dia__conteudo {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
  }

  .dia__visual,
  .dia--invertido .dia__visual {
    grid-column: 3;
    grid-row: 1;
    padding: 0;
  }

  .dia__visual .foto,
  .dia--invertido .dia__visual .foto { aspect-ratio: 3 / 4; }

  .dia__final {
    aspect-ratio: 3 / 4;
    padding: 1.1rem .9rem;
  }

  .dia__final svg { width: 34px; height: 34px; margin-bottom: .6rem; }
  .dia__final strong { font-size: 1.15rem; }
  .dia__final span { font-size: .74rem; }
}

/* ============================================================
   INSTAGRAM LADO A LADO (460px a 980px)
   O post fica à direita do texto, como no desktop, em vez de
   empilhado no meio da coluna.
   ============================================================ */
@media (min-width: 460px) and (max-width: 980px) {
  .insta__conteudo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .66fr);
    column-gap: clamp(1rem, 3vw, 1.6rem);
    align-items: start;
  }

  .insta__conteudo > .eyebrow,
  .insta__conteudo > .titulo-secao { grid-column: 1 / -1; }

  .insta__destaque {
    grid-column: 2;
    grid-row: 3 / span 3;
    max-width: 100%;
    margin: 0;
    align-self: start;
  }

  .insta__conteudo > .btn { align-self: start; justify-self: start; }
}

/* ============================================================
   MOBILE GRANDE (≤760px)
   ============================================================ */
@media (max-width: 760px) {
  :root { --secao-y: clamp(3.25rem, 9vw, 4.75rem); }

  /* O topo continua com respiro: é a primeira impressão. */
  .hero { padding-bottom: clamp(2rem, 7vw, 3rem); }

  .hero__preco {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem 1.2rem;
  }

  .hero__preco-pgto { max-width: 100%; font-size: .78rem; }
  .hero__chips { gap: .4rem; }

  /* ---- BOTÕES ----
     Menores e com entrelinha, para o texto longo dos CTAs caber
     bem quando precisa usar duas linhas. A área de toque continua
     acima do mínimo confortável. */
  .btn {
    padding: .95rem 1.35rem;
    font-size: .8rem;
    letter-spacing: .035em;
    line-height: 1.3;
    min-height: 54px;
  }

  .btn--grande {
    padding: 1.05rem 1.5rem;
    font-size: .84rem;
    min-height: 58px;
  }

  /* Empilhados, mas sem virar faixas gigantes em tablets */
  .grupo-botoes {
    flex-direction: column;
    width: 100%;
    max-width: 420px;
  }

  .grupo-botoes .btn { width: 100%; }
  .final .grupo-botoes { margin-inline: auto; }

  /* Só a neve de trás: os flocos grandes na frente do texto
     atrapalhariam a leitura em tela pequena. */
  .hero__neve--frente { display: none; }

  .emocao__aspas { font-size: 4.5rem; }

  /* Mosaico mantém o ar editorial nas duas colunas */
  .mosaico__a, .mosaico__c { margin-top: 0; }
  .mosaico__b, .mosaico__d { margin-top: 1.4rem; }

  /* ---- FEEDBACKS viram carrossel ----
     Os cards ocupam quase toda a largura de propósito: são prints
     de comentários, e cada pixel a mais ajuda na leitura. */
  .feedbacks__composicao {
    display: flex;
    /* Os cards têm alturas bem diferentes (um print é baixo, o card
       de convite é alto). Centralizados, a sobra se divide em cima e
       embaixo em vez de virar um buraco embaixo de cada print. */
    align-items: center;
    gap: .85rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 1rem var(--gutter) 1.4rem;
    margin-inline: calc(var(--gutter) * -1);
  }

  .feedbacks__composicao::-webkit-scrollbar { display: none; }

  .depoimento {
    flex: 0 0 min(94%, 400px);
    max-width: none;
    padding: .8rem;
    scroll-snap-align: center;
    transform: none !important;
    margin-top: 0 !important;
  }

  .depoimento__topo { margin-bottom: .6rem; padding-inline: .2rem; }
  /* Compacto, para não puxar a altura do carrossel muito acima
     da altura dos prints. */
  .depoimento--convite {
    flex: 0 0 min(86%, 360px);
    padding: 1.3rem 1.15rem;
    gap: .7rem;
  }

  .depoimento--convite strong { font-size: 1.08rem; }
  .depoimento--convite p { font-size: .82rem; line-height: 1.45; }
  .depoimento--convite .btn { min-height: 46px; padding: .75rem 1.2rem; font-size: .74rem; }

  .inverno__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inverno__faixa { gap: 1.5rem 2rem; }

  .insta__vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .preco-card { padding: 1.9rem 1.25rem; }
  .preco-card__pagamentos { text-align: left; }

  .rodape__topo { grid-template-columns: minmax(0, 1fr); }
  .rodape__base { flex-direction: column; align-items: flex-start; gap: .9rem; }

  .final__dados { gap: 1.3rem; }
  .final__divisor { display: none; }
}

/* Sem o grid lado a lado, o post do Instagram volta ao centro */
@media (max-width: 459px) {
  .insta__destaque { max-width: 230px; margin-inline: auto; }
}

/* ============================================================
   MOBILE (≤520px)
   ============================================================ */
@media (max-width: 520px) {
  /* Topo mais compacto na vertical, para o preço e os botões
     continuarem visíveis sem precisar rolar muito. */
  .hero { padding-top: 92px; }
  .hero__marca { margin-bottom: .85rem; }
  .hero__titulo { letter-spacing: -.035em; margin-bottom: .4rem; }
  .hero__titulo span { font-size: .3em; margin-top: .4rem; }
  /* A folga abaixo do parágrafo é a janela por onde os rostos
     aparecem, entre o fim do texto e o começo dos chips. */
  .hero__texto { font-size: .95rem; line-height: 1.5; margin-bottom: 3.6rem; }
  .hero__chips { margin-bottom: 1rem; }
  .hero__preco { margin-bottom: 1.25rem; }

  .menu { padding-block: .85rem; }
  .menu__marca-nome { font-size: 1.12rem; }
  .menu__marca-tag { letter-spacing: .26em; font-size: .54rem; }
  .menu.is-fixo { padding-block: .62rem; }

  .completa__grade { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .completa .card { padding: 1.15rem .95rem; }
  .completa .card__icone { width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: .75rem; }
  .completa .card__titulo { font-size: .9rem; }
  .completa .card__texto { font-size: .8rem; line-height: 1.5; }

  .bloco-incluso { padding: 1.35rem 1.15rem; }
  .incluso__nota { padding: 1rem 1.15rem; font-size: .84rem; }

  .resumo__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo__item { padding: 1.05rem .9rem; }
  .resumo__valor { font-size: .98rem; }

  .inverno__galeria { gap: .5rem; }
  .insta__vitrine { gap: .4rem; }

  .barra-mobile { padding-inline: var(--gutter); gap: .7rem; }
  .barra-mobile__valor { font-size: 1.05rem; }
  .barra-mobile .btn { padding: .75rem .95rem; font-size: .66rem; min-height: 46px; }

  .faq__pergunta { padding-block: 1.15rem; gap: .9rem; }
  .faq__sinal { width: 30px; height: 30px; }
  .faq__resposta p { padding-right: 0; }
  .faq__ajuda { padding: 1.25rem 1.15rem; }

  .card, .bloco-incluso { border-radius: var(--r-sm); }

  .rodape__marca { font-size: 2.1rem; }
}

/* ============================================================
   MOBILE ESTREITO (≤400px)
   Faixa do iPhone SE e Androids de entrada.
   ============================================================ */
@media (max-width: 400px) {
  .completa__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .completa .card { padding: 1rem .8rem; }
  .completa .card__titulo { font-size: .85rem; }
  .completa .card__texto { font-size: .76rem; }

  .resumo__grade { grid-template-columns: minmax(0, 1fr); }

  /* Em duas colunas a foto do hotel ficaria com ~126px e não
     daria para ver o quarto nem a piscina. Uma por linha resolve. */
  .hospedagem__galeria { grid-template-columns: minmax(0, 1fr); }

  .agencia__flutuante { max-width: 72%; }

  .hospedagem__lista { gap: .7rem; }
  .hospedagem__item { padding: .8rem .95rem; font-size: .85rem; }

  .barra-mobile__rotulo { display: none; }
  .barra-mobile .btn { font-size: .62rem; padding: .75rem .8rem; }

  .inverno__faixa { gap: 1.2rem 1.5rem; }
  .inverno__stat strong { font-size: 1.6rem; }

  .emocao__aspas { font-size: 3.8rem; }

  .preco-card { padding: 1.6rem 1.1rem; border-radius: var(--r-lg); }
  .pgto { padding: .85rem 1rem; }
}

/* ============ IMPRESSÃO ============ */
@media print {
  .menu, .drawer, .wa-flutuante, .barra-mobile, .hero__scroll, .hero__neve { display: none !important; }
  body { padding-bottom: 0; }
  .secao--escura, .inverno, .investimento, .final, .rodape { background: var(--branco) !important; color: var(--preto) !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}