/* ============================================================================
   Páginas próprias do tenant: a home e o "Sobre Nós" (Docs/spec-site-gti.md, D13/74)
   ============================================================================
   Carregado só por essas duas páginas, pelo ViewData["CssExtra"] da casca do tenant.
   Arquivo novo de propósito: site.css não tem versão na URL, e uma regra nova ali
   chegaria a navegadores com a cópia antiga em cache.

   SÓ VARIÁVEIS DA PALETA, nenhuma cor escrita por extenso: a paleta é por família e
   matiz (paleta-tenant.css), e outro tenant não pode herdar as cores da maquete da
   GTi. O controle G8 de Docs/controles/site-gti.tsv prende isso.

   Prefixo tp- em tudo, escopado sob a raiz de cada página. Classes genéricas já
   existentes (botao, section-eyebrow) são só usadas, nunca redefinidas fora do escopo.
   Medidas de referência: Docs/spec-site-gti.md, EMENDA-74A-B, B3.
   ============================================================================ */

.pagina-inicio-tenant,
.pagina-sobre-tenant {
  --tp-raio: 20px;
  --tp-espaco: clamp(3.5rem, 7vw, 6rem);
}

/* ---- Estrutura comum ---- */
.pagina-inicio-tenant .tp-secao,
.pagina-sobre-tenant .tp-secao {
  padding-block: var(--tp-espaco);
}

/* Seção que ocupa a largura da janela, mesmo gesto de .cruz-fullbleed: o <main> da casca
   limita a largura, e o body já corta o que passa de lado. */
.pagina-inicio-tenant .tp-largura-total,
.pagina-sobre-tenant .tp-largura-total {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.pagina-inicio-tenant .tp-fundo-suave,
.pagina-sobre-tenant .tp-fundo-suave {
  background: var(--bg-soft);
}

.pagina-inicio-tenant h1,
.pagina-sobre-tenant h1,
.pagina-inicio-tenant h2,
.pagina-sobre-tenant h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.15;
}

.pagina-inicio-tenant h2,
.pagina-sobre-tenant h2 {
  font-size: clamp(26px, 3.4vw, 36px);
}

.pagina-inicio-tenant h3,
.pagina-sobre-tenant h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  margin: 0 0 8px;
}

.pagina-inicio-tenant .tp-texto,
.pagina-sobre-tenant .tp-texto {
  color: var(--ink-body);
  line-height: 1.7;
}

.pagina-inicio-tenant .tp-texto p,
.pagina-sobre-tenant .tp-texto p {
  margin: 0 0 12px;
}

.pagina-inicio-tenant .tp-texto a,
.pagina-sobre-tenant .tp-texto a {
  color: var(--cor-destaque);
  text-decoration: underline;
}

.pagina-inicio-tenant .tp-cabeca,
.pagina-sobre-tenant .tp-cabeca {
  margin-bottom: 32px;
}

/* ---- Início: foto com degradê e texto ---- */
.pagina-inicio-tenant .tp-inicio {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.pagina-inicio-tenant .tp-inicio picture,
.pagina-inicio-tenant .tp-inicio-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pagina-inicio-tenant .tp-inicio-foto {
  object-fit: cover;
}

/* Quem garante o contraste é o degradê, não a cor do texto: ele parte do próprio fundo
   da paleta, então vale para qualquer família e matiz.
   Recalibrado com a coluna de texto mais estreita: ela agora termina perto da
   metade da janela em qualquer largura — a 1440px vai de 10,6% a 49,4%, a 1920px
   de 20,4% a 49,6%. Força cheia sob a coluna, queda rápida depois dela, e o lado
   direito praticamente limpo aos 66%. O degradê anterior ainda cobria um quarto
   aos 75%, e era isso que embaçava os fogos. */
.pagina-inicio-tenant .tp-inicio-degrade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 90%, transparent) 32%,
    color-mix(in srgb, var(--bg) 62%, transparent) 50%,
    color-mix(in srgb, var(--bg) 14%, transparent) 66%,
    transparent 80%);
}

.pagina-inicio-tenant .tp-inicio-conteudo {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 32px;
}

.pagina-inicio-tenant .tp-inicio-conteudo > * {
  max-width: 560px;
}

/* Mesma sombra de duas camadas do topo com foto (site.css), pelo mesmo motivo e
   pela mesma técnica: sai de var(--bg) por color-mix, então acompanha a família
   da paleta em vez de escurecer com cor fixa. */
