/* Sistema de propostas — identidade Di Cavalcante v2.2, marca Empresarial (petróleo, dourado, creme; Sansation).
   Layout: coluna central de leitura, cartões só para o que é objeto (empresa, sinal, plano), barra de total fixa no rodapé. */
:root{
  --petroleo:#0c2a2f; --petroleo-2:#163f46; --dourado:#a8853f; --dourado-claro:#c9a86a;
  --creme:#f6f1e8; --papel:#fffdf8; --tinta:#1b2a2c; --mudo:#5b6a6b; --linha:#e1d9c9; --realce:#efe6d3;
  --ok:#2f6b4f; --alerta:#94650f; --erro:#9b3426;
  --f-display:"Sansation","Trebuchet MS",system-ui,sans-serif;
  --f-corpo:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--tinta);font:400 1.0625rem/1.6 var(--f-corpo);-webkit-font-smoothing:antialiased}
.envelope{max-width:960px;margin:0 auto;padding-inline:18px}
img{max-width:100%}
a{color:var(--petroleo);text-decoration-color:var(--dourado-claro);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--dourado);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* topo */
.topo{background:var(--petroleo);color:var(--creme)}
.topo .envelope{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:14px;flex-wrap:wrap}
.marca{font:700 .78rem/1.2 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--dourado-claro)}
.marca small{display:block;font:400 .72rem/1.3 var(--f-corpo);letter-spacing:.04em;text-transform:none;color:#cfdcda}
.topo .selo-validade{font:600 .8rem var(--f-corpo);color:#cfdcda}

/* abertura */
.abertura{background:var(--petroleo);color:var(--creme);padding-block:2.2rem 2.8rem}
.abertura h1{font:700 clamp(1.9rem,4.6vw,3rem)/1.08 var(--f-display);margin:.3rem 0 .8rem;text-wrap:balance;max-width:22ch}
.abertura p{color:#d7e3e1;max-width:58ch;margin:.4rem 0;font-size:1.1rem}
.eyebrow{font:700 .74rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--dourado-claro)}
.passos{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.4rem 0 0;padding:0;list-style:none;font-size:.92rem;color:#cfdcda}
.passos li{display:flex;gap:.5rem;align-items:center}
.passos b{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--dourado-claro);color:var(--dourado-claro);font:700 .8rem var(--f-display)}
.passos li.feito b{background:var(--dourado-claro);color:var(--petroleo)}

/* seções */
.secao{padding-block:2.2rem;border-bottom:1px solid var(--linha)}
.secao:last-of-type{border-bottom:0}
.secao h2{font:700 1.55rem/1.2 var(--f-display);color:var(--petroleo);margin:.2rem 0 .4rem;text-wrap:balance}
.secao>.envelope>p.intro{color:var(--mudo);max-width:62ch;margin:.2rem 0 1.2rem}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}

/* cartão de empresa */
.empresa{background:var(--papel);border:1px solid var(--linha);border-radius:8px;padding:1.1rem 1.2rem;min-width:0}
.empresa h3{font:700 1.08rem/1.3 var(--f-display);color:var(--petroleo);margin:0 0 .15rem;overflow-wrap:anywhere}
.cnpj{font:500 .86rem/1.4 ui-monospace,"SFMono-Regular",Menlo,monospace;color:var(--mudo)}
.dados{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .9rem;margin:.8rem 0 0;font-size:.92rem}
.dados dt{color:var(--mudo)} .dados dd{margin:0;overflow-wrap:anywhere}
.fonte{font-size:.76rem;color:var(--mudo)}

/* perguntas */
.pergunta{margin:0 0 1.2rem}
.pergunta>span{display:block;font-weight:600;margin-bottom:.45rem}
.opcoes{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{font:500 .95rem var(--f-corpo);padding:.5rem .9rem;border-radius:999px;border:1px solid var(--linha);background:var(--papel);color:var(--tinta);cursor:pointer}
.chip:hover{border-color:var(--dourado-claro)}
.chip[aria-pressed="true"]{background:var(--petroleo);border-color:var(--petroleo);color:var(--creme)}
.salvo{font-size:.82rem;color:var(--ok);min-height:1.2em}

/* sinais */
.sinal{background:var(--papel);border:1px solid var(--linha);border-left:3px solid var(--dourado-claro);border-radius:0 8px 8px 0;padding:1rem 1.1rem;margin:.7rem 0}
.sinal p{margin:.2rem 0}
.sinal .gancho{font:700 1.02rem/1.4 var(--f-display);color:var(--petroleo)}
.sinal .base{font-size:.86rem;color:var(--mudo)}
.estado{display:inline-block;font:600 .72rem/1 var(--f-corpo);padding:.28rem .55rem;border-radius:999px;border:1px solid currentColor;margin-right:.4rem}
.estado.ok{color:var(--ok)} .estado.alerta{color:var(--alerta)}
.vazio{color:var(--mudo);font-style:italic}

/* montagem */
.monta{background:var(--papel);border:1px solid var(--linha);border-radius:8px;padding:1.1rem 1.2rem;margin:0 0 1rem;min-width:0}
.monta h3{font:700 1.05rem/1.3 var(--f-display);color:var(--petroleo);margin:0 0 .8rem;overflow-wrap:anywhere}
.linha-rf{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;border-radius:6px;background:var(--realce);margin-bottom:.8rem}
.linha-rf input{margin-top:.3rem;width:1.1rem;height:1.1rem;accent-color:var(--petroleo)}
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem}
.plano{position:relative}
.plano input{position:absolute;opacity:0;pointer-events:none}
.plano label{display:block;height:100%;border:1px solid var(--linha);border-radius:8px;padding:.8rem .9rem;cursor:pointer;background:var(--papel)}
.plano label b{font:700 1rem var(--f-display);color:var(--petroleo);display:block}
.plano .preco{font:700 1.15rem var(--f-display);font-variant-numeric:tabular-nums;color:var(--tinta)}
.plano .preco small{font:400 .8rem var(--f-corpo);color:var(--mudo)}
.plano .dica{display:block;font-size:.86rem;color:var(--mudo);margin-top:.3rem}
.plano input:checked+label{border-color:var(--petroleo);box-shadow:inset 0 0 0 1px var(--petroleo);background:#fbf7ee}
.plano input:focus-visible+label{outline:2px solid var(--dourado);outline-offset:2px}

/* formulário */
form .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
label.campo{display:grid;gap:.3rem;font-weight:600;font-size:.95rem}
input[type=text],input[type=email],input[type=tel],select,textarea{font:400 1rem var(--f-corpo);padding:.65rem .75rem;border:1px solid var(--linha);border-radius:6px;background:var(--papel);color:var(--tinta);width:100%}
textarea{min-height:5.5rem;resize:vertical}
.acoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem;margin:1rem 0}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;margin:.6rem 0}
.check input{margin-top:.25rem;width:1.05rem;height:1.05rem;accent-color:var(--petroleo)}
.botao{font:700 1rem var(--f-display);letter-spacing:.02em;padding:.85rem 1.4rem;border-radius:6px;border:0;background:var(--petroleo);color:var(--creme);cursor:pointer}
.botao:hover{background:var(--petroleo-2)}
.botao:disabled{opacity:.55;cursor:wait}
.botao.claro{background:var(--dourado-claro);color:var(--petroleo)}
.erro{color:var(--erro);font-weight:600;min-height:1.3em}
.oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sucesso{background:var(--papel);border:1px solid var(--ok);border-radius:8px;padding:1.2rem}

