/* =====================================================================
   AHAV · FORMULÁRIO DE CONTATO + MÃO 3D
   Usado por: Home (seção 6 · Contato) e Contato (seção 1).
   As cores do texto girando (.rf / .rb) ficam no CSS de cada página.

   ÍNDICE
   1. Layout (texto à esquerda, formulário à direita)
   2. Formulário
   3. Mão 3D com texto girando
   4. Responsivo
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. LAYOUT
   --------------------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;max-width:1216px;margin-inline:auto}
.contact .stack{display:flex;flex-direction:column;gap:20px}


/* ---------------------------------------------------------------------
   2. FORMULÁRIO
   --------------------------------------------------------------------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;background:#f2e9d7;color:#000;border-radius:32px;padding:36px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:1/-1}
.field.send{align-items:flex-start}
.field label,.flabel{font-size:14px;font-weight:700;line-height:1.3}
/* campos */
.ah .inp{width:100%;min-height:52px;border-radius:12px;border:1.5px solid rgba(0,0,0,.38);background:#fff;padding:12px 16px;font:400 16px/1.4 Poppins,system-ui,sans-serif;color:#000}
.ah .inp:hover{border-color:#000}
.ah .inp:focus-visible{outline:3px solid #6b2ea0;outline-offset:1px;border-color:#6b2ea0}
.ah .inp:disabled{background:#ece2cd;border-style:dashed;cursor:not-allowed}
.ah .inp[aria-invalid="true"]{border-color:#f05444;border-width:2px}
.ah textarea.inp{min-height:140px;resize:vertical}
/* textos de ajuda e erro */
.hint{font-size:13px;line-height:1.5;color:rgba(0,0,0,.72)}
.err{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5;color:#000}
.err::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#f05444}
/* "Ainda não tenho um orçamento definido" */
.check{display:flex;gap:12px;align-items:center;min-height:44px;font-size:14px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:#6b2ea0;cursor:pointer}


/* ---------------------------------------------------------------------
   3. MÃO 3D COM TEXTO GIRANDO
   As letras são geradas pelo site.js (Ahav.ring).
   --------------------------------------------------------------------- */
.hand3d{--fs:42px;position:relative;width:460px;max-width:100%;aspect-ratio:4/5;margin:24px auto 0;perspective:1200px}
.h-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-22deg) rotateZ(-20deg)}
.h-img{position:absolute;left:12%;top:9.5%;width:76%;height:auto;display:block;transform:rotateZ(20deg) rotateX(22deg);-webkit-mask-image:linear-gradient(to bottom,transparent 5%,#000 26%);mask-image:linear-gradient(to bottom,transparent 5%,#000 26%)}
.h-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;animation:ringspin 22s linear infinite}
.rc{position:absolute;left:0;top:calc(var(--fs) * -.6);height:calc(var(--fs) * 1.2);font:700 var(--fs)/1.2 Poppins,system-ui,sans-serif;text-align:center;white-space:pre;-webkit-backface-visibility:hidden;backface-visibility:hidden}
@keyframes ringspin{from{transform:rotateY(0deg)}to{transform:rotateY(-360deg)}}


/* ---------------------------------------------------------------------
   4. RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .contact{grid-template-columns:1fr;gap:40px}
  .form{grid-template-columns:1fr;padding:20px}
}
@media (max-width:600px){
  .hand3d{--fs:26px;width:300px}
}
@media (prefers-reduced-motion:reduce){
  .h-ring{animation:none}
}