/* Secção da dor: título centrado, iPhone com notificações e folha escrita ao vivo */
.sec-title.center { margin-inline: auto; text-align: center; max-width: 720px; margin-bottom: 36px; }
#problem .sec-title h2 { font-weight: 700; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -.025em; }
.sec-title .sub { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--muted); }

.pvis { height: 310px; }
.pscene { justify-content: center; }

/* iPhone (CSS) */
.pscene:has(.phone) { padding: 0; justify-content: flex-start; }
.phone { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: 212px; height: 380px; border-radius: 38px; padding: 0;
  border: 6px solid #4a4a4e; box-shadow: 0 0 0 1px #1a1a1c, inset 0 0 0 1px #0b0b0c, 0 24px 50px rgba(0, 0, 0, .55);
  background:
    radial-gradient(90% 55% at 80% 20%, rgba(46, 76, 160, .95), transparent 70%),
    radial-gradient(80% 50% at 10% 70%, rgba(48, 120, 108, .9), transparent 70%),
    linear-gradient(160deg, #5b6f78, #2c4466 60%, #1c2f52); overflow: hidden; }
.island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 70px; height: 20px; border-radius: 12px; background: #000; display: block; }
.lt-time { position: absolute; top: 40px; left: 0; right: 0; text-align: center; font: 600 44px/1 var(--sans); letter-spacing: -.02em; color: rgba(255, 255, 255, .5); }
.notifs { position: absolute; left: 8px; right: 8px; top: 104px; display: flex; flex-direction: column; gap: 6px; }
.notif { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; padding: 8px 9px; border-radius: 14px; background: rgba(255, 255, 255, .17); border: .67px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; opacity: 0; transform: translateY(-16px) scale(.96); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .9, .3, 1.15); }
.notif.on { opacity: 1; transform: none; }
.notif .ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 700 12px/1 var(--sans); font-style: normal; color: #fff; }
.i1 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.i2 { background: linear-gradient(135deg, #f97316, #dc2626); }
.i3 { background: linear-gradient(135deg, #10b981, #047857); }
.nt { min-width: 0; line-height: 1.25; }
.nt b { display: block; font-size: 10.5px; font-weight: 600; }
.nt span { display: block; font-size: 9.5px; color: rgba(255, 255, 255, .82); }
.notif em { font-style: normal; font-size: 9px; color: rgba(255, 255, 255, .6); }
.pv-total { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); white-space: nowrap; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 500; padding: 7px 14px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); z-index: 2; }
.pv-total[data-step] { transform: translate(-50%, 8px); }
.pv-total[data-step].on { transform: translate(-50%, 0); }
.pscene:has(.phone) .pv-total { bottom: 30px; }
.pvis:has(.phone) .tag-fict { right: 12px; top: 8px; bottom: auto; }

/* Folha escrita ao vivo */
.cell.on { animation: none; }
.cell.typing { background: rgba(143, 176, 224, .16); box-shadow: inset 0 0 0 1.5px var(--brand); }
.cell .caret { width: 1.5px; height: 1.05em; background: var(--brand); margin-left: 1px; vertical-align: -2px; }
.shrow > span { white-space: nowrap; }

/* Ajuste: mais altura para o iPhone mostrar as 3 notificações sem o balão por cima */
.pvis { height: 350px; }
.phone { top: 14px; height: 400px; }
.notifs { top: 90px; }
.pscene:has(.phone) .pv-total { bottom: 18px; }