/* Dev 2 — demo (dm-), planos (pl-), confiança (cf-) */

/* Cabeçalho de seção: título + apoio na mesma margem */
.dm-cab,.pl-cab{display:flex;flex-direction:column;align-items:flex-start;gap:20px;max-width:920px}
.dm-h2,.pl-h2{margin:0;font-weight:400;font-size:clamp(38px,4.8vw,68px);line-height:1;letter-spacing:-.03em;font-variation-settings:"wdth" 100;transition:font-variation-settings .8s var(--ease)}
.dm-h2:hover,.pl-h2:hover{font-variation-settings:"wdth" 130}

/* ---------- Demo ---------- */
.dm-wrap{display:flex;flex-direction:column;gap:36px}
.dm-abas{display:flex;flex-wrap:wrap;gap:8px}
.dm-aba{font:inherit;font-size:15px;font-weight:500;padding:10px 18px;min-height:44px;border-radius:999px;cursor:pointer;border:1.5px solid var(--preto);background:transparent;color:var(--preto);transition:background-color .2s,color .2s}
.dm-aba:hover{background:var(--areia)}
.dm-aba[aria-selected="true"]{background:var(--preto);color:var(--creme)}
.dm-painel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:20px;border-radius:var(--raio)}
.dm-painel[hidden]{display:none}
.dm-painel.dm-pop{animation:dm-pop .35s var(--ease)}
@keyframes dm-pop{from{transform:scale(.98);opacity:.4}to{transform:none;opacity:1}}
.dm-hoje,.dm-depois{border-radius:var(--raio);padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;min-width:0}
.dm-hoje{background:var(--areia);gap:10px}
.dm-depois{background:var(--papel);border:1.5px solid var(--preto);gap:12px}
.dm-rotulo{margin:0;font-size:15px;font-weight:600;color:var(--grafite)}
.dm-rotulo-l{color:var(--laranja)}
.dm-msg{margin:0;max-width:90%;align-self:flex-start;padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.45;background:var(--creme);color:var(--preto);overflow-wrap:anywhere}
.dm-arq{background:var(--papel);color:var(--grafite);border:1px dashed var(--cinza-1)}
.dm-eu{background:var(--preto);color:var(--creme);align-self:flex-end}
.dm-tit{margin:0;font-weight:500;font-size:22px;font-variation-settings:"wdth" 110}
.dm-tab{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--linha)}
.dm-tab>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--linha-2);font-size:15px}
.dm-tab dt{color:var(--grafite)}
.dm-tab dd{margin:0;font-weight:600;text-align:right}
.dm-eco{margin:0;font-size:15px;font-weight:600}
.dm-nota{margin:0;font-size:13px;color:var(--cinza-1)}

/* ---------- Planos ---------- */
.pl{background:var(--areia)}
.pl-wrap{display:flex;flex-direction:column;gap:44px}
.pl-apoio{margin:0;max-width:44ch;font-size:17px;line-height:1.65;color:var(--grafite)}
.pl-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px}
.pl-card{background:var(--creme);border-radius:var(--raio);padding:30px;position:relative;display:flex;flex-direction:column;gap:20px}
@supports (grid-template-rows:subgrid){
  .pl-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:20px;align-content:start}
}
.pl-card-preto{background:var(--preto);color:var(--creme)}
.pl-topo{display:flex;flex-direction:column;gap:6px}
.pl-nome{margin:0;font-size:26px;font-weight:500;line-height:1.15;font-variation-settings:"wdth" 115}
.pl-para{margin:0;font-size:15px;color:var(--cinza-1)}
.pl-selo{position:absolute;top:-13px;left:30px;font-size:13px;font-weight:600;color:var(--preto);background:var(--laranja-sobre-preto);border-radius:99px;padding:4px 12px}
.pl-preco{margin:0;display:flex;align-items:baseline;gap:6px}
.pl-valor{font-size:44px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.pl-mes{font-size:15px;color:var(--cinza-1)}
.pl-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.5;color:var(--grafite)}
.pl-card-preto .pl-para,.pl-card-preto .pl-mes{color:var(--cinza-2)}
.pl-card-preto .pl-lista{color:var(--areia)}
.pl-sob{border:1.5px solid var(--preto);border-radius:var(--raio);padding:clamp(24px,3vw,34px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:24px 40px;align-items:center}
.pl-sob-txt{display:flex;flex-direction:column;gap:14px;min-width:0}
.pl-sob-cab{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;font-weight:400}
.pl-sob-nome{font-size:30px;font-weight:500;font-variation-settings:"wdth" 115}
.pl-sob-sub{font-size:16px;color:var(--grafite)}
.pl-sob-p{margin:0;max-width:52ch;font-size:16px;line-height:1.6;color:var(--grafite)}
.pl-sob-btn{align-self:flex-start;padding:14px 24px}
.pl-tags{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.pl-tags li{font-size:14px;padding:7px 14px;border-radius:999px;border:1px solid var(--cinza-1);color:var(--grafite)}
.pl-impl{margin:0;font-size:15px;line-height:1.6;color:var(--grafite)}

/* ---------- Confiança ---------- */
.cf-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));column-gap:32px;row-gap:10px}
.cf-bloco{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--preto);padding-top:22px;margin-bottom:22px}
@supports (grid-template-rows:subgrid){
  .cf-bloco{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:10px;align-content:start}
}
.cf-h{margin:0;font-weight:500;font-size:24px;line-height:1.15}
.cf-p{margin:0;font-size:16px;line-height:1.65;color:var(--grafite)}
