/* ==========================================================================
   SECÇÃO: CONTACTOS (DESIGN EDITORIAL COMPACTO)
   ========================================================================== */

.contacto {
  padding-block-start: var(--section-pad-block-start);
  padding-block-end: var(--section-pad-block-end);
  background-color: var(--color-cream);
  color: var(--color-ink);
  position: relative;
  overflow: hidden;
}

.contacto::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 50vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(
    circle,
    rgba(201, 162, 78, 0.08) 0%,
    rgba(250, 247, 241, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}

.contacto .container {
  position: relative;
  z-index: 1;
}

.contacto__header {
  margin-bottom: var(--space-6);
}

.contacto__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-navy-deep);
  line-height: 1.15;
}

.contacto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 992px) {
  .contacto__grid {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-8);
    align-items: start;
  }
}

/* Regra base (desktop/tablet): .contacto__info é a coluna esquerda,
   um bloco de flex normal. TEM DE vir antes da media query mobile
   abaixo — como ambas as regras têm a mesma especificidade (uma
   classe), a que aparece DEPOIS no ficheiro ganha em qualquer
   largura, incluindo mobile, anulando silenciosamente o
   "display: contents" que se segue se a ordem for invertida (bug
   encontrado em auditoria: a reordenação "mapa depois do formulário"
   nunca chegava a aplicar-se por causa disto — o CSS existia mas era
   sempre sobreposto). */
.contacto__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (max-width: 767px) {
  /* .contacto__info deixa de ser uma "caixa" de layout e passa os seus
     3 blocos (Canais Diretos, Horário, Localização) diretamente para o
     grid — só assim é possível colocar o mapa (dentro do 3º bloco)
     depois do formulário (que é irmão de .contacto__info, não filho),
     usando "order", sem duplicar HTML. display:contents não remove o
     conteúdo da árvore de acessibilidade, só da árvore de layout, por
     isso a ordem de leitura para leitores de ecrã não é afetada aqui —
     é a ordem VISUAL que muda, mantendo a leitura lógica original
     (info de contacto → form) para quem navega por teclado/voz. */
  .contacto__info {
    display: contents;
  }

  .contacto__block--location {
    order: 2;
  }

  .contacto__form-wrap {
    order: 1;
  }
}

.contacto__block {
  border-top: 1px solid rgba(14, 42, 78, 0.12);
  padding-top: var(--space-3);
}

.contacto__block-label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue-dark);
  margin-bottom: var(--space-2);
}

.contacto__block p + p {
  margin-top: 6px;
}

.contacto__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-blue-primary);
  font-size: var(--fs-body);
  transition: color var(--duration-fast) var(--ease-default);
}

.contacto__link:hover {
  color: var(--color-blue-dark);
}

/* Ícone à esquerda de cada canal — mesmo estilo de linha dos ícones
   diretos do cabeçalho (stroke-width 1.5, currentColor). */
.contacto__link-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: var(--color-blue-primary);
  transition: color var(--duration-fast) var(--ease-default);
}

.contacto__link:hover .contacto__link-icon {
  color: var(--color-blue-dark);
}

/* WhatsApp: ícone na cor de marca (#25d366), mesmo tratamento do menu
   (.menu-drawer__contact-link--wa) — só o ícone fica verde, o texto do
   link mantém a cor consistente com os restantes canais. */
.contacto__link--wa .contacto__link-icon {
  color: #25d366;
}

.contacto__note {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-grey);
  margin-top: 2px;
}

.contacto__schedule-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contacto__schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-body);
  color: var(--color-ink);
  padding-block: 2px;
  border-bottom: 1px dashed rgba(14, 42, 78, 0.1);
}

.contacto__schedule-item:last-child {
  border-bottom: none;
}

