/* =========================================================================
   ux.css — ajustes da auditoria das leis de UX (UX-LEIS-AUDITORIA.md).
   Carregado POR ÚLTIMO no <head> de todas as páginas, depois dos <style>
   inline, para valer sobre styles/niche-v4/solucao/sobre e o CSS da home.
   ========================================================================= */

/* ---- Fitts: alvos de toque com no mínimo 44px ---- */
.menu-btn{min-width:44px;min-height:44px;display:none;align-items:center;justify-content:center;padding:0;margin-right:-10px}
@media(max-width:1080px){.menu-btn{display:inline-flex}}
@media(max-width:1080px){.nav-cta .btn{min-height:44px}}
.map-link,.post a.more,.crumbs a,.breadcrumb a{display:inline-block;padding:6px 0;min-height:24px}

/* card do blog inteiro clicável (o link "Ler artigo" se estende pelo card).
   Só dentro de .blog-grid: no WordPress o <article> do post aberto também tem a classe "post". */
.blog-grid .post{position:relative}
.blog-grid .post a.more::after{content:"";position:absolute;inset:0;z-index:1}
.blog-grid .post a.more:focus-visible{outline:none}
.blog-grid .post:focus-within{outline:2px solid var(--gold);outline-offset:2px}

/* header no celular: CTA com 44px de altura sem encostar no logo */
@media(max-width:480px){
  .nav-cta{gap:6px}
  .nav-cta .btn-gold{padding:8px 10px;font-size:.76rem}
  header .logo img{height:36px}
}
@media(max-width:380px){
  header .wrap.nav{padding-left:16px;padding-right:16px}
  header .logo img{height:31px}
}
@media(max-width:340px){.nav-cta .btn-gold{display:none}}

/* link "Pular para o conteúdo" (a home não carrega o niche-v4.css, onde ele já existia) */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--gold);color:#15120a;padding:10px 16px;border-radius:0 0 4px 0;font-weight:600;font-size:.9rem}
.skip:focus{left:0}

/* ---- Jakob: "Área do Cliente" dentro do menu quando o botão some (≤1180px) ---- */
.nav-links .nav-only-m{display:none}
@media(max-width:1180px){.nav-links .nav-only-m{display:inline-block}}

/* ---- Von Restorff: dourado preenchido só no CTA principal da tela ----
   O CTA do header vira contorno dourado; o hero mantém o botão cheio. */
.nav-cta .btn-gold{background:transparent;border:1px solid var(--gold);color:var(--gold-light)}
.nav-cta .btn-gold:hover{background:var(--gold-soft);color:var(--gold-light);box-shadow:none;transform:none}
header.scrolled .nav-cta .btn-gold,header .nav-cta .btn-gold{box-shadow:none}

/* "Saiba mais" das soluções (home): de botão sólido para contorno, caixa normal */
.atu .sm{background:transparent;color:var(--black);border:1px solid rgba(25,53,77,.28);
  font-family:inherit;font-size:.9rem;font-weight:600;letter-spacing:0;text-transform:none;padding:12px 10px}
.atu .sm:hover{background:var(--black);color:#fff;border-color:var(--black)}

/* ---- Semelhança: textos simples do rodapé com o mesmo peso dos links ---- */
.foot-grid li{color:var(--grey);font-size:.9rem}

/* ---- Conectividade uniforme: régua da troca não vaza no mobile ---- */
@media(max-width:600px){
  .troca-bp .rule .cota:first-child,.troca-bp .rule .cota:last-child{display:none}
  .troca-bp .rule .cota{white-space:normal;text-align:center;letter-spacing:.12em}
}

/* Trabalhe Conosco: o campo de arquivo (nowrap) alargava a coluna do grid para 442px no celular */
.work-grid>*,.contact-grid>*{min-width:0}

/* ---- Fitts (mobile): WhatsApp flutuante só aparece depois do topo ----
   ux.js põe .wa-hide no <html> enquanto o hero está na tela. Sem JS, o botão fica visível. */
.wa-float{transition:opacity .3s,transform .3s,bottom .3s}
html.wa-hide .wa-float{opacity:0;transform:translateY(16px) scale(.9);pointer-events:none}

/* ---- Postel: sugestão de e-mail digitado errado ---- */
.mail-hint{display:block;margin-top:6px;font-size:.82rem;color:var(--grey)}
.mail-hint.bad{color:#e05a5a}
.mail-hint button{background:none;border:none;padding:4px 0;color:var(--gold-light);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}

/* ---- Miller / Zeigarnik: modal em etapas ---- */
.form-steps{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:.78rem;color:var(--grey);letter-spacing:.06em;text-transform:uppercase}
.form-steps .bar{flex:1;height:3px;background:rgba(197,167,103,.18);border-radius:2px;overflow:hidden}
.form-steps .bar i{display:block;height:100%;width:50%;background:var(--gold);transition:width .3s}
.form-steps[data-step="2"] .bar i{width:100%}
.form-step[hidden],.modal-actions[hidden]{display:none}
/* "Enviar e falar no WhatsApp" não cabe lado a lado no celular: empilha */
@media(max-width:520px){
  .modal-actions{flex-direction:column}
  .modal-actions .btn{flex:none;width:100%;white-space:normal;padding-left:14px;padding-right:14px}
  .modal{padding:16px}
  .form-box{padding:28px 16px 20px}
  .form-box form{padding:20px 16px}
}