/* ==========================================================================
   UdiSpace — Fale conosco (contato.css)
   Mobile-first. Usa tokens/classes do base.css.
   ========================================================================== */

/* ---------- Hero compacto ---------- */
.contato-hero{position:relative;overflow:hidden;background:var(--paper)}
.contato-hero-in{position:relative;z-index:1;padding:clamp(40px,7vw,90px) 0 clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:20px}
.contato-title{font-size:clamp(2.5rem,7vw,5.8rem);max-width:12ch}
@media (min-width:900px){.contato-hero-in{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}.contato-hero-in .lead{max-width:40ch;padding-bottom:10px}}

/* ---------- Split ---------- */
.contato-split{padding-top:clamp(20px,3vw,32px)}
.contato-grid{display:grid;gap:clamp(20px,3vw,40px)}
@media (min-width:1000px){.contato-grid{grid-template-columns:.9fr 1.25fr;align-items:start}}

/* canais */
.canais{display:flex;flex-direction:column;gap:12px}
@media (min-width:1000px){.canais{position:sticky;top:110px}}
.canal{display:flex;align-items:flex-start;gap:16px;text-align:left;width:100%;padding:20px 20px;border-radius:var(--radius-l);background:#fff;box-shadow:var(--shadow-s);position:relative;overflow:hidden;transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),opacity .8s var(--ease-out);isolation:isolate}
.canal::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(242,178,51,.14),rgba(200,80,47,.06));opacity:0;transition:opacity .5s;z-index:-1}
.canal:not(.canal-static):hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.canal:not(.canal-static):hover::before{opacity:1}
.canal-icon{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--paper-2);color:var(--ink);transition:transform .6s var(--ease-out),background .4s,color .4s}
.canal-icon svg{width:24px;height:24px}
.canal:hover .canal-icon{transform:rotate(-8deg) scale(1.08)}
.canal:hover .canal-icon-wa{background:#25D366;color:#fff}
.canal:hover .canal-icon-mail{background:var(--terra);color:#fff}
.canal:hover .canal-icon-pin{background:var(--ipe);color:var(--ink)}
.canal-icon-clock{background:var(--paper-2);color:var(--cerrado)}
.canal-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.canal-label{font-family:var(--font-display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--mist)}
.canal-valor{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;line-height:1.25;word-break:break-word}
.canal-desc{font-size:.85rem;color:var(--mist);line-height:1.45;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.canal-arrow{flex:none;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--mist);transition:transform .45s var(--ease-out),color .3s;align-self:center}
.canal-arrow svg{width:18px;height:18px}
.canal:hover .canal-arrow{transform:translate(3px,-3px);color:var(--ink)}
.canal.is-copied .canal-copy-icon{color:var(--cerrado);transform:scale(1.2)}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--mist);flex:none;position:relative}
.status-dot.on{background:#22c55e}
.status-dot.on::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pulse 2s ease-out infinite}
.status-dot.off{background:var(--terra)}