/* --------------------------------------------------------------------
   PAINEL DO FORMULÁRIO — "FICHA DE ADMISSÃO"
   --------------------------------------------------------------------
   Antes desta versão, .contacto__form-wrap não tinha NENHUMA regra
   própria — era só os inputs soltos, sem nada a ancorá-los ao resto da
   composição (por isso "flutuavam" contra o fundo cream, sem limites
   nem em desktop nem em mobile).

   Em vez de resolver isto com o padrão genérico "card branca com
   sombra" — que quebraria a linguagem editorial do resto da secção
   (hairlines finas, sem cards, sem eyebrows) — o painel usa a mesma
   "linha fina dourada" que já é linguagem do site (ver o rail de
   scroll de Terapias), aqui a assinalar "isto é o módulo de ação", não
   uma barra de progresso. Sem radius, sem sombra, sem moldura a toda a
   volta — só o suficiente para o olho ler um painel, nunca uma caixa.
   Fundo ligeiramente mais claro/frio que o cream da secção (color-mix,
   sem inventar um novo token de cor) reforça a distinção sem
   contraste artificial.

   O EIXO do traço dourado muda com o grid, não é sempre vertical: a
   >=992px o painel está ao LADO da coluna esquerda (que usa réguas
   horizontais a separar os seus blocos), por isso o traço aqui é
   vertical — assinala fronteira de coluna. Abaixo de 992px o grid
   colapsa para 1 coluna e o painel passa a estar EMPILHADO como os
   outros blocos, todos com réguas horizontais; um traço vertical
   deixaria de ter função (já não há coluna a demarcar) e ficaria
   desalinhado do eixo do resto da composição — por isso migra para
   horizontal, ver os dois blocos de media query abaixo.
   -------------------------------------------------------------------- */
.contacto__form-wrap {
  position: relative;
  background: color-mix(in srgb, var(--color-white) 55%, var(--color-cream) 45%);
  padding-block: var(--space-5);
  padding-inline: var(--container-padding);
}

/* >=992px: o painel fica ao LADO da coluna esquerda, que usa réguas
   HORIZONTAIS a separar os seus 3 blocos — por isso aqui o dourado usa
   o eixo perpendicular (traço vertical na margem), a assinalar
   fronteira de coluna. O hairline neutro no topo mantém-se, para bater
   certo com a altura das réguas da coluna esquerda. */
@media (min-width: 992px) {
  .contacto__form-wrap {
    border-top: 1px solid rgba(14, 42, 78, 0.12);
    padding-inline-start: calc(var(--container-padding) + 14px);
  }

  .contacto__form-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(
      to bottom,
      var(--color-gold-light),
      var(--color-gold) 45%,
      var(--color-gold-dark)
    );
  }
}

/* <992px: o grid colapsa para 1 coluna e o painel passa a estar
   EMPILHADO, tal como Canais Diretos / Horário / Localização — todos
   marcados por réguas horizontais no topo, sem nenhum traço vertical.
   Um traço vertical aqui deixaria de assinalar fronteira de coluna (já
   não há colunas) e ficaria desalinhado do eixo do resto da
   composição. O dourado migra para a própria régua do topo — mesma
   função ("isto é o módulo de ação"), mesmo eixo horizontal que o
   resto dos blocos empilhados; substitui o hairline neutro em vez de
   se somar a ele (um bloco, um sinal, não dois sobrepostos). */
@media (max-width: 991px) {
  .contacto__form-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
      to right,
      var(--color-gold-light),
      var(--color-gold) 45%,
      var(--color-gold-dark)
    );
  }
}

.contacto__form-head {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed rgba(14, 42, 78, 0.15);
}

.contacto__form-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-navy-deep);
  line-height: 1.2;
  margin: 0;
}

/* Formulário de Precisão Compacto */
.contacto__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contacto__field {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Mesmo tratamento de label que .contacto__block-label ao lado
   (uppercase, letter-spacing, peso 700, azul-escuro) — antes o label
   do campo tinha uma escala própria e não relacionada (0.8125rem,
   sentence case), a única inconsistência tipográfica da secção. */
.contacto__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-blue-dark);
  margin-bottom: var(--space-2);
}

/* Campos de uma linha (Nome, Email, Telefone): sem caixa — só a linha
   de base, como uma ficha para preencher à mão. O traço dourado
   (::after) cresce da esquerda para a direita no focus: é o indicador
   de foco principal, mais deliberado do que só recolorir uma borda. */
