/* ProfVerify — teacher phone demo (homepage teacher section + /soy-profesor/ + brand book)
   Since 21 Oct 2026 the phone shows the demo teacher's REAL profile page, generated by
   tools/build-home.js as components/phone-demo-profile.html and loaded in an iframe at a
   real phone width (390 px), scaled to the screen. It mirrors the live design exactly
   (Vicente: «the example should be exactly the same design mirror»). This file only draws
   the phone around it. Script: components/phone-demo.js. */
.device { width: 280px; margin: 0 auto; }
.try { margin-bottom: var(--s-4); text-align: center; font-weight: 600; color: var(--fg); }
.try-note { margin-top: var(--s-4); text-align: center; font-size: .8125rem; color: var(--fg-2); }
.dv-frame { border: 10px solid #1e293b; border-radius: 46px; background: #1e293b; box-shadow: 0 40px 70px -30px rgba(0,0,0,.6); }
.dv-screen { position: relative; height: 600px; border-radius: 36px; background: var(--paper); overflow: hidden; color: var(--ink); }
.dv-bar { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-6); font-size: .875rem; font-weight: 600; line-height: 1; z-index: 1; background: var(--paper); }
.dv-island { position: absolute; left: calc(50% - 44px); top: 10px; width: 88px; height: 26px; border-radius: 13px; background: #1e293b; }
.dv-sig { display: flex; gap: 2px; align-items: flex-end; }
.dv-sig i { width: 3px; background: var(--ink); border-radius: 1px; }
.dv-sig i:nth-child(1) { height: 5px; } .dv-sig i:nth-child(2) { height: 8px; } .dv-sig i:nth-child(3) { height: 11px; }
.dv-url { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 34px; border-radius: 12px; background: var(--desk); display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 0 var(--s-4); font-size: .75rem; color: var(--ink-2); white-space: nowrap; z-index: 1; }
.dv-url b { font-weight: 600; color: var(--ink); }
#dv-path { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dv-view { position: absolute; top: 44px; left: 0; right: 0; bottom: 52px; overflow: hidden; }
/* The real profile at 390 px, scaled to the screen by phone-demo.js */
.dv-view iframe { display: block; width: 390px; border: 0; transform-origin: 0 0; background: var(--paper); }