/* ---------- 4 · A conta explicada (o papel mais fundo) ---------- */
/* a transição 3 → 4: o mesmo papel, um tom abaixo, e o fio continua */
.conta-sec{background:linear-gradient(180deg,var(--papel) 0%,#ece5d6 18%,#ece5d6 100%);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,6vw,110px);align-items:center}
.conta-sec__texto p{margin-top:16px;color:var(--tinta-2);max-width:34em;font-size:clamp(16px,1.2vw,18px)}
.conta-sec__texto p strong{color:var(--tinta);font-weight:600;background:linear-gradient(transparent 62%,rgb(255 198 26 / .45) 62%)}
.conta-sec__demo{justify-self:center;width:min(100%,480px)}
.alterna{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:#fffdf8;border:1px solid var(--linha-papel);box-shadow:0 10px 24px -18px rgb(10 28 43 / .5)}
.alterna button{position:relative;z-index:1;min-height:46px;border:0;background:transparent;border-radius:999px;font:700 15px var(--texto);color:var(--tinta-2);cursor:pointer;transition:color .4s var(--ease)}
.alterna button[aria-selected=true]{color:var(--papel)}
.alterna__fundo{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--tinta);transition:transform .55s cubic-bezier(.3,1.2,.4,1)}
.conta-sec__demo[data-modo=une] .alterna__fundo{transform:translateX(100%);background:#178c3c}
/* a fatura: no "Antes", uma conta só; no "Com a UNE", ela se rasga em 2 tiras */
.fatura{position:relative;margin-top:22px;display:grid;gap:0}
.tira{position:relative;background:#fffdf8;padding:22px 24px;display:grid;gap:10px;box-shadow:0 1px 0 rgb(10 28 43 / .05),0 24px 40px -28px rgb(10 28 43 / .5);transition:transform .8s var(--ease),margin .8s var(--ease),opacity .6s var(--ease),border-radius .5s var(--ease)}
.tira--a{border-radius:18px 18px 0 0;z-index:2}
.tira--b{border-radius:0;z-index:1;max-height:0;padding-block:0;opacity:0;overflow:hidden;transition:max-height .8s var(--ease),padding .8s var(--ease),opacity .6s var(--ease),margin .8s var(--ease),transform .8s var(--ease)}
.tira__de{display:flex;align-items:center;gap:10px;font:700 12px var(--texto);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3)}
.tira__marca{width:28px;height:28px;border-radius:9px;background:var(--tinta) url("../marca/simbolo.svg") center/0 no-repeat;transition:background .5s var(--ease)}
.tira--b .tira__marca{background:#c9bfa9}
.tira__o{font:700 clamp(18px,1.5vw,21px)/1.3 var(--manchete);color:var(--tinta);letter-spacing:-.01em}
.tira__l{height:8px;border-radius:4px;background:#ece5d6}.tira__l--c{width:62%}
.fatura__total{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 12px;padding:20px 24px 22px;border-radius:0 0 18px 18px;background:var(--tinta);color:var(--papel)}
.fatura__total > span:first-child{grid-column:1/-1;font:700 12px var(--texto);letter-spacing:.1em;text-transform:uppercase;color:#9fb1c1}
.fatura__total b{font:800 clamp(40px,4vw,54px)/1 var(--manchete);letter-spacing:-.03em}
.fatura__selo{font-style:normal;font:800 15px var(--manchete);padding:8px 12px;border-radius:999px;background:var(--sol);color:var(--tinta);opacity:0;transform:scale(.6);transition:opacity .4s var(--ease) .5s,transform .5s cubic-bezier(.3,1.6,.5,1) .5s}
/* o modo "Com a UNE": a tira de cima vira a cota da UNE (verde), a de baixo sai, e o corte em zigue-zague aparece entre as 2 */
.conta-sec__demo[data-modo=une] .tira--a{border-radius:18px 18px 0 0;margin-bottom:14px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%;padding-bottom:30px}
.conta-sec__demo[data-modo=une] .tira--a .tira__marca{background-color:#0d2033;background-size:70%}
.conta-sec__demo[data-modo=une] .tira--a .tira__de{color:#178c3c}
.conta-sec__demo[data-modo=une] .tira--b{max-height:200px;padding-block:30px 22px;opacity:1;-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% / 18px 100%;transform:rotate(-1.2deg)}
.conta-sec__demo[data-modo=une] .fatura__total{background:#0f3a24}
.conta-sec__demo[data-modo=une] .fatura__selo{opacity:1;transform:none}
.conta-sec__nota{margin-top:14px;font-size:13px;color:var(--tinta-3)}
@media (max-width:1000px){.conta-sec{grid-template-columns:1fr}.conta-sec__demo{justify-self:stretch;width:100%;max-width:560px}}
@media (prefers-reduced-motion:reduce){.tira,.tira--b,.alterna__fundo,.fatura__selo{transition:none}}