/* barra do total */
.barra{position:sticky;bottom:0;background:var(--petroleo);color:var(--creme);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
.barra .envelope{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem;flex-wrap:wrap}
.barra .total{font:700 1.35rem var(--f-display);font-variant-numeric:tabular-nums}
.barra .total small{font:400 .85rem var(--f-corpo);color:#cfdcda;margin-left:.4rem}
.barra .botao{background:var(--dourado-claro);color:var(--petroleo);padding:.6rem 1.1rem}

/* assinatura e perguntas frequentes */
.assina{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;align-items:start}
.assina b{font-family:var(--f-display);color:var(--petroleo)}
details{border-bottom:1px solid var(--linha);padding:.8rem 0}
summary{cursor:pointer;font-weight:600;color:var(--petroleo)}
details p{margin:.5rem 0 0;color:var(--tinta);max-width:65ch}
.rodape{padding-block:2rem 3rem;font-size:.85rem;color:var(--mudo)}

/* vitrine */
.form-cnpj{background:var(--papel);color:var(--tinta);border-radius:10px;padding:1.2rem;margin-top:1.6rem;max-width:620px}
.form-cnpj .linhas{display:grid;gap:.5rem}
.form-cnpj .add{background:none;border:0;color:var(--petroleo);font:600 .95rem var(--f-corpo);cursor:pointer;padding:.3rem 0;text-align:left}
.dores{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.dor{border-top:2px solid var(--dourado-claro);padding-top:.8rem}
.dor h3{font:700 1.08rem/1.3 var(--f-display);color:var(--petroleo);margin:0 0 .3rem}
.dor p{margin:0;color:var(--mudo);font-size:.96rem}
.carregando{color:var(--mudo)}