/* NEXUS theme-final / assets/css/sections/contato.css */

/* 0. Fundo da seção, marca d'água e gate do palco antigo */
#contato {
  padding-block: clamp(var(--space-14), 16svh, var(--space-16));
  background-color: hsl(var(--card));
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.contato__marca {
  --contato-marca-opacidade: 0.05;
  position: absolute;
  z-index: -1;
  inset-block-start: 50%;
  inset-inline-end: 0;
  transform: translateY(-50%);
  inline-size: clamp(12rem, 28vw, 30rem);
  aspect-ratio: 1 / 1;
  background-color: hsl(var(--foreground) / var(--contato-marca-opacidade));
  -webkit-mask-image: url("../../img/brand/nexus-mark.svg");
  mask-image: url("../../img/brand/nexus-mark.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}

html:not([data-nx-lay*="contato:"]) #contato .contato__stage {
  display: none;
}

html[data-nx-lay*="contato:"] #contato .contato__stage {
  display: block;
}

/* 1. Grade de duas colunas: copy e acao a esquerda, imagem de apoio a direita */

.contato__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: start;
  gap: var(--space-12);
}

.contato__content {
  display: grid;
  gap: var(--space-6);
  max-width: var(--measure);
}

html:not([data-nx-lay*="contato:"]) #contato .contato__content {
  margin-inline: auto;
  text-align: center;
}

html:not([data-nx-lay*="contato:"]) #contato .contato__content > .section__head {
  justify-items: center;
}

html:not([data-nx-lay*="contato:"]) #contato .contato__actions {
  justify-content: center;
}

@media (min-width: 62rem) {
  html[data-nx-lay*="contato:"] #contato .contato__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-14);
  }

  /* o degrau: a mídia desce, o texto fica onde está. É margin estática, não
     transform animado, então não entra na conta do §6. */
  html[data-nx-lay*="contato:"] #contato .contato__stage {
    margin-block-start: var(--space-10);
  }

  html[data-nx-lay*="contato:"] #contato .contato__content {
    align-self: center;
  }
}

.contato .contato__content > .section__head {
  margin-block-end: 0;
  gap: var(--space-4);
}

/* 2. Ações: botão primário grande + e-mail como link grande */

.contato__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.contato__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: hsl(var(--foreground));
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 650;
  letter-spacing: var(--tracking-display);
}

.contato__email:hover,
.contato__email:focus-visible {
  color: hsl(var(--primary));
}

.contato__email-icon {
  display: inline-flex;
  flex: none;
  color: hsl(var(--primary));
  transition: transform calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.contato__email:hover .contato__email-icon,
.contato__email:focus-visible .contato__email-icon {
  transform: translate3d(0, -0.12em, 0);
}

/* 3. Mídia de apoio: moldura fixa em retrato, feixe de luz atravessando */

.contato__stage {
  justify-self: center;
  inline-size: 100%;
}

.contato__frame {
  --media-ratio: 4 / 5;
  max-inline-size: 24rem;
  margin-inline: auto;
  /* palco escuro nos dois temas: o vídeo é preto e o pôster também, e o
     fundo de --muted que .media-frame traz é quase branco no tema claro */
  background-color: hsl(var(--scrim));
}

/* 12a rodada: moldura na proporcao exata do filme retrato, cover sem corte
   perceptivel. O feixe saiu: sobre o filme parecia mancha. */
.contato__frame video,
.contato__frame img {
  object-fit: cover;
}
.contato__beam { display: none; }

.contato__beam {
  position: absolute;
  inset-block: -35%;
  inset-inline-start: -75%;
  inline-size: 45%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    hsl(var(--signal) / 0) 34%,
    hsl(0 0% 100% / 0.75) 50%,
    hsl(var(--signal) / 0) 66%,
    transparent 100%
  );
  transform: translate3d(0, 0, 0) rotate(-14deg);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: nx-contato-beam calc(6.4s * var(--motion)) var(--ease-io) infinite;
}

@keyframes nx-contato-beam {
  0% {
    transform: translate3d(-20%, 0, 0) rotate(-14deg);
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  50% {
    transform: translate3d(230%, 0, 0) rotate(-14deg);
    opacity: 0.9;
  }
  76% {
    opacity: 0;
  }
  100% {
    transform: translate3d(230%, 0, 0) rotate(-14deg);
    opacity: 0;
  }
}

/* 4. Responsividade */

@media (max-width: 480px) {
  .contato__frame {
    max-inline-size: 20rem;
  }

  .contato__actions {
    gap: var(--space-5);
  }
}

@media (min-width: 1900px) {
  .contato__frame {
    max-inline-size: 30rem;
  }
}

/* 5. Título e lead: hierarquia */

.contato #contato-title {
  letter-spacing: calc(var(--tracking-display) - 0.01em);
  font-weight: 680;
  text-wrap: balance;
  max-inline-size: min(100%, 13em);
  color: hsl(var(--foreground));
}

