/* ==========================================================================
   Página de contato
   Figma: "[2026] Redesign do Site Institucional | Iona Szkurnik", página
   Design & Handoff, frame "Contato — Desktop 1512" (node 556:5096).
   Medidas no frame de 1512 (--fp = 1px do Figma na largura atual da tela).
   Versão anterior (canais de contato na abertura, campos só com a linha de
   base, formato em retângulos): versoes-anteriores/contato-v1/.

   C1  Abertura ...... creme; título vermelho; na base, dois textos lado a
                       lado e o botão vermelho que leva ao formulário
   C2  Assuntos ...... branco; lista com linhas finas (.rows, components.css)
   C3  Formulário .... bloco creme com campos brancos; formato em select
   C4  Palestras ..... mesmo padrão e cores da seção 08 da home (vermelho e
                       vinho); aqui a palavra "Palestras" fica em azul
                       (.insights--talks, em sections/insights.css)
   Rodapé ........... versão clara (.footer--light, em footer.css)
   ========================================================================== */

.page-contact {
  --g-gap: calc(24 * var(--fp));
  --muted: #6f6969;
  --placeholder: #8a8484;
  --rule-dark: rgba(7, 0, 0, 0.14);
}

/* ---------- Título das seções C2 e C3 ---------- */
.c-title {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: max(30px, calc(44 * var(--fp)));
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--c-red);
}

/* ---------- Botão retangular: rótulo à esquerda, seta à direita ----------
   Usa o .btn (o fundo sobe de baixo no hover); aqui só muda a composição. */
.btn.c-cta {
  justify-content: space-between;
  gap: 24px;
  width: calc(331 * var(--fp));
  min-width: 240px;
  height: calc(88 * var(--fp));
  min-height: 64px;
  padding: 0 calc(22 * var(--fp));
  font-size: max(15px, calc(17 * var(--fp)));
}
.c-cta__icon {
  flex: none;
  width: 18px;
  height: 18px;
}
.c-cta__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
}
/* Contorno vinho (confirmação do formulário) */
.btn.c-cta--outline {
  --btn-color: var(--c-wine);
  --btn-contrast: var(--c-white);
}
.btn.c-cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ==========================================================================
   C1 · Abertura
   ========================================================================== */
.c-hero {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--fp));
  min-height: max(calc(834 * var(--fp)), 600px);
  /* topo: o alto das maiúsculas do título fica a 269px do topo (Figma) */
  padding: calc(246 * var(--fp)) var(--pad) calc(145 * var(--fp));
  background: var(--c-cream);
  color: var(--c-red);
}

.c-hero__head {
  flex: 1 1 auto;
}

.c-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(166 * var(--fp));
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.c-hero__title .rv-line-mask {
  padding: 0.06em 0.08em 0.14em 0;
  margin: -0.06em -0.08em -0.14em 0;
}

/* Base: os dois textos lado a lado e o botão à direita, centralizados na altura */
.c-hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--fp));
}

.c-hero__text {
  display: flex;
  align-items: center;
  gap: calc(57 * var(--fp));
}
.c-hero__text p {
  margin: 0;
}
.c-hero__lead {
  flex: none;
  width: calc(273 * var(--fp));
  font-family: var(--font-display);
  font-size: max(17px, calc(22 * var(--fp)));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--c-graphite);
}
.c-hero__sub {
  width: calc(488 * var(--fp));
  font-family: var(--font-text);
  font-size: max(15px, calc(18 * var(--fp)));
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-text);
}

/* Botão vermelho cheio (.btn--red: no hover o verde-limão sobe e o texto fica vinho) */
.btn.c-hero__cta {
  flex: none;
  width: auto;
  height: calc(80 * var(--fp));
  min-height: 56px;
  padding: 0 calc(40 * var(--fp));
  font-size: max(15px, calc(16 * var(--fp)));
  line-height: 1.2;
}
.btn.c-hero__cta:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 4px;
}