/* form card */
.page-contato [hidden]{display:none!important}
.form-card{position:relative;background:#fff;border-radius:var(--radius-xl);padding:clamp(24px,3.5vw,44px);box-shadow:var(--shadow);overflow:hidden}
.form-card::after{content:"";position:absolute;top:-80px;right:-80px;width:220px;height:220px;border-radius:50%;background:var(--ipe);filter:blur(70px);opacity:.28;pointer-events:none}
.form-head{margin-bottom:26px;position:relative;z-index:1}
.form-head .h3{max-width:20ch}
.contato-form{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1;transition:opacity .45s,transform .5s var(--ease-out)}
.contato-form.is-out{opacity:0;transform:translateY(-14px) scale(.98);pointer-events:none}
.form-row{display:grid;gap:16px}
@media (min-width:600px){.form-row{grid-template-columns:1fr 1fr}}

/* floating labels */
.fl{position:relative;display:flex;flex-direction:column}
.fl .input,.fl .select,.fl .textarea{padding:24px 18px 10px;line-height:1.3;background:var(--paper)}
.fl .select{padding-right:44px}
.fl .textarea{min-height:150px;padding-top:28px}
.fl label{position:absolute;left:18px;top:18px;font-size:.95rem;color:var(--mist);pointer-events:none;transform-origin:left top;transition:transform .3s var(--ease-out),color .3s;font-weight:500}
.fl .input:focus ~ label,.fl .input:not(:placeholder-shown) ~ label,
.fl .textarea:focus ~ label,.fl .textarea:not(:placeholder-shown) ~ label,
.fl-select label{transform:translateY(-11px) scale(.72);color:var(--ink);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.fl .input:focus,.fl .select:focus,.fl .textarea:focus{background:#fff}
.fl-err{font-size:.78rem;color:var(--terra);font-weight:600;margin-top:6px;min-height:0;max-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:max-height .35s var(--ease-out),opacity .3s,transform .3s var(--ease-out)}
.fl.is-invalid .fl-err{max-height:40px;opacity:1;transform:none}
.fl.is-invalid .input,.fl.is-invalid .select,.fl.is-invalid .textarea{border-color:var(--terra);box-shadow:0 0 0 4px rgba(200,80,47,.14)}
.fl.is-invalid label{color:var(--terra)}
.fl.is-valid .input,.fl.is-valid .select,.fl.is-valid .textarea{border-color:var(--cerrado-2)}
.fl.is-valid::after{content:"";position:absolute;right:16px;top:20px;width:9px;height:14px;border-right:2.5px solid var(--cerrado-2);border-bottom:2.5px solid var(--cerrado-2);transform:rotate(45deg) scale(0);animation:checkIn .4s var(--ease-out) forwards}
.fl.fl-select.is-valid::after{right:44px}
@keyframes checkIn{to{transform:rotate(45deg) scale(1)}}
.fl.shake{animation:shake .5s var(--ease-out)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
.fl-count{position:absolute;right:14px;bottom:10px;font-size:.72rem;color:var(--mist);font-weight:600;letter-spacing:.04em;pointer-events:none;transition:color .3s}
.fl-count.is-max{color:var(--terra)}
.fl.is-invalid .fl-count{bottom:36px}

/* botão com estado de loading */
.form-submit{width:100%;position:relative}
.form-submit .btn-loading{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease-out)}
.form-submit .btn-label{display:inline-flex;align-items:center;gap:10px;transition:opacity .3s,transform .4s var(--ease-out)}
.form-submit.is-loading{pointer-events:none;transform:none!important}
.form-submit.is-loading .btn-label{opacity:0;transform:translateY(-8px)}
.form-submit.is-loading .btn-loading{opacity:1;transform:none}
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.form-privacy{text-align:center;margin:2px 0 0}

/* sucesso */
.form-success{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(10px,2vw,20px) 0;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s var(--ease-out) .1s,transform .7s var(--ease-out) .1s}
.form-success.in{opacity:1;transform:none}
.form-success .h3{max-width:20ch}
.success-mark{width:96px;height:96px;margin-bottom:8px}
.success-mark svg{width:100%;height:100%;overflow:visible}
.sm-circle{fill:none;stroke:var(--cerrado-2);stroke-width:3;stroke-dasharray:190;stroke-dashoffset:190;transform:rotate(-90deg);transform-origin:center}
.sm-check{fill:none;stroke:var(--cerrado);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44}
.form-success.in .sm-circle{animation:draw .9s var(--ease-out) .2s forwards}
.form-success.in .sm-check{animation:draw .5s var(--ease-out) .9s forwards}
.form-success.in .success-mark{animation:pop .6s var(--ease-out) 1.2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{30%{transform:scale(1.08)}100%{transform:scale(1)}}
.success-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
@media (prefers-reduced-motion:reduce){.sm-circle,.sm-check{stroke-dashoffset:0;animation:none}.form-success{transition:none;opacity:1;transform:none}.fl.shake{animation:none}}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:960px){.faq-grid{grid-template-columns:.9fr 1.1fr;align-items:start}}
.faq-intro{display:flex;flex-direction:column;align-items:flex-start}
.faq-intro .h2{max-width:14ch}
.faq-intro .btn{margin-top:22px}
.faq-list details{background:#fff;border:0;border-radius:var(--radius);padding:4px 22px;margin-bottom:10px;transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out)}
.faq-list details:hover{box-shadow:var(--shadow-s)}
.faq-list details[open]{box-shadow:var(--shadow);transform:translateY(-2px)}
.faq-list summary{padding:18px 0;font-size:1.02rem}
.faq-list .acc-body{animation:accIn .5s var(--ease-out)}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Mapa fake ---------- */
.contato-mapa{position:relative;overflow:hidden}
.contato-mapa .section-head .h2{max-width:20ch}
.mapa-box{position:relative;border-radius:var(--radius-xl);overflow:hidden;background:var(--ink-2);border:1px solid var(--line-dark);aspect-ratio:16/9;min-height:360px;box-shadow:var(--shadow-l)}
@media (max-width:640px){.mapa-box{aspect-ratio:4/5}}
.mapa-fake{position:absolute;inset:0;width:100%;height:100%}
.mapa-quadras rect{fill:rgba(246,242,234,.05);stroke:rgba(246,242,234,.1);stroke-width:1;transition:fill .4s}
.mapa-quadras rect:hover{fill:rgba(242,178,51,.12)}
.mapa-praca{fill:rgba(46,92,78,.55);stroke:rgba(63,122,103,.9);stroke-width:1.5}
.mapa-praca-arvore{fill:rgba(63,122,103,.85)}
.mapa-ruas path{fill:none;stroke:rgba(246,242,234,.18);stroke-width:14;stroke-linecap:round}
.mapa-rua{font-family:var(--font-body);font-weight:600;font-size:12px;fill:rgba(246,242,234,.45);letter-spacing:.04em}
.mapa-rua-praca{font-family:var(--font-display);font-weight:700;fill:rgba(246,242,234,.8);font-size:12px}
.mapa-rota{fill:none;stroke:var(--ipe);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200;opacity:.9;transition:stroke-dashoffset 2.4s var(--ease-out) .5s}
.mapa-box.in .mapa-rota{stroke-dashoffset:0}
.mapa-pin-glow{opacity:0;transition:opacity 1.2s 2.4s}
.mapa-box.in .mapa-pin-glow{opacity:1;animation:glowBreath 4s ease-in-out infinite 3.6s}
@keyframes glowBreath{50%{opacity:.55}}
.mapa-pulse{width:24px;height:24px;background:var(--ipe);border:4px solid var(--ink);box-shadow:0 0 0 2px var(--ipe)}
.mapa-pulse::after{animation-duration:1.8s}
.mapa-card{position:absolute;left:clamp(14px,2.5vw,28px);bottom:clamp(14px,2.5vw,28px);max-width:min(380px,calc(100% - 28px));border-radius:var(--radius-l);padding:20px 22px;display:flex;flex-direction:column;gap:6px;color:var(--paper);z-index:2}
.mapa-card .badge{align-self:flex-start;margin-bottom:6px}
.mapa-card-end{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.01em;line-height:1.3}
.mapa-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mapa-card .btn-ghost{color:var(--paper)}
@media (prefers-reduced-motion:reduce){.mapa-rota{stroke-dashoffset:0;transition:none}.mapa-pin-glow{opacity:1;animation:none}}

/* ---------- CTA linha ---------- */
.cta-linha{display:flex;flex-direction:column;gap:20px;padding:clamp(24px,3vw,36px);border-radius:var(--radius-l);background:#fff;box-shadow:var(--shadow-s);border:1px solid var(--line)}
@media (min-width:800px){.cta-linha{flex-direction:row;align-items:center;justify-content:space-between}}

/* ---------- WhatsApp flutuante ---------- */
.wa-fab{position:fixed;right:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);z-index:90;display:inline-flex;align-items:center;gap:10px;padding:8px 8px;border-radius:var(--pill);background:#25D366;color:#fff;box-shadow:0 14px 40px -10px rgba(37,211,102,.6),var(--shadow);font-family:var(--font-display);font-weight:700;font-size:.9rem;transform:translateY(120%);opacity:0;transition:transform .7s var(--ease-out),opacity .5s,box-shadow .4s}
.wa-fab.show{transform:none;opacity:1}
.wa-fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 18px 50px -10px rgba(37,211,102,.8),var(--shadow-l)}
.wa-fab-icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none;position:relative}
.wa-fab-icon::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.35);animation:pulse 2.4s ease-out infinite;z-index:-1}
.wa-fab-icon svg{width:24px;height:24px}
.wa-fab-txt{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .6s var(--ease-out),opacity .4s,padding .4s}
.wa-fab.expanded .wa-fab-txt,.wa-fab:hover .wa-fab-txt{max-width:200px;opacity:1;padding-right:12px}
.wa-fab.hide-on-fab{transform:translateY(120%);opacity:0}
@media (prefers-reduced-motion:reduce){.wa-fab-icon::after{animation:none}}