/* Landora — interface do gerador */
/* Layout: coluna única de formulário com passos numerados; prévias em grade de 3 */
:root{
  --fundo:#0A1724; --superficie:#11263A; --tinta:#F2F7FA; --mudo:#9DB2C4; --linha:#1E3550;
  --acento:#5BE3B5; --acento-on:#062A1F; --acento-suave:#123A35; --aviso:#F0B55A; --erro:#FF8A80;
  --campo:#0D1D2E; --ice:#8FD3FF;
  --f-titulo:'Urbanist',system-ui,sans-serif; --f-texto:'Hanken Grotesk',system-ui,sans-serif;
  --raio:12px; color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--tinta);font:16px/1.55 var(--f-texto)}
a{color:var(--acento)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.estreito{max-width:760px}
header.app{border-bottom:1px solid var(--linha);background:var(--fundo)}
header.app .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo-app{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--mudo);font-size:.78rem}
.logo-app img{height:30px;width:auto}
.passos{display:flex;gap:6px;list-style:none;margin:0;padding:0;font:600 .82rem var(--f-titulo)}
.passos li{padding:6px 10px;border-radius:999px;color:var(--mudo)}
.passos li.ativo{background:var(--acento-suave);color:var(--acento)}
.passos li.feito{color:var(--tinta)}
main{padding-block:40px 80px}
h1{font:800 clamp(1.8rem,3.6vw,2.6rem)/1.12 var(--f-titulo);letter-spacing:-.02em;margin:0 0 10px;text-wrap:balance}
.lead{color:var(--mudo);font-size:1.08rem;margin:0 0 32px;max-width:40em}
fieldset{border:0;margin:0 0 28px;padding:24px;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);display:grid;gap:16px}
legend{font:700 1.05rem var(--f-titulo);padding:0;float:left;width:100%;margin-bottom:4px}
legend small{display:block;font:400 .9rem var(--f-texto);color:var(--mudo);margin-top:2px}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.campo{display:grid;gap:6px;min-width:0}
label{font-weight:700;font-size:.92rem}
label .opc{font-weight:400;color:var(--mudo)}
input,textarea,select{font:inherit;color:var(--tinta);background:var(--campo);border:1.5px solid var(--linha);border-radius:8px;padding:11px 12px;width:100%}
textarea{resize:vertical;min-height:90px}
input:focus,textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
input[type=color]{padding:4px;height:46px;width:72px;cursor:pointer}
.cores{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.amostra{width:30px;height:30px;border-radius:50%;border:2px solid var(--superficie);box-shadow:0 0 0 1px var(--linha);cursor:pointer;padding:0}
.amostra[aria-pressed=true]{box-shadow:0 0 0 2px var(--tinta)}
.dica{font-size:.85rem;color:var(--mudo);margin:0}
.servico-linha{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
.logo-prev{display:flex;align-items:center;gap:12px}
.logo-prev img{max-height:48px;max-width:160px;background:#fff;border:1px solid var(--linha);border-radius:6px;padding:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 1rem var(--f-titulo);border:0;border-radius:8px;padding:13px 22px;cursor:pointer;text-decoration:none;background:var(--acento);color:var(--acento-on)}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible,.link:focus-visible{outline:3px solid var(--tinta);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:progress}
.btn--sec{background:transparent;color:var(--tinta);border:1.5px solid var(--linha)}
.btn--peq{padding:9px 14px;font-size:.9rem}
.link{background:none;border:0;color:var(--acento);font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.msg{padding:12px 14px;border-radius:8px;font-size:.95rem}
.msg--erro{background:color-mix(in srgb,var(--erro) 12%,transparent);color:var(--erro)}
.msg--ok{background:var(--acento-suave);color:var(--acento)}
.opcoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:8px}
.opcao{background:var(--superficie);border:1.5px solid var(--linha);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column}
.opcao.escolhida{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
.tela{position:relative;aspect-ratio:4/5;overflow:hidden;background:#fff;border-bottom:1px solid var(--linha)}
.tela iframe{position:absolute;top:0;left:0;width:1280px;height:1600px;border:0;transform-origin:0 0;pointer-events:none}
.opcao .corpo{padding:18px;display:grid;gap:10px;flex:1;align-content:start}
.opcao h2{font:800 1.2rem var(--f-titulo);margin:0}
.opcao p{margin:0;color:var(--mudo);font-size:.93rem}
.opcao .acoes{margin-top:auto;padding:0 18px 18px}
.barra-final{position:sticky;bottom:0;background:var(--superficie);border-top:1px solid var(--linha);margin-top:28px;padding-bottom:env(safe-area-inset-bottom,0px)}
.barra-final .wrap{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding-block:14px}
.preco{font:800 1.5rem var(--f-titulo);font-variant-numeric:tabular-nums}
.preco small{font:400 .9rem var(--f-texto);color:var(--mudo);display:block}
.cartao{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:28px;display:grid;gap:16px}
dl.dados{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0}
dl.dados dt{color:var(--mudo)}
dl.dados dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.selo{display:inline-block;font:700 .78rem var(--f-titulo);text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;border-radius:999px;background:var(--acento-suave);color:var(--acento)}
.selo--espera{background:color-mix(in srgb,var(--aviso) 15%,transparent);color:var(--aviso)}
.selo--fim{background:color-mix(in srgb,var(--erro) 12%,transparent);color:var(--erro)}
.copiar{display:flex;gap:8px}
.copiar input{font-size:.85rem}
@media (max-width:900px){.opcoes{grid-template-columns:1fr}.tela{aspect-ratio:4/3}}
@media (max-width:620px){.linha,.servico-linha{grid-template-columns:1fr}.passos li:not(.ativo){display:none}fieldset{padding:18px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.legal h1{margin-bottom:6px}
.legal .atualizado{color:var(--mudo);margin:0 0 32px;font-size:.92rem}
.legal h2{font:700 1.2rem var(--f-titulo);margin:32px 0 8px}
.legal p,.legal li{color:var(--mudo);max-width:44em}
.legal li{margin-bottom:6px}
.legal strong{color:var(--tinta)}
footer.app{border-top:1px solid var(--linha);color:var(--mudo);font-size:.9rem}
footer.app .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;padding-block:24px}
footer.app a{color:var(--mudo);text-decoration:none}
footer.app a:hover{color:var(--tinta)}
footer.app nav{display:flex;flex-wrap:wrap;gap:8px 18px}