/* 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;
}

/* EFEITO DE FUNDO, SEXTA RODADA (02/09/2026 — o dono apontou a referência
   exata que queria: React Bits "Ghost Fibers"
   (reactbits.dev/backgrounds/ghost-fibers), um shader, e liberou WebGL2 —
   regra dele, vence a minha de "sem WebGL" das rodadas anteriores).
   `.contato__fx` é só o PONTO DE MONTAGEM: o `<canvas>`, o contexto
   `webgl2` e o laço de desenho inteiro moram em assets/js/core/
   contato-fx.js (nenhum novo hex, nenhuma lib — --foreground e --signal
   viram uniform de cor lidos do computed style). Zero mask, zero
   feathering aqui: o shader já pinta TODO pixel do canvas, cobertura
   completa e sem aresta é de graça.

   FALLBACK sem condição: se WebGL2 faltar ou o contexto morrer, o
   JavaScript nunca cria o canvas (ou o remove), e o que sobra é só isto —
   `background-color: hsl(var(--card))` (§0) mais `.contato__marca` (o X
   estático) logo abaixo — o "fundo de sempre", sem depender de nenhum
   script pra existir. z-index -2 é o mesmo território de todas as
   tentativas anteriores (atrás da marca, -1). */
.contato__fx {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  /* segundo freio de intensidade, além dos uniforms do shader (dono:
     "ficou mt forte"): opacidade do CANVAS inteiro, não só dos uniforms —
     dial fácil de mexer sem recompilar shader nenhum. POR TEMA: o caminho
     `uLightMode` do shader já é mais discreto por natureza (mistura com
     branco, nunca soma luz) — cortar pela metade OUTRA VEZ em cima disso é
     o que deixou o claro "quase liso" (dono, mesma rodada). Escuro
     continua com folga porque some+brilho ali é mais fácil de estourar. */
  opacity: 0.85;
}

[data-theme="light"] .contato__fx {
  opacity: 1;
}

/* Marca d'água do X: só o volume estático, deriva autônoma (nx-drift) —
   sem ponteiro (o holofote de cursor não voltou nesta rodada nem na
   anterior). */
.contato__marca {
  --contato-marca-opacidade: 0.2;
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-end: 0;
  margin-block: auto;
  inline-size: clamp(12rem, 28vw, 30rem);
  aspect-ratio: 1 / 1;
  /* Recorta a própria deriva (auditoria de gosto, 01/09/2026, achado 5): o
     `nx-drift` do glifo escala até 1,12 — sem isto o X passa alguns px do
     próprio poço em certas fases (medido: 3px em 1440). */
  overflow: hidden;
  pointer-events: none;
}

/* SOME ABAIXO DE 992PX (auditoria de gosto, 01/09/2026, achado 4, limiar
   original 700px; alargado 02/09/2026, rodada do X mais forte). Abaixo de
   992px (62rem, o mesmo teto de §1 pra grade de duas colunas) o conteúdo
   fica em coluna única, centralizado, e o X flush-right passa perto ou
   por cima do texto — medido em 768: 1,97:1 de contraste no lead, abaixo
   do piso de 4,5:1. Só existe onde a grade garante coluna própria pro X. */
@media (max-width: 61.9375rem) {
  .contato__marca {
    display: none;
  }
}

.contato__marca-glifo {
  position: absolute;
  inset: 0;
  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;
  will-change: transform;
  animation-name: nx-drift;
  animation-duration: calc(var(--motion) * 38s);
  animation-timing-function: var(--ease-io);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@media (prefers-reduced-motion: reduce) {
  .contato__marca-glifo {
    animation: none;
  }
}

/* Reprojeção no claro do X: o mesmo alfa do escuro, sobre fundo branco, lê
   pesado demais — --card claro tem muito mais "distância" até qualquer
   tinta escura do que --card escuro tem até uma tinta clara. O shader
   (contato-fx.js) reprojeta o dele sozinho via uLightMode, lido do mesmo
   atributo `data-theme`. */
[data-theme="light"] #contato {
  --contato-marca-opacidade: 0.13;
}

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 {
  position: relative;
  display: grid;
  /* Respiro menor entre o bloco de texto e o botão (02/09/2026, "reduz
     respiro"), e caixa mais larga que --measure porque o lead cresceu. */
  gap: var(--space-5);
  max-width: min(100%, 46em);
}

