@charset "UTF-8";
/*                                                        
   Viagem 5 Estrelas - folha de estilo
   Clone do layout original, paleta clara (creme + dourado).
   Tipografia e cores seguem [Identidade]/design-guide.md
                                                           */

@font-face{ font-family:"Glacial"; src:url("GlacialIndifference-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Glacial"; src:url("GlacialIndifference-Italic.otf")  format("opentype"); font-weight:400; font-style:italic;  font-display:swap; }
@font-face{ font-family:"Glacial"; src:url("GlacialIndifference-Bold.otf")    format("opentype"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --dourado:#BA9F68;
  --dourado-esc:#a68d59;
  --creme:#FDFBF7;
  --creme-fundo:#F7F3EC;
  --texto:#3a3a3a;
  --texto-suave:#6b6b6b;
  --largura:1180px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; max-width:100%; }

body{
  /* Se a Glacial falhar (rede lenta, MIME errado no servidor, navegador
     restritivo), o texto cai nas alternativas geometricas mais proximas em
     largura. Sem isso, o fallback tem metrica muito diferente e o layout
     desmonta - foi o que aconteceu no navegador interno do Instagram. */
  font-family:"Glacial","Century Gothic","Futura","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  color:var(--texto); background:#fff;
  line-height:1.65; font-size:1.0625rem;
  -webkit-text-stroke:.15px currentColor;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ line-height:1.2; font-weight:700; overflow-wrap:break-word; }
p{ overflow-wrap:break-word; }

.container{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }

.pular{ position:absolute; left:-9999px; background:var(--dourado); color:#fff; padding:.75rem 1.25rem; z-index:999; }
.pular:focus{ left:1rem; top:1rem; }

/*           Botoes           */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem; text-decoration:none;
  padding:.85rem 2rem; border-radius:999px;
  background:var(--dourado); color:#fff;
  transition:background .2s ease, transform .15s ease;
}
.btn:hover{ background:var(--dourado-esc); transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--dourado); outline-offset:3px; }
.btn--grande{ padding:1rem 2.6rem; font-size:1.05rem; }
/* Icone do WhatsApp em branco, dentro do botao */
.btn__ico{ width:1.15em; height:1.15em; fill:#fff; margin-right:.6rem; flex:none; }

/*           Topo           */
.topo{
  position:absolute; inset:0 0 auto; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem clamp(1.25rem,4vw,2.5rem);
}
.topo__logo img{ height:42px; width:auto; }
.topo__nav{ margin-left:auto; margin-right:1.6rem; }
.topo__nav a{
  color:#fff; text-decoration:none; font-size:.98rem;
  padding-bottom:3px; border-bottom:1.5px solid transparent;
}
.topo__nav a:hover{ border-bottom-color:var(--dourado); }
.topo__social{ display:flex; gap:1rem; }
.topo__social svg{ width:22px; height:22px; fill:#fff; color:#fff; }

/*           Hero           */
.hero{
  position:relative; min-height:min(86vh,700px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden;
  /* imagem de fundo como base: se o video demorar ou falhar, nao fica tela preta */
  background:#0d1512 url("hero-poster.jpg") center/cover no-repeat;
}
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__veu{ position:absolute; inset:0; z-index:1; background:rgba(10,18,15,.5); }
.hero__conteudo{
  position:relative; z-index:2; color:#fff;
  max-width:820px; padding:5.5rem clamp(1.25rem,4vw,2.5rem) 3.5rem;
}
.hero h1{ font-size:clamp(1.85rem,4.4vw,3.1rem); letter-spacing:-.01em; }
.hero__sub{
  font-size:clamp(1rem,1.6vw,1.15rem); color:rgba(255,255,255,.9);
  margin:1.3rem auto 2.2rem; max-width:60ch;
}

/*           Card de diferenciais           */
.diferenciais{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2rem;
  background:#fff; border-radius:18px; box-shadow:0 14px 40px rgba(0,0,0,.09);
  padding:2.6rem 2.4rem; margin-top:-4.5rem; position:relative; z-index:5;
}
.dif{ text-align:center; }
.dif svg{ width:30px; height:30px; fill:var(--dourado); margin:0 auto .9rem; }
.dif h3{ color:var(--dourado); font-size:1.02rem; margin-bottom:.5rem; }
.dif p{ font-size:.93rem; color:var(--texto-suave); line-height:1.55; }

/* Controles do carrossel - escondidos no desktop, onde tudo aparece junto */
.carrossel-nav{ display:none; }

/*           Secoes           */
.secao{ padding:clamp(2.6rem,4.5vw,3.8rem) 0; }
/* A pagina inteira e branca. O rodape e o unico bloco colorido. */
.titulo-centro{ text-align:center; color:var(--dourado); font-size:clamp(1.55rem,3vw,2.05rem); }
.sub-centro{ text-align:center; color:var(--texto-suave); margin:.6rem auto 2.2rem; max-width:56ch; }

/*           Cards de servico           */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:2rem; }
.card{ text-align:center; }
/* Quadrada com canto arredondado, como no layout original.
   height:auto e obrigatorio: sem ele o atributo height="768" do HTML
   trava a altura e a foto estica na vertical. */
.card img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:18px; margin-bottom:1.3rem;
}
/* Imagem que nao pode ser cortada (o mapa de parcerias perderia as logos
   das bordas): cabe inteira, em proporcao mais larga e menos alta. */
.card img.inteira,
.bloco__foto img.inteira{
  object-fit:contain; background:#fff; aspect-ratio:16/11;
  padding:.4rem; border:1px solid #eee7da;
}

/* Card que so existe no celular (as Parcerias entram no carrossel por la) */
.so-mobile{ display:none; }
.card h3{ color:var(--dourado); font-size:1.1rem; margin-bottom:.6rem; }
.card p{ color:var(--texto-suave); font-size:.97rem; }

/*           Blocos foto + texto          
   Os tres blocos usam exatamente o mesmo tratamento: mesma proporcao de foto,
   mesmo respiro, mesmo canto arredondado. Antes cada um tinha o seu, e a
   diferenca aparecia ao rolar a pagina. */
.bloco{
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  max-width:1010px; margin-inline:auto;
  padding:clamp(1.4rem,2.6vw,2rem) clamp(1.25rem,4vw,2.5rem);
}

.bloco__foto{ padding:clamp(.8rem,1.6vw,1.4rem); }
.bloco__foto img{
  width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; border-radius:16px;
  /* recorte a partir do topo: em foto com pessoa, cortar a cabeca e o pior corte */
  object-position:center top;
}
/* o casal fica no terco inferior desta foto: puxa o recorte para baixo */
.bloco__foto--redonda img{ object-position:center 62%; }

.bloco__texto{ padding:clamp(1rem,2.2vw,1.8rem); }
.bloco__texto h2{
  color:var(--dourado); font-size:clamp(1.45rem,2.5vw,1.85rem); margin-bottom:.9rem;
  padding-bottom:.8rem; border-bottom:2px solid var(--dourado); display:inline-block;
}
.bloco__texto p{ color:var(--texto-suave); margin-top:.8rem; font-size:1rem; }
/* invertido: a foto vai para a direita sem mudar a ordem no HTML */
.bloco--invertido .bloco__foto{ order:2; }

/*           Depoimentos - cores invertidas          
   Fundo dourado da marca com cards brancos. E o unico bloco colorido do miolo,
   e faz a prova social saltar no meio da pagina. */
/* Fundo igual ao restante do site. O destaque vem da sombra dos cards,
   nao de uma faixa colorida. */
#depoimentos .titulo-centro{ font-size:clamp(1.9rem,3.8vw,2.6rem); }
/* filete curto sob o titulo, como no layout antigo */
#depoimentos .titulo-centro::after{
  content:""; display:block; width:72px; height:2px;
  background:var(--dourado); opacity:.6; margin:1rem auto 0;
}

/* espaco no topo para o avatar que sai para fora do card */
.depoimentos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.8rem; padding-top:2.4rem;
}
.depoimento{
  position:relative; background:#fff; border-radius:18px;
  padding:3.2rem 1.6rem 2rem; text-align:center;
  /* sombra em duas camadas: uma difusa que destaca do fundo branco,
     outra curta que assenta o card. Sozinha, uma so some ou fica suja. */
  box-shadow:0 14px 34px rgba(60,45,20,.13), 0 3px 8px rgba(60,45,20,.06);
}
/* avatar sobreposto, metade para fora do card, com anel branco */
.depoimento img{
  position:absolute; top:-32px; left:50%; transform:translateX(-50%);
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:3px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.depoimento blockquote{ color:var(--texto-suave); font-size:.97rem; margin-bottom:1.1rem; }
.depoimento figcaption{ color:var(--dourado-esc); font-weight:700; font-size:.95rem; }

/*           Faixa reserve           */
.faixa-reserva{ display:flex; align-items:center; gap:2rem; flex-wrap:wrap; justify-content:center; }
.faixa-reserva__pill{
  background:var(--dourado); color:#fff; border-radius:12px;
  padding:1.4rem 2rem; flex:1 1 380px;
}
.faixa-reserva__pill strong{ display:block; font-size:1.3rem; margin-bottom:.25rem; }
.faixa-reserva__pill span{ font-size:.95rem; color:rgba(255,255,255,.92); }

/*           Conversa (no lugar do formulario)           */
.conversa{ padding:clamp(2.6rem,4.5vw,3.8rem) 0 clamp(3rem,5vw,4.2rem); text-align:center; }
.conversa h2{ color:var(--dourado); font-size:clamp(1.6rem,3.2vw,2.2rem); }
.conversa p{ color:var(--texto-suave); max-width:58ch; margin:1rem auto 2rem; }
.conversa__nota{ font-size:.92rem; margin-top:1.2rem; }

/* Linha de reforco abaixo do botao: derruba a objecao de "vou ser pressionado".
   Filetes dourados nas laterais dao peso sem virar mais um paragrafo. */
.conversa__selo{
  margin:1.7rem auto 0;
  color:var(--dourado); font-size:1.05rem;
  /* traco fino e kerning levemente aberto: o corpo do site usa peso 700 e um
     reforco de stroke; aqui zeramos os dois para a linha respirar */
  font-weight:400; letter-spacing:.05em; -webkit-text-stroke:0;
}

/*           Rodape          
   Unico bloco colorido da pagina. Tudo centralizado, em camadas:
   marca   contato   registro legal   copyright. */
.rodape{
  background:var(--dourado); color:#fff;
  padding:3.2rem 0 1.5rem; text-align:center;
}
.rodape__logo{ height:58px; width:auto; margin:0 auto 1.1rem; }
.rodape__desc{
  max-width:42ch; margin:0 auto 2.2rem;
  color:rgba(255,255,255,.9); font-size:1rem;
}

.rodape__contatos{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:.8rem 2.4rem; margin-bottom:2.4rem;
}
.rodape__contatos a{
  display:inline-flex; align-items:center; gap:.55rem;
  color:#fff; text-decoration:none; font-size:1rem;
  padding-bottom:2px; border-bottom:1.5px solid transparent;
  transition:border-color .2s ease;
}
.rodape__contatos a:hover{ border-bottom-color:rgba(255,255,255,.75); }
.rodape__contatos svg{ width:19px; height:19px; fill:#fff; color:#fff; flex:none; }

.rodape__registro{
  border-top:1px solid rgba(255,255,255,.28);
  padding-top:2rem; margin-top:.5rem;
}
.rodape__selos{
  height:52px; width:auto; margin:0 auto 1rem;
  background:#fff; border-radius:8px; padding:.45rem .9rem;
}
.rodape__doc{ font-size:.87rem; color:rgba(255,255,255,.85); }

.rodape__fim{
  margin-top:2rem; padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:.84rem; color:rgba(255,255,255,.8);
}

/*           Botao flutuante           */
.zap-flutuante{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:50;
  width:54px; height:54px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25); transition:transform .18s ease;
}
.zap-flutuante:hover{ transform:scale(1.07); }
.zap-flutuante svg{ width:29px; height:29px; fill:#fff; }

/*           Responsivo          
   O celular e o acesso principal. Tudo que existe no desktop existe aqui,
   na mesma ordem: nada e escondido, so reorganizado. */
@media (max-width:860px){
  /* Blocos viram uma coluna, com a FOTO SEMPRE ANTES do texto.
     Sem isso, os blocos invertidos jogavam a foto para depois do texto e a
     ordem ficava diferente da do desktop. */
  .bloco{ grid-template-columns:1fr; padding-block:1.2rem; }
  .bloco--invertido .bloco__foto{ order:-1; }
  .bloco__foto{ padding:0 0 1rem; }
  .bloco__foto img{ aspect-ratio:16/10; }
  .bloco__texto{ padding:0; }

  /*       Carrosseis (diferenciais, servicos e depoimentos)      
     No PC cada um desses blocos e uma linha de colunas. No celular, empilhar
     viraria tres "secoes" gigantes - entao cada bloco vira um carrossel e
     continua sendo uma secao so, igual ao PC. */
  .diferenciais,
  .carrossel-mobile{
    display:flex; gap:.9rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  .diferenciais::-webkit-scrollbar,
  .carrossel-mobile::-webkit-scrollbar{ display:none; }

  .diferenciais{ margin-top:-2rem; padding:1.6rem .9rem; }
  /* o padding de cima da espaco ao avatar que sai do card, senao o
     overflow do carrossel corta a cabeca dele */
  /* A folga em volta nao e decorativa: o trilho tem overflow, e sem ela a
     sombra dos cards (que se espalha ~34px) aparece cortada nas bordas. */
  .carrossel-mobile{ padding:.8rem 1.2rem 2rem; }
  .depoimentos.carrossel-mobile{ padding-top:2.8rem; }

  /* card quase inteiro: o conteudo cabe completo e sobra so uma fresta
     do proximo, o suficiente para indicar que desliza */
  .dif,
  .carrossel-mobile > *{
    flex:0 0 85%;
    scroll-snap-align:center;
  }
  .dif{ padding:.4rem .5rem; }

  /*       Controles: seta   pontos   seta       */
  .carrossel-nav{
    display:flex; align-items:center; justify-content:center;
    gap:1rem; margin-top:1rem;
  }
  .carrossel-seta{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; cursor:pointer;
    border:1.5px solid var(--dourado); background:#fff;
    transition:background .2s, opacity .2s;
  }
  .carrossel-seta svg{ width:20px; height:20px; fill:var(--dourado); }
  .carrossel-seta:active{ background:var(--creme-fundo); }
  .carrossel-seta[disabled]{ opacity:.3; cursor:default; }

  .carrossel-pontos{ display:flex; gap:.5rem; }
  .carrossel-pontos button{
    border:0; background:none; padding:.45rem .25rem; cursor:pointer; line-height:0;
  }
  .carrossel-pontos span{
    display:block; width:7px; height:7px; border-radius:999px;
    background:var(--dourado); opacity:.3; transition:opacity .2s, width .2s;
  }
  .carrossel-pontos .ativo span{ opacity:1; width:20px; }
}

@media (max-width:520px){
  body{ font-size:1.02rem; }
  .btn{ width:100%; }
  /* A pilula usava flex:1 1 380px e, empilhada, esticava num quadradao.
     No celular ela vira um bloco de altura natural, com tudo centralizado. */
  .faixa-reserva{ flex-direction:column; gap:1.2rem; }
  .faixa-reserva__pill{
    flex:0 0 auto; width:100%; padding:1.4rem 1.4rem; text-align:center;
  }
  .faixa-reserva__pill strong{ font-size:1.15rem; }
  .faixa-reserva__pill span{ display:block; max-width:30ch; margin-inline:auto; }

  /* Topo empilhado e centralizado: icones de rede em cima, logo abaixo deles
     e proxima do titulo - a marca fica encostada no que ela apresenta. */
  /* O espaco acima da logo (gap ate os icones) e o de baixo (ate o titulo)
     sao equivalentes, entao ela fica centrada entre os dois. */
  .topo{
    flex-direction:column-reverse; align-items:center; gap:2rem;
    padding-top:2.5rem;
  }
  .topo__logo img{ height:82px; }
  .topo__social{ gap:1.4rem; }
  .topo__social svg{ width:24px; height:24px; }
  /* o link do blog fica no rodape no celular, para nao competir com a logo */
  .topo__nav{ display:none; }

  /* O topo e absoluto: ele flutua sobre o hero e nao empurra nada. Entao o
     espaco dele tem que ser reservado aqui, na mao, e a conta e esta:

       padding-top 2.5rem (40) + icones (29) + gap 2rem (32)
       + logo 82 + padding-bottom 1.2rem (19)  =  ~202px  =  12.6rem

     Estava 9rem (144px), menos que os 202 que o topo ocupa - e por isso a
     logo caia por cima do titulo em todo celular ate 520px. Mexeu na altura
     da logo ou no gap acima? Refaz a conta e ajusta este valor junto. */
  .hero__conteudo{ padding-top:13.5rem; }

  /* No celular, Atendimento Premium e Parcerias viram cards do carrossel,
     entao as secoes grandes deles somem daqui. */
  .so-mobile{ display:block; }
  #parcerias,
  #atendimento{ display:none; }

  /* No carrossel todos os cards precisam da mesma caixa de imagem, senao
     o de Parcerias (que e panoramico) desalinha dos demais. */
  .card img.inteira{ aspect-ratio:1/1; padding:.8rem; }
  .carrossel-mobile > .card{ display:flex; flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .btn:hover,.zap-flutuante:hover{ transform:none; }
  /* O video continua: e uma tomada aerea lenta, nao animacao agressiva.
     Esconde-lo aqui fazia o hero virar imagem parada para quem tem
     "reduzir movimento" ligado no sistema - inclusive no Windows. */
}