.pagina-inicio-tenant .tp-inicio h1,
.pagina-inicio-tenant .tp-inicio .tp-texto {
  text-shadow: 0 1px 2px color-mix(in srgb, var(--bg) 72%, transparent),
               0 0 16px color-mix(in srgb, var(--bg) 52%, transparent);
}

.pagina-inicio-tenant .tp-inicio h1 {
  font-size: clamp(34px, 5.2vw, 58px);
}

.pagina-inicio-tenant .tp-inicio .tp-texto {
  font-size: 18px;
  color: var(--ink);
}

.pagina-inicio-tenant .tp-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.pagina-inicio-tenant .tp-botoes .botao {
  border-radius: 999px;
}

.pagina-inicio-tenant .tp-botao-secundario {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--cor-destaque);
}

/* ---- Serviços ---- */
.pagina-inicio-tenant .tp-cabeca-dupla {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  flex-wrap: wrap;
}

.pagina-inicio-tenant .tp-cabeca-dupla h2 {
  margin-bottom: 0;
}

.pagina-inicio-tenant .tp-subtitulo {
  max-width: 420px;
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.6;
}

.pagina-inicio-tenant .tp-cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.pagina-inicio-tenant .tp-cartao {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--tp-raio);
  overflow: hidden;
  color: var(--ink);
  transition: border-color .2s ease, transform .2s ease;
}

.pagina-inicio-tenant .tp-cartao:hover {
  border-color: var(--cor-destaque);
  transform: translateY(-3px);
}

.pagina-inicio-tenant .tp-cartao img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.pagina-inicio-tenant .tp-cartao-texto {
  padding: 20px 22px 24px;
}

.pagina-inicio-tenant .tp-cartao-texto p {
  margin: 0;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ---- Destaque de cruzeiros ---- */
.pagina-inicio-tenant .tp-destaque {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.pagina-inicio-tenant .tp-destaque-foto {
  width: 100%;
  aspect-ratio: 640 / 460;
  object-fit: cover;
  border-radius: var(--tp-raio);
  display: block;
}

.pagina-inicio-tenant .tp-destaque-texto .botao {
  margin-top: 12px;
  border-radius: 999px;
}

/* ---- Prova: prosa e números (_ProvaTenant.cshtml) ---- */
.pagina-inicio-tenant .tp-prova-prosa,
.pagina-sobre-tenant .tp-prova-prosa {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 24px 64px;
  margin-bottom: 48px;
}

.pagina-inicio-tenant .tp-prova-prosa h3,
.pagina-sobre-tenant .tp-prova-prosa h3 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
}

.pagina-inicio-tenant .tp-numeros,
.pagina-sobre-tenant .tp-numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.pagina-inicio-tenant .tp-numero,
.pagina-sobre-tenant .tp-numero {
  border-top: 2px solid var(--cor-destaque);
  padding-top: 18px;
}

.pagina-inicio-tenant .tp-numero strong,
.pagina-sobre-tenant .tp-numero strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(36px, 4.6vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--cor-destaque);
  margin-bottom: 8px;
}

.pagina-inicio-tenant .tp-numero-legenda,
.pagina-sobre-tenant .tp-numero-legenda {
  color: var(--ink-muted);
  line-height: 1.6;
}

.pagina-inicio-tenant .tp-numero-legenda p,
.pagina-sobre-tenant .tp-numero-legenda p {
  margin: 0;
}

.pagina-inicio-tenant .tp-link-mais {
  margin: 36px 0 0;
}

.pagina-inicio-tenant .tp-link-mais a {
  color: var(--cor-destaque);
  font-weight: 600;
}

/* ---- Como a sua viagem acontece ---- */
.pagina-inicio-tenant .tp-passos-moldura {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.pagina-inicio-tenant .tp-passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.pagina-inicio-tenant .tp-passo {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--tp-raio);
  padding: 28px;
}

.pagina-inicio-tenant .tp-passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--cor-destaque);
  color: var(--cor-destaque);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  margin-bottom: 16px;
}

/* ---- Fechamento ---- */
.pagina-inicio-tenant .tp-fechamento,
.pagina-sobre-tenant .tp-fechamento {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 400px);
  justify-content: space-between;
  gap: 32px 64px;
  align-items: center;
}

/* Os contatos do tenant (_ContatosTenant) já têm estilo próprio em site.css, centrado para a
   home antiga; aqui ficam alinhados à coluna. */