/* VÉU DE LEGIBILIDADE, SEGUNDA PASSADA (02/09/2026, dono: "sem falar o
   negocio... tipo um quadrado, tem q resolver" — a primeira versão, presa
   à caixa de `.contato__content` com pouca folga (-8%/-10%) e ellipse de
   raio fixo, dissolvia num punhado de pixels — gradual em PORCENTAGEM,
   mas abrupta em PIXEL, e lia como aresta. Correção: bleed muito maior
   (-45%/-60%, a caixa do halo fica bem maior que o texto que protege),
   `farthest-side` (o raio se ajusta ao próprio tamanho da caixa em vez de
   um valor fixo pequeno) e SEIS paradas em vez de quatro, decaindo aos
   poucos — a diferença de alfa entre duas paradas vizinhas nunca passa de
   ~0,15, contra o salto de ~0,35 da versão anterior no trecho final.
   Verificado por varredura de pixel (linha horizontal e vertical
   cruzando a área): sem degrau, só rampa. */
.contato__content::before {
  content: "";
  position: absolute;
  inset: -45% -60%;
  z-index: -1;
  background: radial-gradient(
    farthest-side at 50% 40%,
    hsl(var(--card) / 0.92) 0%,
    hsl(var(--card) / 0.8) 22%,
    hsl(var(--card) / 0.62) 42%,
    hsl(var(--card) / 0.4) 60%,
    hsl(var(--card) / 0.18) 78%,
    hsl(var(--card) / 0.05) 90%,
    transparent 100%
  );
  pointer-events: none;
}

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-3);
}

/* 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));
}

/* `text-wrap: balance` só no h2 (acima) deixava o LEAD sem a mesma rede: a
   1024 a última linha fechava com 19% da linha mais longa, uma viúva que
   nem 390 (regime de coluna única, mais curto) nem 1440/1920 (mais largos,
   quebra sobra) reproduziam. Mesmo tratamento do título logo acima. */
/* 02/09/2026, dono: "deixa escrito maior, aumenta o campo de texto e reduz
   respiro". O lead da última dobra é a promessa que sustenta o botão logo
   abaixo (trinta minutos, cinco dias úteis, o diagnóstico é seu de qualquer
   forma): merece corpo de leitura, não de legenda. Caixa mais larga para o
   texto caber em menos linhas, e o espaço até o botão encurtado. */
.contato .contato__content > .section__head > .lead {
  max-inline-size: min(100%, 42em);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: hsl(var(--muted-foreground));
  text-wrap: balance;
}

/* 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);
}

/* Encolhida ao conteúdo a partir de 36rem (02/09/2026: esticava até a ponta
   do painel, 1189px em 1280px de janela). `align-self` porque .dialog-fit é
   flex-column sem align-items, e stretch vence `inline-size: auto` sozinho.
   Piso medido: as duas etiquetas somam ~389px sem quebrar linha; abaixo dele
   o `max-inline-size: 100%` espreme o grupo e a palavra quebra em duas
   linhas sem a caixa crescer — fica no 100% do primitivo, já testado. */
@media (min-width: 36rem) {
  .contato-modal__vias {
    align-self: flex-start;
    inline-size: auto;
    max-inline-size: 100%;
  }

  /* Com `flex: 1` (base 0) do primitivo, os dois botões dividem o espaço em
     partes iguais e "Escrever uma mensagem" quebrava em duas linhas enquanto
     "Agendar uma conversa" ficava em uma — duas abas de alturas diferentes.
     `nowrap` devolve ao grupo a largura de que ele precisa. */
  .contato-modal__vias .segmented__btn {
    white-space: nowrap;
  }
}

.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. */
/* SEM ARESTA (01/09/2026, dono: "isso tá feio... nem aparecer que é
   iframe/fora"). O cartão vinha em --card com filete --border por cima do
   painel em --surface-2 — duas tintas MEDIDAMENTE diferentes (100% e 98% de
   L no claro, 6,5% e 9% no escuro, ver 01-tokens.css), então a caixa do
   calendário sempre desenhava um retângulo visível contra o diálogo, mesmo
   antes do iframe carregar. Sem filete e na MESMA tinta do painel
   (--surface-2, que varsDoBooker() em partials/contato.js também passa para
   dentro do iframe como cal-bg), a caixa para de existir como forma: o que
   sobra é só o conteúdo. */
.contato-agenda {
  position: relative;
  min-block-size: fit-content;
  border-radius: var(--radius-md);
  background-color: hsl(var(--surface-2));
  overflow: hidden;
}

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

/* Com a coluna de detalhes do booker escondida (partials/contato.js), o
   calendário sozinho não usa a largura toda do diálogo e sobravam duas faixas
   escuras dos lados. O quadro passa a ter teto próprio e a centralizar: a
   sobra vira margem do diálogo, não buraco ao lado do calendário. */
.contato-agenda__quadro {
  position: relative;
  min-block-size: 34rem;
  margin-block-end: -2.5rem;
  margin-inline: auto;
  max-inline-size: min(100%, 54rem);
  overflow: hidden;
}