.contato .contato__content > .section__head > .lead {
  max-inline-size: min(100%, 30em);
  color: hsl(var(--muted-foreground));
}

/* 6. Diálogo de contato */

.contato-modal[hidden] {
  display: none;
}

.contato-modal {
  position: fixed;
  inset: 0;
  /* acima do cabeçalho fixo (50) e abaixo do estúdio (980) e do skip link
     (999), que continuam sendo cromo de nível de documento */
  z-index: 900;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nx-contato-aberto {
  overflow: hidden;
}

.contato-modal__veu {
  position: fixed;
  inset: 0;
  background-color: hsl(var(--scrim) / 0.72);
  opacity: 0;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.contato-modal.is-open .contato-modal__veu {
  opacity: 1;
}

.contato-modal__painel {
  position: relative;
  inline-size: 100%;
  max-inline-size: 46rem;
  margin-block: auto;
  padding: clamp(var(--space-6), 1.6vw + var(--space-4), var(--space-10));
  border-radius: var(--radius-lg);
  border: var(--hairline) solid hsl(var(--border));
  background-color: hsl(var(--surface-2));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.985);
  transition:
    opacity calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.contato-modal.is-open .contato-modal__painel {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.contato-modal__fechar {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  border-radius: var(--radius-sm);
  border: var(--hairline) solid transparent;
  background-color: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: var(--fs-lead);
  transition:
    color calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-fast) * var(--motion)) var(--ease-out);
}

.contato-modal__fechar:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--foreground));
  transform: rotate(90deg);
}

.contato-modal__fechar:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* cromo do diálogo: fica parado enquanto o corpo rola (primitivo .dialog-fit,
   03-ui.css) */
.contato-modal__head,
.contato-modal__vias {
  flex: none;
}

.contato-modal__head {
  display: grid;
  gap: var(--space-3);
  padding-inline-end: var(--space-10);
  margin-block-end: var(--space-7);
}

.contato-modal__titulo {
  font-size: var(--fs-h3);
  font-weight: 680;
  letter-spacing: calc(var(--tracking-display) - 0.01em);
  text-wrap: balance;
  max-inline-size: min(100%, 16em);
}

.contato-modal__desc {
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-inline-size: min(100%, 38em);
}

.contato-modal__form {
  display: grid;
  gap: var(--space-5);
}

.contato-modal__form > * {
  min-inline-size: 0;
}

.contato-modal__enviar {
  white-space: normal;
  text-align: center;
  max-inline-size: 100%;
}

.contato-modal__linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
  align-items: start;
}

.contato-modal__linha > .field {
  align-content: start;
}

.contato-modal__textarea {
  min-block-size: calc(var(--tap-min) * 2.6);
}

