/* Página de anúncio /transfer-fortaleza/ (estrutura da ÍRIS, 23/10/2026).
   Carregado DEPOIS de home.css. Tudo aqui fica sob body.pagina-tf: a home não muda. */

/* ---------- Topo enxuto: logo + Ligar, sem menu (página de anúncio sem saída) ---------- */
.pagina-tf .topo__interna { justify-content: space-between; }
.pagina-tf .tf-ligar {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .42);
  background: rgba(7, 30, 32, .35);
  color: var(--branco); font-weight: 600; font-size: 15px; text-decoration: none;
}
.pagina-tf .tf-ligar svg { width: 18px; height: 18px; color: var(--aqua-claro); }
.pagina-tf .tf-ligar:hover { border-color: var(--branco); }

/* ---------- Abertura: promessa curta, CTA na dobra do celular ---------- */
.pagina-tf .abertura__apoio { max-width: 520px; }
@media (max-width: 767px) {
  .pagina-tf .abertura h1 { font-size: 34px; line-height: 40px; }
  .pagina-tf .abertura__apoio { font-size: 17px; line-height: 26px; }
  .pagina-tf .abertura__acoes { margin-top: 22px; }
  .pagina-tf .abertura__acoes .botao { width: 100%; }
  .pagina-tf .abertura__confianca { margin-top: 18px; gap: 6px 16px; font-size: 14px; }
}

/* ---------- Blocos comuns da página ---------- */
.pagina-tf .tf-cabecalho { max-width: 720px; margin-bottom: 32px; }
.pagina-tf .tf-acao { margin-top: 32px; }
@media (max-width: 767px) {
  .pagina-tf .secao { padding: 48px 0; }
  .pagina-tf .tf-cabecalho { margin-bottom: 24px; }
  .pagina-tf .tf-acao .botao { width: 100%; }
}

/* 02 — Os 3 passos da chegada: 3 colunas (a home usa 4) e 1 coluna até 999 px */
.pagina-tf .reservar__passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 999px) { .pagina-tf .reservar__passos { grid-template-columns: 1fr; } }

/* Numeração só onde há sequência (os passos); nos demais blocos o número some e o recorte fica */
.pagina-tf .tf-frota .card-vidro__num,
.pagina-tf .tf-pontos .card-vidro__num { visibility: hidden; }

/* 03 — Foto do encontro no desembarque + dois jeitos de encontro */
.pagina-tf .tf-foto { position: relative; margin: 0 0 24px; }
.pagina-tf .tf-foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--raio); border: 1px solid rgba(255, 255, 255, .1);
}
.pagina-tf .tf-foto figcaption {
  position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px;
  background: rgba(7, 30, 32, .72); color: var(--cinza-claro); font-size: 14px; line-height: 20px;
}
@media (max-width: 767px) { .pagina-tf .tf-foto img { aspect-ratio: 4 / 3; object-position: 55% 50%; } }
.pagina-tf .tf-encontro {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.pagina-tf .tf-nota {
  margin: 20px 0 0; font-size: 15px; line-height: 24px; color: var(--cinza-claro);
}
.pagina-tf .tf-nota strong { color: var(--branco); font-weight: 600; }
@media (max-width: 767px) { .pagina-tf .tf-encontro { grid-template-columns: 1fr; } }

/* 04 — Frota enxuta (sem carrossel) */
.pagina-tf .tf-frota {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.pagina-tf .tf-frota__modelos { margin: 8px 0 0; font-size: 15px; line-height: 24px; color: var(--cinza-claro); }
@media (max-width: 767px) { .pagina-tf .tf-frota { grid-template-columns: 1fr; } }

/* 05 — Destinos em chips (cada chip abre o WhatsApp com o destino) */
.pagina-tf .tf-destinos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.pagina-tf .tf-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid rgba(63, 211, 207, .6);
  background: rgba(16, 52, 56, .6);
  color: var(--branco); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.pagina-tf .tf-chip svg { width: 16px; height: 16px; color: var(--aqua-claro); }
.pagina-tf .tf-chip:hover { border-color: var(--aqua-claro); background: rgba(8, 170, 167, .18); }

/* 06 — Segurança e detalhes */
.pagina-tf .tf-pontos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.pagina-tf .tf-detalhes {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-size: 15px; line-height: 24px; color: var(--cinza-claro);
}
.pagina-tf .tf-detalhes li { display: inline-flex; align-items: center; gap: 8px; }
.pagina-tf .tf-detalhes li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--aqua-claro);
}
@media (max-width: 999px) { .pagina-tf .tf-pontos { grid-template-columns: 1fr; } }

/* 08 — Rodapé mínimo */
.pagina-tf .tf-rodape { padding: 40px 0 32px; background: var(--petroleo); color: var(--cinza-claro); }
.pagina-tf .tf-rodape__interna {
  max-width: var(--largura); margin: 0 auto; padding: 0 var(--margem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.pagina-tf .tf-rodape .marca img { width: 170px; height: auto; }
.pagina-tf .tf-rodape__contatos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; }
.pagina-tf .tf-rodape__contatos a { display: inline-flex; align-items: center; min-height: 44px; color: var(--branco); text-decoration: none; }
/* Foco visível no fundo escuro do rodapé e da barra (o padrão do home.css é escuro) */
.pagina-tf .tf-rodape :where(a):focus-visible,
.pagina-tf .tf-barra :where(a):focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.pagina-tf .tf-rodape__contatos a:hover { color: var(--aqua-claro); }
.pagina-tf .tf-rodape__base { max-width: var(--largura); margin: 20px auto 0; padding: 0 var(--margem); font-size: 14px; }

/* ---------- Barra fixa do celular: WhatsApp + Ligar ----------
   Aparece quando o botão da abertura sai da tela e não some mais (sem JS, fica sempre visível).
   O espaço para ela fica no rodapé, sem faixa clara sobrando no fim da página. */
.pagina-tf .tf-barra { display: none; }
@media (max-width: 767px) {
  .pagina-tf .tf-rodape { padding-bottom: calc(32px + 68px + env(safe-area-inset-bottom)); }
  .pagina-tf .tf-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 2fr 1fr; gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(7, 30, 32, .82);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .12);
    transition: transform .25s ease, visibility .25s;
  }
  .pagina-tf .tf-barra .botao { min-height: 52px; width: 100%; padding: 0 12px; }
  .pagina-tf .tf-barra .tf-ligar { min-height: 52px; justify-content: center; }
  .pagina-tf .tf-barra[data-oculta="true"] { transform: translateY(110%); visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .pagina-tf .tf-barra { transition: none; } }