/* ============================================================================
   SITE 02 · «ORBIT» — PÁGINA CONTACT  ·  escopo `.page-contact` / prefixo `.ct-`
   ----------------------------------------------------------------------------
   Só o que é exclusivo desta página. Tudo o mais vem de tokens.css, base.css e
   components.css. Nenhum hex literal, nenhum `!important`, nenhuma classe de
   outra página.

   MAPA
     01  Hero — foto vertical em arco
     02  Cartão do formulário, selo e foco em anel de órbita
     03  Canais de atendimento
     04  Escritórios — abstração de mapa em SVG, fichas e faixa de dados
     05  Institucional — conversa dentro do mockup de celular
     06  FAQ — coluna de título fixa
     07  Nota final — cartão escuro curvo

   CONTRASTE (medido com a fórmula WCAG 2.1, ver DESIGN-SYSTEM §3)
     · borda de campo e do composer: `--line-strong` 3.52 : 1  (WCAG 1.4.11)
     · `--faint-ink` sobre paper/mist 5.60 / 5.17 : 1
     · `--teal` sobre paper/sky 6.50 / 5.27 : 1 · hover `--teal-deep` 12.91 : 1
     · dentro de `.tone-deep`: `--tint` 10.47 : 1 e `--tint-soft` 7.78 : 1
     · nenhum hover desce o contraste — todos sobem ou o mantêm
   ========================================================================== */


/* ==========================================================================
   §01 · HERO
   ====================================================================== */

/* A foto é 1600×2400 (2/3). Sem teto de largura ela domina o hero inteiro;
   com o teto, encosta na coluna de texto e mantém o arco legível. */
.page-contact .ct-hero__photo {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}

@media (min-width: 900px) {
  .page-contact .ct-hero__photo {
    margin-inline: auto 0;
  }
}

/* Medido em pixel sobre a imagem composta com o véu: o olho em `--tint` ficava
   em 4.37 : 1 na faixa mais clara da foto. Em `--paper` o pior pixel mede
   5.25 : 1 (360px) e 5.62 : 1 (desktop). */
.page-contact .ct-hero__photo .photo__over .eyebrow { color: var(--paper); }

/* Ponto focal — a foto é 2/3 e a caixa também: não há corte, o eixo fica
   declarado só para não herdar um centro acidental se a caixa mudar. */
.page-contact .ct-hero__photo img { object-position: 50% 32%; }


/* ==========================================================================
   §02 · CARTÃO DO FORMULÁRIO
   ====================================================================== */

.page-contact .ct-form-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(var(--s-6), 3vw, var(--s-9));
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

.page-contact .ct-form-card__title { font-size: var(--fs-h3); }

.page-contact .ct-form-card__lead {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  max-width: 46ch;
}

.page-contact .ct-form { margin-block-start: var(--s-3); }

/* Selo — a única imperfeição controlada da página: 1.2° fora do eixo.
   Fica no fluxo (nunca sobre texto) e não gira com o hover. */
.page-contact .ct-seal {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius-pill);
  background-color: var(--surface-tint);
  color: var(--teal-deep);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  white-space: nowrap;
}

.page-contact .ct-form-card .ct-seal { transform: rotate(-1.2deg); }

/* Variante para dentro do bloco escuro: contorno em vez de preenchimento */
.page-contact .ct-seal--deep {
  background-color: transparent;
  border: var(--border) solid var(--line-2);
  color: var(--accent);
}

/* Foco em anel de órbita: o contorno azul de 3px continua sendo o indicador
   (6.50 : 1 sobre o campo branco); o halo `--tint` é só o eco do símbolo e
   fica FORA do contorno, para não cobri-lo. */
.page-contact .input:focus-visible,
.page-contact .textarea:focus-visible,
.page-contact .select:focus-visible {
  box-shadow: 0 0 0 9px var(--surface-tint);
}

.page-contact .ct-form__foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}

@media (min-width: 640px) {
  .page-contact .ct-form__foot {
    flex-direction: row;
    align-items: center;
    gap: var(--s-6);
  }
}

/* o botão não encolhe: em duas linhas a pílula perde a forma */
.page-contact .ct-form__foot .btn { flex: 0 0 auto; white-space: nowrap; }

