/* ============================================================
   VIP RECEPTIVO · ajustes exclusivos da variacao index2

   Esta folha carrega DEPOIS da styles.css e so na index2.html. A styles.css
   nao foi tocada: a index.html continua exatamente como foi aprovada.

   Tudo aqui e acrescimo. Nada sobrescreve regra da pagina principal, porque a
   pagina principal nem carrega este arquivo.
   ============================================================ */

/* ---------- 1. Barra do menu mais alta, para a logo crescer ----------
   A logo passa de 46px para 60px de altura. A barra acompanha, de 68px para
   cerca de 82px. O respiro extra vem do padding, nao de uma altura fixa, para
   o cabecalho continuar se ajustando ao conteudo. */
.topo__logo img { height: 60px; }
.topo__inner { padding-block: 0.85rem; }

/* Em tela baixa o cabecalho nao pode comer a primeira dobra: cresce menos. */
@media (min-width: 900px) and (max-height: 880px) {
  .topo__logo img { height: 52px; }
  .topo__inner { padding-block: 0.6rem; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .topo__logo img { height: 46px; }
}

/* ---------- 2. Marcador do painel de reserva removido ----------
   Nao aparece e nao ocupa altura, mas tem posicao no fluxo. O main.js mede este
   bloco para decidir quando o botao flutuante do WhatsApp precisa sair da frente
   dos botoes do hero. Com display:none a medida vinha zerada e o botao cobria o
   segundo botao do hero no celular. */
.booking__painel--vazio {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- 2b. Apoio de secao sobre fundo escuro ---------- */
.secao-apoio--claro { color: var(--papel-suave); max-width: 46rem; }

/* ---------- 3. Os seis servicos, no lugar do formulario de roteiro ----------
   A caixa era estreita porque abrigava tres linhas de filtro. Agora abriga
   uma grade, entao ocupa a largura do miolo. */
.roteiro .roteiro__caixa { max-width: none; }
.roteiro__apoio {
  color: var(--papel-suave);
  max-width: 44rem;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}

.svc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.svc__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 1.35rem 1.4rem 1.2rem;
  border-radius: var(--raio);
  border: 1px solid var(--linha-clara);
  background: rgba(10, 19, 12, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.svc__item:hover {
  border-color: rgba(123, 201, 67, 0.55);
  background: rgba(10, 19, 12, 0.58);
  transform: translateY(-3px);
}
.svc__item .ic {
  width: 2.4rem; height: 2.4rem;
  padding: 0.55rem;
  border-radius: 13px;
  background: rgba(123, 201, 67, 0.16);
  color: var(--lima);
}
.svc__item h3 { font-size: 1.12rem; line-height: 1.25; }
.svc__item p { font-size: 0.92rem; color: var(--papel-suave); flex: 1; }
.svc__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.35rem;
  font-weight: 650; font-size: 0.9rem;
  color: var(--lima);
  text-decoration: none;
}
.svc__cta .ic { width: 1.05em; height: 1.05em; padding: 0; border-radius: 0; background: none; }
.svc__cta:hover { color: var(--papel); }
.svc__cta:hover .ic--fim { transform: translateX(4px); }

.svc__b2b { margin-top: 1.4rem; }

/* ---------- 3b. Os CTAs que viraram link ----------
   Na index.html eles eram <button>, que nao sublinha. Como <a>, o navegador
   sublinha por padrao e a styles.css so define a cor. Sem isto, catorze CTAs
   aparecem sublinhados so nesta variacao. */
.dcard__cta, .ecard__cta, .rcard__cta, .pslide__cta, .svc__cta { text-decoration: none; }

/* ---------- 4. Nosso Diferencial: oito itens, nao seis ---------- */
@media (min-width: 1024px) {
  .porque__lista--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 5. Frota: quatro fotos reais, nao duas ----------
   O grid original tinha uma linha so. Com quatro fotos vira duas linhas, e as
   etiquetas caem sozinhas na linha implicita de baixo. */
.frota__grade--4 {
  grid-template-rows: repeat(2, clamp(15rem, 24vw, 21rem));
}

@media (max-width: 899px) {
  .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* uma coluna so. grid-auto-rows valeria tambem para a linha das etiquetas,
     que precisa de altura livre: com altura fixa o conteudo vaza para fora da
     grade. Por isso a altura vai nas figuras, nao nas linhas. */
  .frota__grade--4 { grid-template-rows: none; }
  .frota__grade--4 .frota__foto { height: clamp(14rem, 52vw, 20rem); }
}

@media (max-width: 639px) {
  .svc { grid-template-columns: 1fr; }
  .topo__logo img { height: 52px; }
}

/* Celular baixo: a logo maior nao pode empurrar o segundo botao do hero para
   fora da primeira tela. Volta ao tamanho original nessas alturas. */
@media (max-width: 899px) and (max-height: 700px) {
  .topo__logo img { height: 46px; }
  .topo__inner { padding-block: 0.6rem; }
}