/* ==========================================================================
   C2 · Sobre o que você quer falar?
   Seção em duas partes com lista de linhas (.split, .rows e .row, em
   components.css, o mesmo padrão da seção 04 da home). Aqui a seta aponta
   para baixo (.rows--down), porque o formulário vem a seguir.
   ========================================================================== */
.c-topics {
  background: var(--c-white);
  color: var(--c-ink);
}

/* ==========================================================================
   C3 · Formulário
   Bloco creme com margem; título à esquerda e campos à direita. Campos
   brancos sem contorno, rótulo pequeno em caixa-alta acima. No foco, a
   base do campo ganha uma linha preta; o vermelho fica só para o erro.
   ========================================================================== */
.c-form {
  padding: calc(100 * var(--fp)) var(--pad) calc(160 * var(--fp));
  background: var(--c-white);
  color: var(--c-ink);
}

.c-form__card {
  display: flex;
  justify-content: space-between;
  padding: calc(100 * var(--fp)) calc(80 * var(--fp));
  background: var(--c-cream);
}

.c-form__head {
  flex: none;
  align-self: flex-start;
  width: calc(445.33 * var(--fp));
}

.c-form__body {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 calc(32 * var(--fp));
}

.c-form__form {
  position: relative;
}

.c-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16 * var(--fp)) calc(48 * var(--fp));
}

.field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field--half {
  grid-column: span 1;
}

.field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.field:focus-within .field__label {
  color: var(--c-ink);
}
.field__opt {
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.field__input {
  display: block;
  width: 100%;
  min-height: max(44px, calc(48 * var(--fp)));
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0;
  background: var(--c-white);
  box-shadow: inset 0 0 0 0 var(--c-ink);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .field__input:hover {
    box-shadow: inset 0 -1px 0 0 rgba(7, 0, 0, 0.22);
  }
}
/* Foco (campo ativo): linha preta na base */
.field__input:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 0 var(--c-ink);
}
.field__input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
.field__input--area {
  min-height: max(104px, calc(120 * var(--fp)));
  resize: vertical;
  line-height: 1.4;
}
.field__input--short {
  min-height: max(72px, calc(80 * var(--fp)));
}

/* Erro: linha vermelha na base e mensagem curta (o vermelho só aparece aqui,
   inclusive com o campo em foco) */
.field.is-invalid .field__input {
  box-shadow: inset 0 -1px 0 0 var(--c-red);
}
.field.is-invalid .field__input:focus {
  box-shadow: inset 0 -2px 0 0 var(--c-red);
}
.field__error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  color: var(--c-wine);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.field__error::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--c-red);
}
.field__error[hidden] {
  display: none;
}

/* ---------- Formato: select (opcional) ----------
   A largura acompanha a opção escolhida (field-sizing); nos navegadores
   sem suporte, fica com a largura da opção mais longa. */
.field--select {
  align-items: flex-start;
  gap: 14px;
}
.select {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.select__input {
  field-sizing: content;
  min-width: 191px;
  max-width: 100%;
  height: 44px;
  margin: 0;
  padding: 10px 42px 10px 16px;
  border: 0;
  border-radius: 0;
  background: var(--c-white);
  box-shadow: inset 0 0 0 0 var(--c-ink);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 0.3s ease;
}
/* Nenhum formato escolhido: texto em cinza, como um placeholder */
.select:has(option[value=""]:checked) .select__input {
  color: var(--c-text);
}
@media (hover: hover) and (pointer: fine) {
  .select__input:hover {
    box-shadow: inset 0 -1px 0 0 rgba(7, 0, 0, 0.22);
  }
}
.select__input:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 0 var(--c-ink);
}
.select__icon {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--muted);
  pointer-events: none;
}