.page-contact .ct-form__note {
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  max-width: 34ch;
}


/* ==========================================================================
   §03 · CANAIS
   ====================================================================== */

.page-contact .ct-channels-col { min-width: 0; }

/* A foto larga leva PAINEL OPACO em vez de véu: medido em pixel, o véu em
   gradiente deixava o olho `--tint` a 3.16 : 1 sobre a parte clara da imagem.
   O painel garante `--ink` sobre `--paper` (17.25 : 1) e o olho em `--fg-muted`
   a 6.15 : 1, sem depender de qual foto está atrás. */
.page-contact .ct-ch-photo .photo__panel { padding: var(--s-5) var(--s-6); }

/* Ponto focal — foto vertical (2/3) numa caixa 16/9: sobram 37% da altura
   (900 dos 2400 px) e o painel opaco ainda cobre a metade de baixo da caixa.
   Com os 55% do catálogo a pessoa caía justamente atrás do painel e só a
   cabeça aparecia rente à borda dele. 72% desce a janela para y 1080–1980:
   a pessoa e a mesa sobem para o terço alto do quadro, acima do painel. */
.page-contact .ct-ch-photo img { object-position: 50% 72%; }

/* MUDANÇA DE LAYOUT no celular. A 360 px a caixa 16/9 mede 324 × 182 px e o
   painel opaco (276 × 111) cobre 61% dela: sobra uma fresta de 71 px, e a
   pessoa fica com o tronco atrás do cartão. A caixa ganha proporção própria
   abaixo de 640 px — 1/1, ou seja 324 px de altura, quase o dobro —, e aí o
   painel cai para 34%.
   Com a caixa quadrada sobre a foto 2/3 a janela vertical vale 2/3 da altura
   (1600 dos 2400 px). Em 100% ela encosta na base e entra de y 800 a 2400:
   sai todo o teto escuro, ficam as janelas, a pessoa (y 1225–1560) e a mesa,
   e a pessoa termina 300 px acima da borda superior do painel. */
@media (max-width: 639.98px) {
  .page-contact .ct-ch-photo { aspect-ratio: 1 / 1; }
  .page-contact .ct-ch-photo img { object-position: 50% 100%; }
}

.page-contact .ct-ch-photo__line {
  margin-block-start: var(--s-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.page-contact .ct-channels__title { font-size: var(--fs-h3); }

.page-contact .ct-channels {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.page-contact .ct-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--dur) var(--ease-soft),
    box-shadow var(--dur) var(--ease-soft),
    transform var(--dur) var(--ease-soft);
}

/* Hover sobe o contraste da borda (`--line` decorativo -> `--accent` 6.50 : 1)
   e não toca em nenhuma cor de texto. */
.page-contact .ct-channel:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-3);
}

.page-contact .ct-channel__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.page-contact .ct-channel__label { font-size: var(--fs-h4); }

.page-contact .ct-channel__value {
  font-family: var(--ff-mono);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--accent);
  overflow-wrap: anywhere;
}

.page-contact .ct-channel__value a { color: var(--accent); }
.page-contact .ct-channel__value a:hover { color: var(--accent-strong); }

.page-contact .ct-channel__body-text {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.page-contact .ct-channel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.page-contact .ct-channel__link { font-size: var(--fs-sm); }


/* ==========================================================================
   §04 · ESCRITÓRIOS
   ====================================================================== */

/* Abstração de mapa: meridianos curvos e três anéis marcando as praças.
   Não é um mapa embutido nem uma projeção real — e a legenda diz isso. */
.page-contact .ct-map {
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
}

/* Quebra de grade intencional: a partir de 1200px o painel do mapa sai da
   coluna e sangra para a margem — mas nunca além dela. O deslocamento é o
   MENOR entre 5rem e a margem realmente disponível (metade da folga do
   container + a calha), de modo que a borda esquerda pare exatamente no limite
   da seção. Sem esse limite, entre 1200 e 1366px o painel saía do bloco
   `overflow: hidden` e o IntersectionObserver deixava de revelá-lo — o mapa
   simplesmente não aparecia. Medido em navegador. */
@media (min-width: 1200px) {
  .page-contact .ct-map {
    margin-inline-start: calc(-1 * min(
      var(--s-11),
      var(--gutter) + (100vw - min(100vw, var(--wrap))) / 2
    ));
  }
}

.page-contact .ct-map__svg {
  width: 100%;
  height: auto;
  color: var(--accent);
  fill: none;
}

.page-contact .ct-map__grid { opacity: .4; }

.page-contact .ct-map__trail {
  opacity: .75;
  stroke-dasharray: 3 8;
}

.page-contact .ct-map__pin { color: var(--fg); }

.page-contact .ct-map__n {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .08em;
  fill: currentColor;
  stroke: none;
}

.page-contact .ct-map__caption {
  margin-block-start: var(--s-4);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.page-contact .ct-office-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Ficha em linha — número, endereço e selo. Não é grade de três cartões. */
.page-contact .ct-office {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
  padding: var(--s-6);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease-soft), transform var(--dur) var(--ease-soft);
}

.page-contact .ct-office:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
}

