/* Pop-up de contato do Francisco Canto.
   Paleta e tipografia da propria landing: laranja #ea5f31, marrom #241f19,
   Bricolage Grotesque nos titulos e Instrument Sans no corpo. O circulo e o
   botao ficam no verde do WhatsApp porque e para la que a pessoa vai.

   Celular: a caixa fica CENTRALIZADA e usa dvh (altura real da janela), entao
   quando o teclado sobe a caixa encolhe junto e o campo em foco continua a
   vista. O popup.js ainda rola o campo focado para o meio, por garantia. */

.fc-modal{position:fixed;inset:0;z-index:99999;background:rgba(36,31,25,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:18px;box-sizing:border-box}
.fc-modal.on{display:flex;animation:fc-fade .22s ease-out}
.fc-modal *,.fc-modal *::before,.fc-modal *::after{box-sizing:border-box}

.fc-modal-box{position:relative;background:#fffaf3;color:#241f19;width:min(460px,100%);max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:22px;padding:36px 30px 26px;box-shadow:0 30px 80px -20px rgba(36,31,25,.6),0 0 0 1px rgba(36,31,25,.06);font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;animation:fc-sobe .28s cubic-bezier(.2,.7,.2,1)}
.fc-modal-box::-webkit-scrollbar{width:0;height:0;display:none}
.fc-modal-box::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,#ea5f31,#f5a06f 60%,#ea5f31);z-index:2}

/* patinhas de enfeite, iguais as da landing: ficam atras do conteudo */
.fc-pata{position:absolute;color:#ea5f31;opacity:.1;pointer-events:none;z-index:0;line-height:0}
.fc-pata svg{width:100%;height:auto;display:block}
.fc-pata-1{width:86px;top:16px;right:-14px;transform:rotate(18deg)}
.fc-pata-2{width:62px;bottom:74px;left:-16px;transform:rotate(-24deg)}
.fc-pata-3{width:44px;top:132px;right:-6px;transform:rotate(-8deg);opacity:.07}
.fc-pata-4{width:52px;bottom:14px;right:28px;transform:rotate(32deg);opacity:.08}
/* o conteudo fica por cima das patinhas */
.fc-modal-box > *:not(.fc-pata){position:relative;z-index:1}

#fc-modal .fc-modal-x{position:absolute;right:12px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:#8a7f73;font-size:28px;line-height:1;cursor:pointer;transition:background .18s,color .18s;z-index:3}
#fc-modal .fc-modal-x:hover{background:rgba(36,31,25,.07);color:#241f19}

.fc-modal-ico{width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;margin:0 0 16px;box-shadow:0 10px 26px -8px rgba(37,211,102,.7)}
.fc-modal-ico svg{width:30px;height:30px}

#fc-modal h2{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:1.6rem;line-height:1.1;margin:0 0 8px;color:#241f19}
#fc-modal .fc-modal-lede{font-size:.95rem;line-height:1.5;color:#5a5048;margin:0 0 20px}

#fc-modal .fc-campo{margin:0 0 14px}
#fc-modal .fc-campo label{display:block;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.02em;color:#6b6054;margin:0 0 6px}
#fc-modal .fc-campo input,#fc-modal .fc-campo textarea{width:100%;font-family:inherit;font-size:16px;color:#241f19;background:#fff;border:1px solid #e2d8ca;border-radius:12px;padding:13px 14px;transition:border-color .18s,box-shadow .18s;-webkit-appearance:none;appearance:none;scroll-margin:90px}
#fc-modal .fc-campo textarea{resize:vertical;min-height:84px;line-height:1.45}
#fc-modal .fc-campo input::placeholder,#fc-modal .fc-campo textarea::placeholder{color:#a79b8c}
#fc-modal .fc-campo input:focus,#fc-modal .fc-campo textarea:focus{outline:0;border-color:#ea5f31;box-shadow:0 0 0 3px rgba(234,95,49,.18)}
#fc-modal .fc-campo input.fc-erro,#fc-modal .fc-campo textarea.fc-erro{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.14)}

/* campo-isca contra robo: fica fora da tela, ninguem ve nem tabula ate ele */
#fc-modal .fc-campo-mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

#fc-modal .fc-btn-pop{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 0;border:0;border-radius:999px;background:#25D366;color:#fff;font-family:'Bricolage Grotesque',system-ui,sans-serif;font-weight:700;font-size:1.02rem;padding:16px 22px;cursor:pointer;box-shadow:0 14px 32px -12px rgba(37,211,102,.75);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
#fc-modal .fc-btn-pop:hover{transform:translateY(-2px);background:#1fbb5a}
#fc-modal .fc-btn-pop[disabled]{opacity:.65;cursor:default;transform:none}
#fc-modal .fc-btn-pop svg{width:21px;height:21px;flex:none}

#fc-modal .fc-modal-nota{font-size:.78rem;color:#8a7f73;text-align:center;margin:14px 0 0}
body.fc-modal-aberto{overflow:hidden}

@keyframes fc-fade{from{opacity:0}to{opacity:1}}
@keyframes fc-sobe{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- celular ---------- */
@media (max-width:600px){
  .fc-modal{padding:12px;align-items:center}
  .fc-modal-box{width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-radius:20px;padding:28px 20px 20px}
  .fc-modal-box::before{border-radius:20px 20px 0 0}
  #fc-modal h2{font-size:1.38rem}
  #fc-modal .fc-modal-lede{font-size:.9rem;margin:0 0 16px}
  .fc-modal-ico{width:48px;height:48px;margin:0 0 12px}
  .fc-modal-ico svg{width:26px;height:26px}
  #fc-modal .fc-campo{margin:0 0 12px}
  #fc-modal .fc-campo textarea{min-height:68px}
  /* patinhas menores, para nao competir com o texto na tela pequena */
  .fc-pata-1{width:64px;top:10px;right:-10px}
  .fc-pata-2{width:46px;bottom:64px;left:-12px}
  .fc-pata-3{display:none}
  .fc-pata-4{width:40px;bottom:12px;right:18px}
}

/* tela baixa (celular deitado, ou teclado aberto ocupando quase tudo):
   o enfeite sai da frente e o formulario ganha o espaco */
@media (max-height:620px){
  .fc-modal-box{padding-top:22px}
  .fc-modal-ico{width:40px;height:40px;margin:0 0 10px}
  .fc-modal-ico svg{width:22px;height:22px}
  #fc-modal h2{font-size:1.22rem}
  #fc-modal .fc-modal-lede{display:none}
  #fc-modal .fc-modal-nota{display:none}
  .fc-pata{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fc-modal.on,.fc-modal-box{animation:none}
  #fc-modal .fc-btn-pop:hover{transform:none}
}

/* ---------- botao flutuante de WhatsApp ----------
   Acompanha a rolagem no site inteiro. E um link de verdade para o WhatsApp,
   entao funciona mesmo se o JavaScript falhar; com o JS ligado, o popup.js
   intercepta como faz com qualquer link de WhatsApp e abre o pop-up.
   Recolhido ele e redondo, so o simbolo; no computador abre e mostra o texto
   quando o mouse chega perto. Some enquanto o pop-up esta aberto. */
.fc-flutua{position:fixed;z-index:9998;right:18px;bottom:18px;right:calc(18px + env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 14px;box-sizing:border-box;border-radius:999px;background:#25D366;color:#fff;text-decoration:none;font-family:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:15px;line-height:1;box-shadow:0 14px 34px -10px rgba(37,211,102,.75),0 2px 8px rgba(36,31,25,.18);transition:transform .2s ease,box-shadow .2s ease,background .2s ease,opacity .25s ease;animation:fc-flutua-entra .42s cubic-bezier(.2,.8,.2,1)}
.fc-flutua svg{width:30px;height:30px;flex:none;display:block;fill:currentColor}
.fc-flutua span{white-space:nowrap;max-width:0;margin-left:0;overflow:hidden;opacity:0;transition:max-width .3s ease,margin-left .3s ease,opacity .22s ease}
.fc-flutua:hover{background:#1fbb5a;transform:translateY(-3px);box-shadow:0 22px 46px -12px rgba(37,211,102,.85),0 2px 8px rgba(36,31,25,.2)}
.fc-flutua:hover span,.fc-flutua:focus-visible span{max-width:240px;margin-left:10px;opacity:1}
.fc-flutua:focus-visible{outline:3px solid #241f19;outline-offset:3px}
body.fc-modal-aberto .fc-flutua{opacity:0;pointer-events:none}
@keyframes fc-flutua-entra{from{transform:translateY(18px) scale(.9)}to{transform:none}}

@media (max-width:600px){
  .fc-flutua{height:54px;padding:0 13px;right:14px;bottom:14px;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
  .fc-flutua svg{width:28px;height:28px}
  /* no celular fica so o simbolo: texto ao lado roubaria leitura da pagina */
  .fc-flutua span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fc-flutua{animation:none}
  .fc-flutua:hover{transform:none}
}