/* ---------- Envio ---------- */
.c-form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px calc(40 * var(--fp));
  padding-top: calc(16 * var(--fp));
}
.btn.c-form__submit {
  height: calc(72 * var(--fp));
  min-height: 56px;
}
.c-form__legal {
  flex: 1 1 240px;
  max-width: 38ch;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1.5;
}
.c-form__legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.c-form__status {
  flex-basis: 100%;
  margin: 0;
  color: var(--c-wine);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.c-form__status:empty {
  display: none;
}
.btn.c-cta[aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}

/* Anti-spam: fora da tela */
.c-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Confirmação ---------- */
.c-form__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--c-ink);
}
.c-form__done[hidden] {
  display: none;
}
.c-form__done:focus {
  outline: none;
}
.c-form__done-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: max(36px, calc(72 * var(--fp)));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.c-form__done-text {
  max-width: 40ch;
  margin: calc(20 * var(--fp)) 0 calc(48 * var(--fp));
  color: var(--muted);
  font-family: var(--font-text);
  font-size: max(15px, calc(17 * var(--fp)));
  line-height: 1.5;
}

/* ==========================================================================
   C4 · Se a demanda for uma palestra
   Bloco .insights--talks: agora em sections/insights.css, porque a página
   de palestras usa o mesmo bloco no fim (P10).
   ========================================================================== */

/* ==========================================================================
   WhatsApp flutuante
   Igual ao da home: só o ícone, sem círculo; no hover aparecem um círculo
   claro e o rótulo "Fale no WhatsApp". Como os fundos desta página são
   claros, o ícone fica em vinho (na home ele é branco, sobre o vermelho).
   Visibilidade (aparece ao rolar para cima): regra global, em components.css
   e assets/js/whatsapp.js.
   ========================================================================== */
.page-contact .whatsapp__dot {
  color: var(--c-wine);
}
@media (hover: hover) and (pointer: fine) {
  .page-contact .whatsapp:is(:hover, :focus-visible) .whatsapp__dot {
    background-color: rgba(93, 15, 13, 0.08);
  }
}
.page-contact .whatsapp:focus-visible .whatsapp__dot {
  outline-color: var(--c-wine);
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .field__input,
  .select__input {
    transition: none;
  }
}

/* ==========================================================================
   Tablet (768–1199px)
   ========================================================================== */
@media (max-width: 1199px) {
  .page-contact {
    --g-gap: 20px;
  }

  .c-hero {
    --fp: 1px;
    gap: 48px;
    min-height: 720px;
    padding: 168px var(--pad) 56px;
  }
  .c-hero__title {
    font-size: clamp(56px, 10.6vw, 124px);
  }
  .c-hero__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .c-hero__text {
    align-items: flex-start;
    gap: 32px;
  }
  .c-hero__lead {
    width: 280px;
  }
  .c-hero__sub {
    width: auto;
    max-width: 488px;
  }
  .btn.c-hero__cta {
    height: 64px;
    padding: 0 32px;
  }

  .c-title {
    max-width: 16ch;
    font-size: clamp(30px, 4.6vw, 44px);
  }

  .c-form {
    --fp: 1px;
    padding: 56px var(--pad) clamp(88px, 12vw, 140px);
  }
  .c-form__card {
    flex-direction: column;
    gap: 48px;
    padding: 56px 40px;
  }
  .c-form__head {
    width: auto;
  }
  .c-form__body {
    padding: 0;
  }
}

/* ==========================================================================
   Mobile (até 767px)
   ========================================================================== */
