/* ===========================================================================
   FORMULARIOS: o aspecto do erro e do campo opcional
   Dash Digital, 16/08/2026. Tarefa F do PLANO-DESKTOP-UX.md.

   Estas regras servem so para a pessoa perceber, sem sair da pagina, qual e
   o campo que esta mal. Antes a unica pista era uma janela no fim a dizer
   "verifique os campos obrigatorios", sem dizer qual.

   As cores sao as da marca (o magenta #9A2686 do brandbook) excepto o
   vermelho do erro, que tem de ser inequivocamente vermelho.
   =========================================================================== */

.rcp-form .campo-erro,
.mk-marketing-form .campo-erro {
  border: 2px solid #dc2626 !important;
  background-color: #fff5f5;
}

.rcp-form .campo-erro:focus,
.mk-marketing-form .campo-erro:focus {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

.rcp-form .campo-aviso,
.mk-marketing-form .campo-aviso {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: #dc2626;
  font-weight: 600;
}

/* Na pagina de marketing os campos sao filhos diretos do <form>, sem <div>
   a separa-los. Sem esta folga o aviso de um campo fica colado a etiqueta do
   campo SEGUINTE e parece que e esse que esta mal. */
body .mk-marketing-form .campo-aviso {
  margin-bottom: 14px;
}

/* Dentro dos formularios de fundo roxo o vermelho escuro nao se le.
   Ali usa-se um vermelho claro sobre o gradiente. */
.form-wrapper .campo-aviso,
.form-wrapper-contacto .campo-aviso {
  color: #ffd4d4;
}

/* A etiqueta "opcional" do NIF. Dizer que e opcional AUMENTA a taxa de
   preenchimento dos campos obrigatorios, porque a pessoa percebe que nao
   e uma lista infinita de obrigacoes. */
.rcp-form .etiqueta-opcional,
.mk-marketing-form .etiqueta-opcional {
  font-weight: 400;
  opacity: 0.75;
  font-size: 0.875em;
}

/* O botao enquanto envia. Sem isto as pessoas clicavam duas vezes. */
.rcp-form button[aria-busy="true"],
.mk-marketing-form button[aria-busy="true"] {
  opacity: 0.65;
  cursor: progress;
}


/* ===========================================================================
   DUAS COLUNAS NO COMPUTADOR
   Dash Digital, 16/08/2026, aprovado pelo Luis.

   O PORQUE, medido a 1521px antes de mexer:

     formulario de contacto    611 x 916 px
     formulario de marketing   566 x 922 px
     altura de ecra disponivel         767 px

   Nenhum dos dois cabia no ecra. E nao era por causa de "muito espaco": era
   por serem OITO blocos empilhados numa coluna so. O campo do NIF, que leva
   nove digitos, tinha 611px de largura. Um campo largo promete um conteudo
   longo e induz em erro.

   Com duas colunas: 916 -> 580px, menos 37%, e passa a caber no ecra inteiro.
   O visitante ve o formulario todo de uma vez em vez de o descobrir a rolar.

   NO TELEMOVEL NAO SE TOCA. Abaixo de 1024px continua uma coluna, que e o
   correto num ecra estreito. Os campos de 50px de altura e a letra de 16px
   mantem-se: os 16px sao a regra que impede o iPhone de dar zoom automatico
   quando se toca no campo.
   =========================================================================== */

@media (min-width: 1024px) {

  /* O "body" a frente e para a /servicos-de-marketing/: o <style> dentro do
     PHP dessa pagina traz ".mk-marketing-form { display:flex; gap:0 !important }"
     e, por vir no corpo, ganha ao layout.css e a esta folha. E a mesma
     armadilha da Fase 1, da Fase 3 e da Fase 4. */
  body .rcp-form,
  body .mk-marketing-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 18px na vertical, nao 14: com 14 a etiqueta de uma linha ficava colada
       ao campo da linha de cima e parecia pertencer-lhe.
       O !important e a UNICA forma de vencer aqui: o <style> dentro do
       pagina-servicos-de-marketing.php traz "gap: 0px !important" e o
       !important ganha a qualquer especificidade. Medido: sem isto o espaco
       entre um campo e a etiqueta seguinte era de ZERO pixeis, e a etiqueta
       parecia pertencer ao campo de cima em vez do de baixo. */
    gap: 18px 20px !important;
    align-content: start;
  }

  /* Os campos dessa pagina trazem margin-bottom: 24px proprio, que somado ao
     gap da grelha daria 38px entre linhas. */
  body .mk-marketing-form input,
  body .mk-marketing-form select {
    margin-bottom: 0;
  }

  /* Sem isto um campo comprido alarga a coluna e desalinha as duas.
     E o mesmo min-width: 0 da Fase 1, noutro sitio. */
  .rcp-form > div,
  .mk-marketing-form > div {
    min-width: 0;
  }

  /* O que ocupa a linha toda: a mensagem, o aviso, o consentimento,
     o reCAPTCHA e o botao. */
  .rcp-form > div:has(textarea),
  .rcp-form > .form-consent,
  .rcp-form > .form-recaptcha,
  .rcp-form > .form-nota,
  .rcp-form > button,
  .mk-marketing-form > div:has(textarea),
  .mk-marketing-form > .form-consent,
  .mk-marketing-form > .form-recaptcha,
  .mk-marketing-form > .form-nota,
  .mk-marketing-form > button,
  /* O "Objetivo principal" e o campo que mais qualifica a lead, e e o unico
     impar da lista: sozinho a meia largura deixava um buraco ao lado. */
  .mk-marketing-form > div:has(#mk_objetivo) {
    grid-column: 1 / -1;
  }

  /* Mas o select nao precisa dos 566px todos para sete opcoes. */
  .mk-marketing-form #mk_objetivo {
    max-width: 430px;
  }

  .rcp-form textarea,
  .mk-marketing-form textarea {
    min-height: 96px;
  }
}

/* ---------------------------------------------------------------------------
   TELEMOVEL: a letra dos campos nunca abaixo de 16px

   Nao e questao de gosto. Quando um campo tem menos de 16px, o Safari do
   iPhone da ZOOM automatico assim que se lhe toca, e a pessoa fica com a
   pagina torta e tem de a endireitar a mao no meio de preencher.
   Medido a 390px: a /servicos-de-marketing/ tinha 15px, os outros tres ja
   tinham 16. Fica igual nos quatro.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* "body" a frente pela mesma razao de sempre: o <style> da
     /servicos-de-marketing/ esta no corpo da pagina e define os 15px. */
  body .rcp-form input,
  body .rcp-form select,
  body .rcp-form textarea,
  body .mk-marketing-form input,
  body .mk-marketing-form select {
    font-size: 16px;
  }
}

/* A nota que explica quais os campos obrigatorios. Passou a marcar-se so o
   que e OPCIONAL: quando quase tudo e obrigatorio, os asteriscos em todos os
   campos sao ruido e fazem o formulario parecer mais longo do que e. */
.form-nota {
  margin: 0 0 4px;
  font-size: 14px;
  opacity: 0.75;
}