.contacto__input {
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1.5px solid var(--color-grey-light);
  border-radius: 0;
  padding: 0.75rem 0.125rem;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.contacto__field::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(to right, var(--color-gold), var(--color-gold-dark));
  transition: width var(--duration-base) var(--ease-default);
}

.contacto__field:focus-within::after {
  width: 100%;
}

/* Campo de texto livre (Mensagem): variação deliberada dentro do mesmo
   sistema — um limite fechado (hairline nos 4 lados, sem radius) em
   vez de sublinhado, porque é o único campo de resposta aberta/longa;
   dá ao olho uma área de escrita definida, como o resto do site já usa
   variação de tratamento entre secções para não repetir o mesmo padrão
   em cadeia. */
.contacto__textarea {
  width: 100%;
  background-color: transparent;
  border: 1px solid var(--color-grey-light);
  border-radius: 0;
  padding: 0.75rem 0.85rem;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  resize: vertical;
  min-height: 90px;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.contacto__textarea:focus {
  border-color: var(--color-gold-dark);
}

/* Mesmo tratamento de focus-visible já usado em .contacto__map-btn —
   reutilizado aqui por coerência, não inventado de novo. */
.contacto__input:focus-visible,
.contacto__textarea:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

/* Honeypot anti-spam: escondido fora da viewport */
.contacto__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contacto__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--color-grey);
  line-height: 1.4;
  margin-top: 2px;
  cursor: pointer;
}

.contacto__consent input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-gold-dark);
  cursor: pointer;
}

.contacto__consent-link {
  color: var(--color-blue-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-default);
}

.contacto__consent-link:hover,
.contacto__consent-link:focus-visible {
  color: var(--color-blue-dark);
}

.contacto__btn {
  align-self: flex-start;
  min-width: 200px;
  margin-top: var(--space-2);
}

/* Alvo do scroll em mobile/tablet quando um CTA ("Solicitar Consulta",
   "Formulário de Contacto" no menu) é clicado — ver smooth-anchors.js.
   Mesma folga do cabeçalho fixo que .section[id] já usa, para o painel
   não ficar tapado ao aterrar aqui. */
#contacto-form-panel {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* --------------------------------------------------------------------
   FEEDBACK VISUAL COM CONTRASTE WCAG AA / AAA
   --------------------------------------------------------------------
   - Sucesso: #145a27 sobre o fundo verde translúcido atinge ~6.4:1
     (ultrapassa com folga o limite mínimo de 4.5:1 da norma WCAG AA).
   - Erro: #b71c1c atinge ~6.8:1, garantindo leitura nítida e segura.
   -------------------------------------------------------------------- */
.contacto__feedback {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  display: none;
}

.contacto__feedback.is-success {
  display: block;
  background-color: rgba(20, 90, 39, 0.1);
  border: 1px solid #145a27;
  color: #145a27;
}

.contacto__feedback.is-error {
  display: block;
  background-color: rgba(183, 28, 28, 0.08);
  border: 1px solid #b71c1c;
  color: #b71c1c;
}

.contacto__map-wrap {
  position: relative;
  margin-top: var(--space-2);
}

.contacto__map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(201, 162, 78, 0.3);
}

.contacto__map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.contacto__map-action {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
}

.contacto__map-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1rem;
  background-color: var(--color-white);
  border-radius: 999px;
  box-shadow: 0 8px 20px -6px rgba(14, 42, 78, 0.35);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-blue-dark);
  transition:
    transform var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);
}

.contacto__map-btn-icon {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
}

.contacto__map-btn:hover,
.contacto__map-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(14, 42, 78, 0.4);
}

.contacto__map-btn:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .contacto__header {
    margin-bottom: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contacto__map-btn {
    transition: none !important;
  }

  .contacto__map-btn:hover,
  .contacto__map-btn:focus-visible {
    transform: none;
  }

  .contacto__input,
  .contacto__textarea,
  .contacto__field::after {
    transition: none !important;
  }
}