/* Catalogo publico de modelos (vitrine) e visualizador de demonstracao */
.cat-head{padding:64px 0 28px;background:linear-gradient(180deg,#eef3ff,#fff)}
.cat-head h1{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:12px}
.cat-head .lead{max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips a{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:700;font-size:.9rem;text-decoration:none;transition:.15s}
.chips a:hover{border-color:var(--blue);color:var(--blue)}
.chips a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.cat-grid{padding:28px 0 90px}
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.mcard[hidden]{display:none}
.mcard{flex:0 1 300px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.mcard .shot{position:relative;display:block;aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--bg);border:1px solid var(--line);box-shadow:0 10px 26px rgba(11,31,54,.09);transition:.2s}
.mcard .shot img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;transition:transform .35s}
.mcard .view{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,31,54,.5);opacity:0;transition:.2s}
.mcard .view i{font-style:normal;font-weight:800;color:#fff;background:var(--blue);padding:10px 20px;border-radius:999px;font-size:.9rem}
.mcard:hover .shot,.mcard:focus-visible .shot{transform:translateY(-3px);box-shadow:0 18px 36px rgba(11,31,54,.16)}
.mcard:hover .shot img{transform:scale(1.04)}
.mcard:hover .view,.mcard:focus-visible .view{opacity:1}
.mcard .mi{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mcard .mi b{font-size:1.05rem;color:var(--navy)}
.mcard .md{color:var(--muted);font-size:.86rem;line-height:1.45}
.sw{display:flex;gap:4px;font-style:normal;margin:0}.sw i{width:14px;height:14px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.12)}

/* ---------- visualizador ---------- */
body.viewer{margin:0;height:100vh;display:flex;flex-direction:column;background:#e6eaf2;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden}
.vbar{position:fixed;top:0;left:0;right:0;z-index:50;height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 16px;background:#0b1f36;color:#fff;box-shadow:0 2px 14px rgba(0,0,0,.25)}
.vbar-l,.vbar-r{display:flex;align-items:center;gap:10px;min-width:0}
.vbar-r{justify-content:flex-end}
.vbtn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font:700 .9rem/1 inherit;font-family:inherit;color:#fff;background:#447fff;padding:11px 18px;border-radius:999px;text-decoration:none;white-space:nowrap}
.vbtn.ghost{background:rgba(255,255,255,.12)}
.vbtn.ghost:hover{background:rgba(255,255,255,.22)}
.vbtn.want{background:#447fff}
.vbtn.want:hover{filter:brightness(.94)}
.vbtn.want.big{width:100%;justify-content:center;padding:14px;margin-top:28px}
.vname{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.vname b{font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vname small{color:#a9b8d0;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vnav{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;flex:none}
.vnav:hover{background:rgba(255,255,255,.22)}
.vdev{display:flex;gap:4px;background:rgba(255,255,255,.1);padding:4px;border-radius:999px}
.vdev button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#cdd9ee;font:700 .85rem/1 inherit;font-family:inherit;padding:9px 14px;border-radius:999px;cursor:pointer}
.vdev button.on{background:#fff;color:#0b1f36}
.vdev i{font-size:1.05rem}
.stage{flex:1;margin-top:60px;display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:0}
.frame{height:100%;width:100%;background:#fff;transition:width .3s ease,margin .3s ease,border-radius .3s}
.frame.tablet{width:820px;max-width:100%;margin:22px 0;height:calc(100% - 44px);border-radius:22px;box-shadow:0 0 0 10px #101a2b,0 30px 60px rgba(11,31,54,.35);overflow:hidden}
.frame.mobile{width:390px;max-width:100%;margin:22px 0;height:calc(100% - 44px);border-radius:30px;box-shadow:0 0 0 10px #101a2b,0 30px 60px rgba(11,31,54,.35);overflow:hidden}
.frame iframe{display:block;width:100%;height:100%;border:0;background:#fff}

.want-dlg{border:0;border-radius:18px;padding:0;width:min(520px,94vw);box-shadow:0 30px 80px rgba(11,31,54,.4)}
.want-dlg::backdrop{background:rgba(11,31,54,.6)}
.want-dlg form{padding:30px 30px 26px;position:relative;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.want-dlg h2{font-size:1.4rem;margin:0 26px 6px 0;color:#0b1f36}
.want-dlg p{margin:0 0 14px;color:#5b6b7f;font-size:.93rem}
.want-dlg .x{position:absolute;top:12px;right:14px;border:0;background:none;font-size:1.8rem;line-height:1;cursor:pointer;color:#5b6b7f}
.want-dlg label{display:block;font-weight:700;font-size:.85rem;color:#16263b;margin-top:20px}
.want-dlg input,.want-dlg textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid #d7dfec;border-radius:10px;font:inherit;font-weight:400}
.want-dlg input:focus,.want-dlg textarea:focus{outline:2px solid #447fff;border-color:#447fff}
.want-dlg .two{display:block}
.hp{position:absolute;left:-9999px}
.fmsg{min-height:1.2em;margin:12px 0 0;font-weight:700;font-size:.9rem;text-align:center}
.fmsg.ok{color:#14633d}.fmsg.err{color:#a3321a}

@media(max-width:860px){
  .vbar{grid-template-columns:1fr auto;height:auto;min-height:60px;padding:8px 12px;row-gap:8px}
  .vbar-l{grid-column:1 / 3}
  .vdev{grid-row:2;grid-column:1}
  .vbar-r{grid-row:2;grid-column:2}
  .vdev button span,.vbtn span{display:none}
  .vdev button,.vbtn{padding:10px 13px}
  .vbtn.want span{display:inline}
  .vbtn.ghost span{display:inline}
  .stage{margin-top:108px}
  .frame.tablet,.frame.mobile{margin:12px 0;height:calc(100% - 24px)}
}
@media(max-width:520px){
  .vname small{display:none}
  /* no celular a demonstracao ja abre na largura de celular: sai o seletor de tela e sobra espaco para Personalizar e Quero esse */
  .vbar>.vdev{display:none}
  .vbar-r{grid-column:1 / 3;justify-content:space-between}
  .vbtn.custom span{display:none}
}

/* ---------- contato do site principal ---------- */
.fale{background:var(--bg)}
.fale-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.fale h2{margin-bottom:12px}
.fale .lead{margin-bottom:18px}
.fale ul{list-style:none;display:grid;gap:10px;margin-top:20px;color:var(--ink);font-weight:600}
.fale form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(8px,1vw,16px) clamp(26px,3vw,40px) clamp(30px,3vw,40px);box-shadow:0 16px 40px rgba(11,31,54,.08)}
.fale label{display:block;font-weight:700;font-size:.85rem;margin-top:22px;color:var(--ink)}
.fale input,.fale textarea{display:block;width:100%;margin-top:6px;padding:13px 15px;border:1px solid #d7dfec;border-radius:12px;font:inherit;font-weight:400;background:#fff}
.fale input:focus,.fale textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.fale .two{display:block}
.fale .btn{margin-top:30px;width:100%;border:0;cursor:pointer;font-size:1rem}
.fale .hp{position:absolute;left:-9999px}
.fale .fmsg{min-height:1.2em;margin:12px 0 0;font-weight:700;text-align:center}
@media(max-width:900px){.fale-grid{grid-template-columns:1fr;gap:28px}}

/* exemplos de modelos reais ao lado do formulario */
.real{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.real a{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 26px rgba(11,31,54,.12);transition:.2s;text-decoration:none}
.real a:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(11,31,54,.2)}
.real img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:top center}
.real span{position:absolute;left:10px;bottom:10px;background:rgba(11,31,54,.82);color:#fff;font-weight:700;font-size:.78rem;padding:5px 12px;border-radius:999px}

/* acessibilidade: alvos de toque, titulo do visualizador e movimento reduzido */
.vname h1{font-size:.98rem;font-weight:800;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;letter-spacing:0;line-height:1.2}
.vnav{width:44px;height:44px}
.vbtn,.vdev button{min-height:44px}
.chips a{display:inline-flex;align-items:center;min-height:44px}
.vbtn:focus-visible,.vdev button:focus-visible,.vnav:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.frame{transition:none}.mcard .shot,.mcard .shot img{transition:none}}
.skip{position:absolute;left:12px;top:-120px;z-index:10001;background:#fff;color:#0b1f36;padding:11px 18px;border-radius:8px;font-weight:800;box-shadow:0 4px 18px rgba(0,0,0,.35);text-decoration:none;transition:top .15s}
.skip:focus{top:12px}

/* barra superior do visualizador: botoes com a mesma altura, fonte e alinhamento */
.vbar{padding:0 20px;gap:16px}
.vbar-l,.vbar-r{gap:12px}
.vbtn{font-family:inherit;font-weight:700;font-size:.92rem;line-height:1;min-height:44px;padding:0 20px;gap:9px;justify-content:center}
.vbtn i{font-size:1.05rem;line-height:1}
.vbtn.ghost{background:rgba(255,255,255,.12)}
.vbtn.want{padding:0 22px}
.vnav{width:44px;height:44px;font-size:1rem}
.vdev{padding:4px;gap:4px}
.vdev button{font-family:inherit;font-size:.9rem;font-weight:700;line-height:1;min-height:40px;padding:0 18px;gap:8px}
.vname{padding:0 6px}
@media(max-width:860px){.vbar{padding:8px 12px}.vbtn{padding:0 16px}.vdev button{padding:0 14px}}
.vbtn .t-short{display:none}
@media(max-width:1180px){.vbtn .t-long{display:none}.vbtn .t-short{display:inline}}
@media(max-width:860px){.vbtn.ghost .t-long{display:none}.vbtn.ghost .t-short{display:inline}}
@media(max-width:520px){.vbar-l{gap:8px}.vbtn.ghost{padding:0 12px}.vname{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.vnav{width:40px;height:40px}}
.legal-note{font-size:.8rem;color:#5b6b7f;margin:12px 0 0;text-align:center}.legal-note a{color:#2c5fd6;text-decoration:underline}

/* alternancia Onepage / 5 paginas (Pacote 2) no visualizador */
.vpkg{flex:none}
@media(max-width:860px){.vpkg button span{display:inline}.vpkg button{padding:0 12px}}
@media(max-width:560px){.vpkg button span{display:none}}