@media (max-width: 767px) {
  .c-hero {
    gap: 40px;
    min-height: 100svh;
    /* base mais alta: o botão fica acima do WhatsApp flutuante */
    padding: 120px var(--pad) 96px;
  }
  .c-hero__head {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .c-hero__title {
    font-size: clamp(48px, 15vw, 72px);
    line-height: 0.98;
    white-space: normal;
  }
  .c-hero__foot {
    align-items: stretch;
    gap: 28px;
  }
  .c-hero__text {
    flex-direction: column;
    gap: 16px;
  }
  .c-hero__lead {
    width: auto;
    max-width: 320px;
  }
  .btn.c-hero__cta {
    width: 100%;
  }

  .c-form {
    padding: 24px var(--pad) 88px;
  }
  .c-form__card {
    gap: 40px;
    padding: 40px 20px;
  }
  .c-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .field--half {
    grid-column: 1 / -1;
  }
  .field__input--area {
    min-height: 150px;
  }
  .field__input--short {
    min-height: 88px;
  }
  .select,
  .select__input {
    width: 100%;
  }
  .btn.c-cta {
    width: 100%;
  }
  .c-form__foot {
    flex-direction: column;
    align-items: stretch;
  }
  .c-form__legal {
    flex-basis: auto;
  }
}

/* ==========================================================================
   Celular — ajustes (12/11/2026, a pedido)
   Versão anterior: versoes-anteriores/mobile-contato-antes/.
   ========================================================================== */
@media (max-width: 767px) {
  /* C1 · Abertura: sem o vazio no alto. Antes, a seção tinha a altura da
     tela e o título ficava empurrado para a base; agora o conteúdo começa
     logo abaixo do header e a seção tem a altura dele */
  .c-hero {
    min-height: 0;
    padding: calc(var(--nav-h) + 40px) var(--pad) 72px;
  }
  .c-hero__head {
    flex: none;
  }

  /* C2 · Sobre o que você quer falar?: os nomes menores que o título da
     seção (antes, 30px, maiores que ele), nas medidas das formas de
     trabalhar da home no celular */
  .c-topics {
    --row-name: 22px;
    --row-text: 15px;
  }

  /* C4 · Se a demanda for uma palestra: a mesma estrutura do banner
     "Pesquisa, ideias e referências" da home no celular (insights.css). A
     foto vira o fundo do bloco, com a mesma sombra embaixo (tons de preto do
     site); título, texto e botão (largura toda) por cima; a faixa vinho com
     a palavra embaixo. A animação está no contato.js. */
  .page-contact .insights--talks {
    min-height: 0; /* a altura vem do conteúdo (sem sobra vermelha embaixo) */
  }
  .page-contact .insights--talks .insights__media {
    display: contents;
  }
  .page-contact .insights--talks .insights__photo {
    grid-area: 1 / 1;
    aspect-ratio: auto;
  }
  .page-contact .insights--talks .insights__photo img,
  .page-contact .insights--talks .insights__photo--iona img {
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 12% 30%; /* Iona à direita, longe do título */
  }
  .page-contact .insights--talks .insights__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,
      rgb(14 3 2 / 0.9) 0%,
      rgb(14 3 2 / 0.84) 20%,
      rgb(14 3 2 / 0.74) 36%,
      rgb(14 3 2 / 0.58) 50%,
      rgb(14 3 2 / 0.38) 62%,
      rgb(14 3 2 / 0.18) 74%,
      rgb(14 3 2 / 0.06) 84%,
      rgb(14 3 2 / 0) 92%);
    pointer-events: none;
  }
  .page-contact .insights--talks .insights__word {
    grid-area: 2 / 1;
  }
  .page-contact .insights--talks .insights__content {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    gap: 72px;
    padding: 96px var(--pad) 80px;
  }
  .page-contact .insights--talks .insights__title {
    width: auto;
    max-width: none;
    font-size: 30px;
    line-height: 1.25;
    text-wrap: balance;
  }
  .page-contact .insights--talks .insights__bottom {
    align-items: stretch;
    gap: 48px;
  }
  .page-contact .insights--talks .insights__text {
    font-weight: 400;
    line-height: 1.222;
    color: var(--c-cream);
  }
  .page-contact .insights--talks :is(.insights__title, .insights__text) {
    text-shadow: 0 1px 2px rgb(14 3 2 / 0.35), 0 2px 18px rgb(14 3 2 / 0.55);
  }
  .page-contact .insights--talks .btn.insights__cta {
    width: 100%;
    height: 72px;
  }
}