/* ESQUELETO NO LUGAR DO "Carregando" (01/09/2026, dono: "nem aparecer
   carregando"). Uma linha de texto plantada no canto de uma caixa de 34rem
   (contato-agenda__quadro) lia como vazio, não como carregamento. Troca por
   uma silhueta de mês em .skeleton (mesmo primitivo de 03-ui.css §10 — cor,
   raio e a faixa de luz que atravessa vêm de lá, nada duplicado aqui) e
   centraliza na caixa inteira. `position: absolute; inset: 0` é o que deixa
   o esqueleto SOBREPOR o iframe assim que ele nasce (position estática,
   pinta atrás por padrão) para o cruzamento de opacidade abaixo funcionar
   sem salto. */
.contato-agenda__estado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 1;
  /* nunca rouba o clique do calendário que já apareceu por baixo, nem
     durante os 420ms de cruzamento */
  pointer-events: none;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out);
}

.contato-agenda__estado.is-saindo {
  opacity: 0;
}

.contato-agenda__esqueleto {
  display: grid;
  gap: var(--space-5);
  inline-size: 100%;
  max-inline-size: 28rem;
}

.contato-agenda__esq-topo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contato-agenda__esq-mes {
  inline-size: 40%;
  block-size: 1.1rem;
  margin-inline-end: auto;
}

.contato-agenda__esq-seta {
  flex: none;
  inline-size: var(--space-7);
  block-size: var(--space-7);
  border-radius: var(--radius-sm);
}

.contato-agenda__esq-grade {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
}

.contato-agenda__esq-dia {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
}

/* O IFRAME NASCE INVISÍVEL E SOBE EM FADE (mesma rodada): sem isto ele
   aparece de golpe, por cima ou ao lado do esqueleto que ainda não terminou
   de sumir. `is-pronto` entra no quadro no exato instante em que
   prontoAgenda() (partials/contato.js) detecta o <iframe> — o mesmo instante
   em que o esqueleto ganha `is-saindo` acima, então os dois cruzam juntos. */
.contato-agenda__quadro iframe {
  /* `inline` (padrão) senta na linha de base e sobra ~28px de fresta abaixo
     — medido, em toda largura, não só no recorte mobile que já forçava isto. */
  display: block;
  opacity: 0;
  transition: opacity calc(var(--dur-slow) * var(--motion)) var(--ease-out);
}

.contato-agenda__quadro.is-pronto iframe {
  opacity: 1;
}

.contato-agenda__marca {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  min-block-size: 2.5rem;
  padding-inline: var(--space-5);
  border-block-start: var(--hairline) solid hsl(var(--border));
  background-color: hsl(var(--surface-2));
  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);
}

/* 62rem, medido (02/09/2026: "sobra faixa morta"). 72rem sobrava — o quadro
   trava em 54rem (§9 acima) e não cresce mais, então 158px por lado em 1440px
   viravam vão morto. 62rem é o teto do quadro mais o padding do painel. */
.contato-modal.is-agenda .contato-modal__painel {
  max-inline-size: 62rem;
}

/* 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.

   SEGUNDA RODADA (02/09/2026): em 1280x720 o corpo tinha 405px pra um
   calendário que pede 554 — faltavam 149px. O lead de três linhas do
   cabeçalho só sumia abaixo de 40rem/640px, e 720 passa disso; sai na mesma
   condição da linha da agenda, que repete o mesmo calendário. */
@media (max-width: 48rem), (max-height: 46rem) {
  .contato-modal.is-agenda .contato-modal__head {
    margin-block-end: var(--space-3);
    gap: var(--space-1);
  }

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

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

  .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);
  }

  /* padding do painel e respiro do teto (03-ui.css) encolhem juntos: mexer só
     num dos dois só desloca o pixel recuperado, mexer nos dois manda pro calendário. */
  .contato-modal.is-agenda {
    padding-block: var(--space-2);
  }

  .contato-modal.is-agenda .contato-modal__painel {
    padding-block: var(--space-3);
    --dialog-fit-respiro: var(--space-2);
  }
}

/* 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 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);
  }
}

/* 31/08/2026, pedido do dono: "poderia ter uma linha dividindo o primeira
   conversa e a parte acima, tá meio colado demais, e poderia ter uma margem
   maior". O bloco de contato fecha a página e vinha encostado nas Perguntas,
   sem nada marcando a passagem de "tirar dúvida" para "falar com alguém". */
#contato.contato {
  border-block-start: var(--hairline) solid hsl(var(--border));
  margin-block-start: var(--space-12);
  padding-block-start: calc(var(--section-y) + var(--space-8));
  padding-block-end: calc(var(--section-y) + var(--space-6));
}