.pagina-inicio-tenant .tp-fechamento-contatos .tenant-contatos,
.pagina-sobre-tenant .tp-fechamento-contatos .tenant-contatos {
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  margin: 0;
}

/* ---- Sobre Nós ---- */
/* O topo hospeda foto — o papel mora em site.css — e a seção é faixa de largura
   inteira. O recuo e a largura máxima moram no invólucro interno: na seção, a
   foto pararia na coluna em vez de atravessar a faixa. O invólucro repete a
   moldura da casca, e a medida de LEITURA do texto vem do papel, uma vez, para
   todos os topos com foto — não é declarada aqui de propósito, senão haveria
   duas medidas para a mesma coisa e a próxima mudança acertaria só uma. */
.pagina-sobre-tenant .tp-sobre-hero {
  padding-block: var(--tp-espaco) calc(var(--tp-espaco) / 2);
}

.pagina-sobre-tenant .tp-sobre-hero-inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 32px;
}

.pagina-sobre-tenant .tp-sobre-hero h1 {
  font-size: clamp(34px, 5vw, 54px);
}

.pagina-sobre-tenant .tp-sobre-hero .tp-texto {
  font-size: 18px;
}

.pagina-sobre-tenant .tp-sobre-bloco {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 16px 64px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}

.pagina-sobre-tenant .tp-sobre-bloco h2 {
  font-size: clamp(24px, 3vw, 32px);
}

.pagina-sobre-tenant .tp-texto ul {
  margin: 0;
  padding-left: 20px;
}

.pagina-sobre-tenant .tp-texto li {
  margin-bottom: 6px;
}

/* ---- Celular ---- */
@media (max-width: 900px) {
  .pagina-inicio-tenant .tp-cartoes,
  .pagina-inicio-tenant .tp-passos,
  .pagina-inicio-tenant .tp-numeros,
  .pagina-sobre-tenant .tp-numeros,
  .pagina-inicio-tenant .tp-destaque,
  .pagina-inicio-tenant .tp-prova-prosa,
  .pagina-sobre-tenant .tp-prova-prosa,
  .pagina-inicio-tenant .tp-fechamento,
  .pagina-sobre-tenant .tp-fechamento,
  .pagina-sobre-tenant .tp-sobre-bloco {
    grid-template-columns: minmax(0, 1fr);
  }

  .pagina-inicio-tenant .tp-destaque {
    gap: 28px;
  }
}

@media (max-width: 700px) {
  .pagina-inicio-tenant .tp-inicio {
    min-height: 680px;
    align-items: flex-end;
  }

  .pagina-inicio-tenant .tp-inicio-degrade {
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--bg) 45%, transparent) 35%,
      var(--bg) 78%);
  }

  .pagina-inicio-tenant .tp-inicio-conteudo,
  .pagina-inicio-tenant .tp-destaque,
  .pagina-inicio-tenant .tp-passos-moldura {
    padding-left: 16px;
    padding-right: 16px;
  }

  .pagina-inicio-tenant .tp-botoes {
    flex-direction: column;
  }

  .pagina-inicio-tenant .tp-botoes .botao {
    width: 100%;
    text-align: center;
  }

  .pagina-inicio-tenant .tp-cartao img {
    height: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pagina-inicio-tenant .tp-cartao {
    transition: none;
  }

  .pagina-inicio-tenant .tp-cartao:hover {
    transform: none;
  }
}

/* ---- Formulario de mensagem do Sobre Nos (leva 86-A, D7) ---- */
/* Escopado sob a classe da pagina, com o prefixo da area, como manda a regra de front.
   SEM COR LITERAL: a paleta do tenant vem das variaveis, e um guarda deste arquivo reprova
   hexadecimal, rgb, hsl com numero e branco ou preto por nome. O formulario herda o estilo
   generico de .formulario de site.css e so corrige o que a coluna estreita do fechamento pede. */
.pagina-sobre-tenant .tp-form-mensagem {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.pagina-sobre-tenant .tp-form-mensagem h2 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--ink);
}

/* A coluna do fechamento e estreita: o formulario ocupa a largura dela, e nao os 520px que
   .formulario declara para pagina larga. */
.pagina-sobre-tenant .tp-form-mensagem .formulario {
  max-width: 100%;
}

.pagina-sobre-tenant .tp-form-mensagem .formulario textarea {
  resize: vertical;
}