/* ---------- 10. PROVA REAL ---------- */
.proof { position: relative; padding-top: var(--s-10); }
.proof-head { margin-bottom: var(--s-8); }
.proof-head h2 { max-width: 14em; }
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.pic { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-panel); }
.pic-ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, var(--accent-soft), var(--bg-sunken)); }
.pic-ph svg { width: 55%; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; opacity: .6; }
.pic-tag { position: absolute; top: .8rem; left: .8rem; z-index: 3; padding: .15rem .6rem; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: .6875rem; color: var(--ink-3); background: var(--bg-raised); }
.pic-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; opacity: 0; pointer-events: none; transition: opacity var(--d-slow) ease; z-index: 2; }
.pic.has-img .pic-img { opacity: 1; } .pic.has-img .pic-tag { display: none; }
.story-text { display: grid; gap: var(--s-6); }
.pull { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); max-width: 14em; }
.story-text p:not(.pull) { color: var(--ink-2); font-size: var(--t-lg); text-wrap: pretty; max-width: 36rem; }
.story-text b { color: var(--ink); }
.story-call { color: var(--ink) !important; }

.proof-dash { margin-top: var(--s-9); }
.pdash { margin: 0; }
.pdash .shot-frame { min-height: clamp(16rem, 38vw, 30rem); }
.pd { padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.pd-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
.pd-tiles i { display: block; height: 3.4rem; border-radius: var(--radius-m); background: var(--bg); border: 1px solid var(--line); position: relative; }
.pd-tiles i::after { content: ""; position: absolute; left: .7rem; top: .8rem; width: 55%; height: .55rem; border-radius: 3px; background: var(--ink-3); opacity: .5; }
.pd svg { width: 100%; height: clamp(8rem, 18vw, 14rem); }
.shot.has-img .pd, .shot.has-img .fph { visibility: hidden; }

.real-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-8); font-size: var(--t-lg); color: var(--ink-2); }
.real-line .k { color: var(--ink); font-weight: 560; }
.stats { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin-top: var(--s-6); }
.stats li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line-strong); align-content: start; }
.stats b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.6rem); letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stats b small { font-size: .38em; letter-spacing: 0; color: var(--ink-3); margin-left: .35rem; font-weight: 500; }
.stats li > span { color: var(--ink-3); font-size: var(--t-sm); text-wrap: balance; }
.strip-note { margin-top: var(--s-6); color: var(--ink-2); font-size: var(--t-lg); } .strip-note b { color: var(--ink); }
.honest { margin-top: var(--s-6); font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: -.02em; } .honest .g { color: var(--accent); }
.proof .closing { margin-top: var(--s-9); }
@media (max-width: 56rem) { .story { grid-template-columns: 1fr; } .pic { max-width: 22rem; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-tiles { grid-template-columns: repeat(3, 1fr); } .pd-tiles i:nth-child(n+4) { display: none; } }

/* demonstração */
.demo { padding-top: var(--s-10); }
.demo .sec-head { margin-bottom: var(--s-8); }
.demo-intro { margin-top: var(--s-6); font-family: var(--font-display); font-size: var(--t-h3); letter-spacing: -.02em; }
.di-no { color: var(--ink-3); } .di-yes b { color: var(--accent); font-weight: inherit; }
.demo-body { margin: var(--s-3) auto 0; max-width: 34rem; color: var(--ink-2); font-size: var(--t-lg); } .demo-body .g { color: var(--accent); }
.fdash { margin: 0; }
.fdash .shot-frame { min-height: clamp(14rem, 30vw, 24rem); }
.fph { padding: clamp(1.5rem, 4vw, 3rem); display: grid; align-content: center; min-height: clamp(11rem, 24vw, 19rem); }
.fph-nodes { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.fph-nodes li { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; --on: 0; }
.fph-nodes li span { flex: none; padding: .7rem .9rem; border-radius: var(--radius-m); font-size: var(--t-sm); font-weight: 560; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-3); transition: all var(--d-slow) var(--ease-out); }
.fph-nodes li.on span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); transform: translateY(-3px); }
.fph-nodes li:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 .3rem; background: var(--line-strong); }
.fph-nodes li.on:not(:last-child)::after { background: var(--accent); }
.watch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); margin-top: var(--s-5); }
.watch li { --lit: 1; display: flex; align-items: center; gap: .8rem; font-size: var(--t-base); color: color-mix(in oklab, var(--ink-3) calc((1 - var(--lit)) * 100%), var(--ink) calc(var(--lit) * 100%)); }
.watch li b { color: inherit; }
.w-ck { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--line-strong) calc((1 - var(--lit)) * 100%), var(--accent) calc(var(--lit) * 100%)); color: var(--accent-ink); }
.w-ck svg { width: .9rem; height: .9rem; }
.band { margin-top: var(--s-9); padding: clamp(2rem, 5vw, 4rem) var(--s-6); border-radius: var(--radius-l); background: var(--bg-raised); border: 1px solid var(--line-strong); text-align: center; position: relative; overflow: hidden; }
.band::before { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: radial-gradient(60% 100% at 50% 100%, var(--accent-glow), transparent 70%); pointer-events: none; }
.band p { position: relative; max-width: 24em; margin-inline: auto; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); }
@media (max-width: 56rem) { .watch { grid-template-columns: 1fr; } .fph-nodes { flex-direction: column; align-items: stretch; } .fph-nodes li { flex-direction: column; align-items: flex-start; } .fph-nodes li:not(:last-child)::after { width: 2px; height: 1rem; flex: none; margin: .2rem 0 .2rem 1.5rem; } }

/* painel real da prova */
.pdash { margin: 0; }
.pdash .shot-frame { position: relative; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-panel); }
.pdash-img { display: block; width: 100%; height: auto; }

/* demonstração: mesma imagem do hero */
.fdash { margin: 0; }
.fdash .shot-frame { position: relative; min-height: 0; border-radius: var(--radius-l); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow-panel); }
.fdash-img { display: block; width: 100%; height: auto; }

/* retrato com cantos bem arredondados em qualquer tema */
.story .pic, [data-theme="editorial"] .story .pic { border-radius: 1.75rem; }