/* 16-contato: Seção Contato e formulário. */

/* contato */
.contact .display{max-width:19ch;font-size:clamp(2.4rem, 1.2rem + 3.8vw, 4.75rem);}
/* o problema entra menor e em cinza; a pergunta e o "Isso é GRAVIS." ficam com o peso */
.contact .display .c-intro{font-size:.42em;letter-spacing:-.01em;color:var(--muted-on-dark);}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,112px);margin-top:clamp(56px,6vw,96px);align-items:start;}
.direct{display:grid;gap:28px;}
.direct .who{font-weight:800;font-stretch:108%;font-size:var(--t-h3);margin:0;}
.direct .role{display:block;color:var(--muted-on-dark);font-size:var(--t-small);margin-top:4px;}
.direct .deets{margin:10px 0 0;color:#dcdcdc;}
.direct .deets a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
.direct .deets a:hover{color:var(--white);}
.direct .link-line{color:var(--white);}
.direct .locale{color:var(--muted-on-dark);margin:0;}
.form{display:grid;gap:18px;}
.field{display:grid;gap:8px;}
.field label{font-size:var(--t-small);font-weight:600;color:#d0d0d0;}
.field input,.field select,.field textarea{
  width:100%;
  font:inherit;font-size:1rem;color:var(--white);
  background:transparent;
  border:0;border-bottom:1px solid rgb(255 255 255 / .38);
  border-radius:0;
  padding:10px 0 12px;
  transition:border-color .3s;
}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 12px) 55%, calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat;}
.field select option{color:var(--ink);}
.field textarea{resize:vertical;min-height:88px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--red);}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{box-shadow:0 2px 0 0 var(--red);}
.form .btn{justify-self:start;margin-top:12px;}
/* aceite da Política de Privacidade (LGPD): caixinha quadrada, vermelha quando marcada */
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:6px;font-size:var(--t-small);line-height:1.5;color:#d0d0d0;cursor:pointer;}
.consent input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:20px;height:20px;margin:1px 0 0;border:1.5px solid rgb(255 255 255 / .6);border-radius:0;
  background:transparent;display:grid;place-content:center;cursor:pointer;transition:background .2s,border-color .2s;
}
.consent input::after{content:"";width:10px;height:6px;border:solid var(--white);border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .2s var(--ease-out);}
.consent input:checked{background:var(--red);border-color:var(--red);}
.consent input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1);}
.consent a{color:var(--white);text-decoration:underline;text-underline-offset:3px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
/* cortina final: o Contato (1) sobe por cima das Perguntas (0) e por baixo do diagrama de fundo
   (z-index 1, que vem depois no HTML); o bloco grudado das Perguntas fica numa camada própria */
.curtain-hold{z-index:0;}
.contact{z-index:1;}
/* calendário do formulário (o visual do calendário vem de js/agenda.js) */
.field-agenda{margin-top:10px;gap:14px;}
.field-agenda[hidden]{display:none;}
.field-agenda .label{font-size:var(--t-small);font-weight:600;color:#d0d0d0;}
.field-agenda.invalid .label{color:#ff5a5a;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form{position:relative;}
.form-status{margin:0;font-size:var(--t-small);color:#d0d0d0;min-height:1.5em;}
.form-status[data-tipo="erro"]{color:#ff5a5a;}
.form-feito{display:grid;gap:14px;align-content:start;}
.form-feito h3{margin:0;font-weight:800;font-stretch:108%;font-size:var(--t-h3);}
.form-feito p{margin:0;color:#d0d0d0;}
.form-feito strong{color:var(--white);}
.form-feito a{color:var(--white);text-decoration:underline;text-underline-offset:3px;}