.page-contact .ct-office__n {
  flex: 0 0 auto;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--accent);
}

.page-contact .ct-office__body {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.page-contact .ct-office__city { font-size: var(--fs-h3); }

.page-contact .ct-office__addr {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

/* Faixa de dados fechada em caixa — toda borda fecha */
.page-contact .ct-office-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-9);
  margin-block-start: var(--s-4);
  padding: var(--s-6);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
}

.page-contact .ct-office-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.page-contact .ct-office-meta__v {
  font-family: var(--ff-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--fg);
}

.page-contact .ct-office-meta__l {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}


/* ==========================================================================
   §05 · INSTITUCIONAL — conversa dentro do mockup de celular
   ====================================================================== */

.page-contact .ct-inst__device {
  display: flex;
  justify-content: center;
}

/* A tela do aparelho precisa ser coluna flexível para a barra inferior
   (`.dv-navbar`, com `margin-block-start: auto`) descer até o fim. */
.page-contact .device--phone .device__screen {
  display: flex;
  flex-direction: column;
}

.page-contact .ct-chat {
  flex: 1 1 auto;
  gap: var(--s-2);
}

.page-contact .ct-chat__status {
  display: flex;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: .625rem;
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--slate);
}

.page-contact .ct-bubble {
  max-width: 86%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  font-size: .75rem;
  line-height: 1.45;
}

.page-contact .ct-bubble--in {
  align-self: flex-start;
  border-end-start-radius: var(--radius-sm);
  background-color: var(--mist);
  color: var(--ink);
}

.page-contact .ct-bubble--out {
  align-self: flex-end;
  border-end-end-radius: var(--radius-sm);
  background-color: var(--tint);
  color: var(--teal-deep);
}

/* Campo falso: é só desenho, nunca um controle real dentro do mockup.
   Desce para o fim da tela (com a barra inferior), como num app de verdade. */
.page-contact .ct-composer {
  margin-block-start: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: var(--border) solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: .6875rem;
  color: var(--muted-ink);
}

.page-contact .ct-composer .orbit { color: var(--teal); }


/* ==========================================================================
   §06 · FAQ
   ====================================================================== */

.page-contact .ct-faq__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

@media (min-width: 900px) {
  .page-contact .ct-faq__head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--header-gap) + var(--s-6));
  }
}

.page-contact .ct-faq__note {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}


/* ==========================================================================
   §07 · NOTA FINAL — cartão escuro curvo sobre papel
   ====================================================================== */

.page-contact .ct-close {
  padding: clamp(var(--s-7), 4vw, var(--s-10));
  border-radius: var(--radius-xl);
}

/* o timbre deste cartão é pequeno e o cartão é baixo: baixamos mais a opacidade
   para que nenhuma linha de anel passe perto de uma linha de texto */
.page-contact .ct-close .timbre { opacity: .07; }

.page-contact .ct-close__grid {
  display: grid;
  gap: var(--gap-lg);
}

@media (min-width: 900px) {
  .page-contact .ct-close__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.page-contact .ct-close__grid > * { min-width: 0; }

.page-contact .ct-close__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--fg);
  max-width: 22ch;
}

.page-contact .ct-close__lead {
  color: var(--fg-muted);
  max-width: 48ch;
}

.page-contact .ct-close__foot {
  gap: var(--s-4) var(--s-6);
  align-items: center;
}