.contato-modal__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border: var(--hairline) solid hsl(var(--border));
  border-inline-start-width: calc(var(--hairline) * 3);
  border-inline-start-color: hsl(var(--primary));
  /* um degrau acima do painel (--surface-2), pelo mesmo motivo pelo qual o
     campo ficou um degrau abaixo: superfície igual não é hierarquia */
  background-color: hsl(var(--surface-3));
  color: hsl(var(--foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.contato-modal__nota svg {
  flex: none;
  margin-block-start: 0.25em;
  color: hsl(var(--primary));
}

.contato-modal__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.contato-modal__direto {
  font-size: var(--fs-sm);
}

/* O status nasce vazio e só ganha texto depois do envio; sem `:empty` ele
   deixaria um respiro permanente no fim do formulário. */
.contato-modal__status:not(:empty) {
  padding-block-start: var(--space-1);
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.contato-modal__campo .input[aria-invalid="true"],
.contato-modal__campo .textarea[aria-invalid="true"] {
  border-color: hsl(var(--destructive));
  box-shadow: inset 0 0 0 var(--hairline) hsl(var(--destructive));
}

.contato-modal__campo .field__hint--error {
  color: hsl(var(--foreground));
  font-weight: 600;
}

/* 7. Efeitos do diálogo */

.contato-modal__head,
.contato-modal__form > * {
  transition:
    opacity calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.contato-modal:not(.is-open) .contato-modal__head,
.contato-modal:not(.is-open) .contato-modal__form > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.contato-modal.is-open .contato-modal__head { transition-delay: calc(40ms * var(--motion)); }
.contato-modal.is-open .contato-modal__form > *:nth-child(1) { transition-delay: calc(80ms * var(--motion)); }
.contato-modal.is-open .contato-modal__form > *:nth-child(2) { transition-delay: calc(120ms * var(--motion)); }
.contato-modal.is-open .contato-modal__form > *:nth-child(3) { transition-delay: calc(160ms * var(--motion)); }
.contato-modal.is-open .contato-modal__form > *:nth-child(4) { transition-delay: calc(200ms * var(--motion)); }
.contato-modal.is-open .contato-modal__form > *:nth-child(n + 5) { transition-delay: calc(240ms * var(--motion)); }

.contato__cta {
  position: relative;
  isolation: isolate;
}

.contato__cta::before {
  content: "";
  position: absolute;
  inset: calc(var(--hairline) * -1);
  z-index: -1;
  border-radius: inherit;
  background-color: hsl(var(--primary));
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.contato__cta:hover::before,
.contato__cta:focus-visible::before {
  opacity: 0.28;
  transform: scale(1.12);
}

/* 8. Diálogo em tela pequena e em paisagem curta */

@media (max-width: 30rem) {
  .contato-modal {
    padding: var(--space-3);
  }

  .contato-modal__painel {
    max-inline-size: none;
  }

  .contato-modal__head {
    padding-inline-end: var(--space-8);
  }

  .contato-modal__acoes {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-height: 40rem) {
  .contato-modal {
    align-items: flex-start;
  }

  .contato-modal__painel {
    margin-block: 0;
  }
}

/* 9. Agendamento no diálogo (cal.com) */

/* O grupo de vias reusa o primitivo .segmented (03-ui.css §5) inteiro: forma,
   altura de toque, foco e estado ativo vêm de lá. */
.contato-modal__vias {
  margin-block-end: var(--space-6);
}

.contato-modal__vias .segmented__btn[aria-selected="true"] {
  background-color: hsl(var(--surface-1));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-sm);
}

.contato-modal__via[hidden] {
  display: none;
}

.contato-modal__via--agenda {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.contato-agenda__lead {
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-inline-size: min(100%, 44em);
}

/* `min-block-size: fit-content` porque o cartão tem `overflow: hidden`, e um
   item de flex/grid com overflow recortado perde o piso automático de altura:
   em janela baixa ele encolhia e CORTAVA o calendário (medido em 1440x650:
   238px de cartão para 570px de conteúdo) em vez de deixar o corpo rolar. */
.contato-agenda {
  position: relative;
  min-block-size: fit-content;
  border-radius: var(--radius-md);
  border: var(--hairline) solid hsl(var(--border));
  background-color: hsl(var(--card));
  overflow: hidden;
}

.contato-agenda[hidden] {
  display: none;
}

.contato-agenda__quadro {
  position: relative;
  min-block-size: 34rem;
  margin-block-end: -2.5rem;
  overflow: hidden;
}

.contato-agenda__estado {
  padding: var(--space-6);
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
}

.contato-agenda__marca {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  min-block-size: 3rem;
  padding-inline: var(--space-5);
  border-block-start: var(--hairline) solid hsl(var(--border));
  background-color: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-xs);
  line-height: 1.3;
}

.contato-agenda__falha {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: var(--hairline) solid hsl(var(--border));
  border-inline-start-width: calc(var(--hairline) * 3);
  border-inline-start-color: hsl(var(--primary));
  background-color: hsl(var(--surface-3));
}

.contato-agenda__falha[hidden] {
  display: none;
}

.contato-agenda__falha-titulo {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.contato-agenda__falha-texto {
  color: hsl(var(--muted-foreground));
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.contato-agenda__falha-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-block-start: var(--space-2);
}

.contato-agenda__falha-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* 72rem, medido: as colunas laterais do booker são fixas (280px cada) e o
   calendário só para de espremer com 1040px de iframe. */
.contato-modal.is-agenda .contato-modal__painel {
  max-inline-size: 72rem;
}

/* faixa apertada pela JANELA, não pelo nosso teto: o respiro encolhe e o pixel
   devolvido vai todo para o calendário (968px de viewport: iframe 834 → 936) */
@media (min-width: 48.0625rem) and (max-width: 77rem) {
  .contato-modal.is-agenda {
    padding-inline: var(--space-4);
  }

  .contato-modal.is-agenda .contato-modal__painel {
    padding-inline: var(--space-5);
  }
}

.contato-modal__vias,
.contato-modal__via--agenda > * {
  transition:
    opacity calc(var(--dur-base) * var(--motion)) var(--ease-out),
    transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.contato-modal:not(.is-open) .contato-modal__vias,
.contato-modal:not(.is-open) .contato-modal__via--agenda > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.contato-modal.is-open .contato-modal__vias { transition-delay: calc(70ms * var(--motion)); }
.contato-modal.is-open .contato-modal__via--agenda > *:nth-child(1) { transition-delay: calc(110ms * var(--motion)); }
.contato-modal.is-open .contato-modal__via--agenda > *:nth-child(n + 2) { transition-delay: calc(150ms * var(--motion)); }

/* 9.1 Agenda em tela pequena: tela cheia, e quem rola é o diálogo

   17ª rodada, 06/08/2026. A rodada anterior travava o iframe na altura do
   quadro para forçar a rolagem POR DENTRO do booker, e em 390x844 isso
   espremia 596px de calendário numa janela de 523px — a página não descia, só
   um retângulo no meio dela. O embed do cal.com JÁ se mede sozinho e escreve
   a altura do conteúdo no <iframe> (medido: 598px, e 642px num dia com mais
   horários); a trava era `min/max-block-size: 100%`, que vence `height` na
   resolução do tamanho usado. Sem ela, não sobra rolagem interna nenhuma e
   quem rola é `.contato-modal`, que já é `overflow-y: auto` desde a §6.

   O gotcha do iOS (o gesto não atravessa o iframe) continua verdadeiro e
   deixou de importar: ele só morde quando o documento de dentro TEM o que
   rolar. `useSlotsViewOnSmallScreen` segue fora, porque quebra o desktop. */

/* CROMO MAGRO, e o eixo é a ALTURA. Medido em 1440x650 (notebook com a janela
   não maximizada, que foi a reprovação do dono): o cabeçalho, o lead do
   diálogo, as abas e a linha "Escolha um horário livre…" comiam 305px dos 650
   antes do calendário começar. A linha da agenda é redundante com o próprio
   calendário logo abaixo, e o lead do diálogo com o título. Em celular vale
   pelo mesmo motivo, por isso a condição tem os dois lados. */
@media (max-width: 48rem), (max-height: 46rem) {
  .contato-modal.is-agenda .contato-modal__head {
    margin-block-end: var(--space-4);
    gap: var(--space-2);
  }

  .contato-modal.is-agenda .contato-modal__vias {
    margin-block-end: var(--space-3);
  }

  .contato-modal.is-agenda .contato-agenda__lead {
    display: none;
  }

  .contato-modal.is-agenda .contato-modal__via--agenda {
    min-block-size: 0;
    gap: var(--space-4);
  }
}

/* Em janela baixa o lead do diálogo também sai, nas duas vias: ele repete o
   que o título já diz, e cada linha aqui é linha a menos de calendário ou de
   formulário. */
@media (max-height: 40rem) {
  .contato-modal__desc {
    display: none;
  }
}

@media (max-width: 48rem) {
  .contato-modal.is-agenda {
    padding: 0;
  }

  /* Só a via da agenda vira tela cheia; na via da mensagem o diálogo continua
     o cartão de sempre, inclusive nas regras da §8. O respiro do .dialog-fit
     zera aqui porque a tela inteira É o painel. */
  .contato-modal.is-agenda .contato-modal__painel {
    --dialog-fit-respiro: 0px;
    inline-size: 100%;
    max-inline-size: none;
    margin-block: 0;
    block-size: 100dvh;
    padding-inline: var(--space-4);
    padding-block: var(--space-5);
    border-radius: 0;
    border: 0;
  }

  /* sem o recorte do desktop: aqui o fim do iframe é conteúdo que a pessoa
     alcança rolando, e a etiqueta vira rodapé de verdade */
  .contato-modal.is-agenda .contato-agenda__marca {
    position: static;
    min-block-size: 2.75rem;
    padding-inline: var(--space-4);
  }

  .contato-modal.is-agenda .contato-agenda__quadro {
    min-block-size: 0;
    margin-block-end: 0;
  }

  /* o iframe nasce `inline` e pousaria na linha de base, deixando uma fresta
     do cartão embaixo dele */
  .contato-modal.is-agenda .contato-agenda__quadro iframe {
    display: block;
  }

  /* o X fica sobre o calendário quando o corpo rola por baixo dele, então
     ganha superfície própria em vez de flutuar sobre conteúdo alheio */
  .contato-modal.is-agenda .contato-modal__fechar {
    z-index: 1;
    border-color: hsl(var(--border));
    background-color: hsl(var(--surface-2));
    box-shadow: var(--shadow-sm);
  }
}