/* Página /aluguel-de-van-fortaleza (estrutura da ÍRIS, 23/10/2026).
   Carregado DEPOIS de home.css e transfer-fortaleza.css. Tudo sob body.pagina-van: home e aeroporto não mudam. */

/* Abertura (referência do dono, 23/10): foto da van como FUNDO de ponta a ponta, texto à esquerda por cima,
   degradê petróleo forte atrás do texto e suave para a direita. Usa o .abertura__fundo da home (absoluto, cover). */
/* Sem zoom em telas largas (pedido do dono, 23/10): a foto não passa de 1458 px de largura (altura máx. 820),
   fica encostada à direita e a borda esquerda se desfaz no petróleo, atrás do texto. Altura acompanha a foto (16:9). */
.pagina-van .abertura { min-height: max(640px, min(56.25vw, 820px)); }
@media (min-width: 768px) {
  .pagina-van .abertura__fundo {
    left: auto; right: 0; width: min(100%, 1458px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
}
/* A partir de 1100 px a foto ocupa 78% da largura, à direita: o grupo sai de trás do texto. Altura segue a foto. */
@media (min-width: 1100px) {
  .pagina-van .abertura { min-height: max(640px, min(43.9vw, 820px)); }
  .pagina-van .abertura__fundo { width: min(78vw, 1458px); }
}
.pagina-van .abertura__fundo img { object-position: 50% 55%; }
.pagina-van .abertura::before {
  background:
    linear-gradient(180deg, rgba(7, 30, 32, .7) 0%, rgba(7, 30, 32, 0) 18%),
    linear-gradient(90deg, rgba(7, 30, 32, .94) 0%, rgba(7, 30, 32, .84) 22%, rgba(7, 30, 32, .42) 36%, rgba(7, 30, 32, .1) 48%, rgba(7, 30, 32, 0) 58%);
}
.pagina-van .abertura__interna { display: flex; align-items: flex-start; }
.pagina-van .abertura__conteudo { max-width: 500px; }
.pagina-van .tv-selo-ilustrativa {
  position: absolute; right: 16px; bottom: 16px; z-index: 1; margin: 0; padding: 4px 10px; border-radius: 999px;
  background: rgba(7, 30, 32, .72); color: var(--cinza-claro); font-size: 14px; line-height: 20px;
}
/* Celular: a foto também é fundo, ancorada embaixo; o texto fica no topo sobre o petróleo que se desfaz na foto,
   então os rostos e a van aparecem abaixo do botão, sem texto por cima. */
@media (max-width: 767px) {
  .pagina-van .abertura { min-height: 0; }
  .pagina-van .abertura__fundo { top: auto; height: 64%; }
  .pagina-van .abertura__fundo img { object-position: 50% 60%; }
  .pagina-van .abertura::before {
    background: linear-gradient(180deg, #071E20 0%, #071E20 34%, rgba(7, 30, 32, .75) 44%, rgba(7, 30, 32, .15) 58%, rgba(7, 30, 32, 0) 66%);
  }
  .pagina-van .abertura__interna { padding-bottom: min(108vw, 420px); }
  .pagina-van .tv-selo-ilustrativa { right: 12px; bottom: 12px; }
}

/* Escolha pelo tamanho do grupo: 3 cards de veículo (Master, Sprinter, Ônibus) */
.pagina-van .tv-escolha {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.pagina-van .tv-escolha .card-vidro__num,
.pagina-van .tv-usos .card-vidro__num { visibility: hidden; }
@media (max-width: 999px) { .pagina-van .tv-escolha { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .pagina-van .tv-escolha .veiculo__foto { aspect-ratio: 16 / 10; }
  .pagina-van .tv-escolha .tv-foto-desktop { display: none; }
}

/* Revisão da VERA (23/10): corpo em 16 px; botões dos 3 cards na mesma linha; no tablet a foto em 16:9 encurta cada card. */
.pagina-van .tv-escolha .veiculo__texto,
.pagina-van .tf-nota { font-size: 16px; line-height: 25px; }
.pagina-van .tv-escolha .veiculo__texto { margin-bottom: auto; }
.pagina-van .tv-escolha .card-vidro__num { margin-top: 0; }
@media (min-width: 768px) and (max-width: 999px) { .pagina-van .tv-escolha .veiculo__foto { aspect-ratio: 16 / 9; } }

/* Usos: 4 itens curtos */
.pagina-van .tv-usos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 999px) { .pagina-van .tv-usos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .pagina-van .tv-usos { grid-template-columns: 1fr; } }

/* Topo da home nesta página (decisão do dono, 23/10): desfaz o "logo + Ligar" das páginas de anúncio. */
.pagina-van .topo__interna { justify-content: normal; }
/* Painel Contato (vem da home): o × não encolhe quando o título quebra em 2 linhas. */
.pagina-van .painel-contato__fechar { flex: 0 0 44px; }

/* Rodapé no modelo do dono (23/10): marca · Navegue · card Fale com a Fortal; base com Voltar ao topo. */
.pagina-van .te-rodape { padding: 0; border-top: 1px solid rgba(8, 170, 167, .35); }
.pagina-van .te-rodape__grade {
  max-width: 1280px; margin: 0 auto; padding: 56px var(--margem);
  display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1.15fr); align-items: start;
}
.pagina-van .te-rodape .marca img { width: 220px; height: auto; }
.pagina-van .te-rodape__frase { margin: 26px 0 0; max-width: 30ch; font-size: 20px; line-height: 30px; color: var(--branco); }
.pagina-van .te-rodape__selo {
  display: inline-flex; align-items: center; gap: 12px; margin: 26px 0 0; padding: 10px 22px 10px 16px;
  border: 1px solid rgba(8, 170, 167, .55); border-radius: 999px; font-size: 16px; line-height: 22px; color: var(--branco);
}
.pagina-van .te-rodape__selo span { width: 12px; height: 12px; border-radius: 50%; background: var(--aqua); flex: none; }
.pagina-van .te-rodape__nav { align-self: stretch; margin: 0 48px; padding: 4px 56px; border-left: 1px solid rgba(255, 255, 255, .1); border-right: 1px solid rgba(255, 255, 255, .1); }
.pagina-van .te-rodape__rotulo { margin: 0 0 14px; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--aqua-claro); }
.pagina-van .te-rodape__nav ul { list-style: none; margin: 0; padding: 0; }
.pagina-van .te-rodape__nav a { display: inline-flex; align-items: center; min-height: 52px; font-size: 19px; color: var(--branco); text-decoration: none; }
.pagina-van .te-rodape__nav a:hover { color: var(--aqua-claro); }
.pagina-van .te-rodape__contato {
  padding: 26px 28px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px;
  background: rgba(255, 255, 255, .03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pagina-van .te-rodape__botao {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 18px 10px 20px; border-radius: 16px;
  background: linear-gradient(90deg, var(--aqua), #19c1bd); color: var(--branco); font-size: 17px; font-weight: 600; text-decoration: none;
}
.pagina-van .te-rodape__botao > svg:first-child { width: 26px; height: 26px; flex: none; }
.pagina-van .te-rodape__botao span { flex: 1; }
.pagina-van .te-rodape__chevron { width: 20px; height: 20px; flex: none; }
.pagina-van .te-rodape__botao:hover { filter: brightness(1.06); }
.pagina-van .te-rodape__canais { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.pagina-van .te-rodape__canais a { display: flex; align-items: center; gap: 16px; min-height: 56px; color: var(--branco); text-decoration: none; font-size: 17px; line-height: 22px; overflow-wrap: anywhere; }
.pagina-van .te-rodape__canais small { display: block; font-size: 14px; line-height: 18px; color: var(--cinza-claro); }
.pagina-van .te-rodape__canais a:hover { color: var(--aqua-claro); }
.pagina-van .te-rodape__icone { display: inline-flex; width: 32px; height: 32px; flex: none; color: var(--aqua-claro); }
.pagina-van .te-rodape__icone svg { width: 100%; height: 100%; }
.pagina-van .te-rodape__base {
  max-width: none; margin: 0; padding: 18px max(var(--margem), calc((100% - 1280px) / 2 + var(--margem)));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid rgba(8, 170, 167, .35); font-size: 15px; color: var(--cinza-claro);
}
.pagina-van .te-rodape__base p { margin: 0; }
.pagina-van .te-rodape__topo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cinza-claro); text-decoration: none; }
.pagina-van .te-rodape__topo svg { width: 22px; height: 22px; color: var(--aqua-claro); }
.pagina-van .te-rodape__topo:hover { color: var(--branco); }
.pagina-van .te-rodape :where(a):focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 8px; }
@media (max-width: 1099px) {
  .pagina-van .te-rodape__grade { grid-template-columns: 1fr 1fr; gap: 40px; }
  .pagina-van .te-rodape__nav { margin: 0; padding: 0 0 0 40px; border-right: 0; }
  .pagina-van .te-rodape__contato { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .pagina-van .te-rodape__grade { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px; }
  .pagina-van .te-rodape .marca img { width: 180px; }
  .pagina-van .te-rodape__frase { font-size: 18px; line-height: 27px; }
  .pagina-van .te-rodape__nav { padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .pagina-van .te-rodape__contato { padding: 22px 18px; }
  .pagina-van .te-rodape__botao { font-size: 16px; }
  .pagina-van .te-rodape__base { padding: 16px 20px calc(16px + 68px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
}

/* Guia rápido: 4 blocos de texto, 2 colunas no computador. */
.pagina-van .te-guia__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; margin-top: 8px; }
.pagina-van .te-guia__bloco h3 { margin: 0 0 12px; font-size: 22px; line-height: 30px; color: var(--branco); }
.pagina-van .te-guia__bloco p { margin: 0; max-width: 62ch; font-size: 17px; line-height: 28px; color: var(--cinza-claro); }
.pagina-van .te-guia__bloco a { color: var(--aqua-claro); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) { .pagina-van .te-guia__grade { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 767px) { .pagina-van .te-guia__bloco h3 { font-size: 20px; line-height: 27px; } .pagina-van .te-guia__bloco p { font-size: 16px; line-height: 26px; } }