/* Cenas em código (Transformação e Método): celular + telas animadas por cenas.js */
.fone{position:relative;border-radius:36px;padding:7px;background:linear-gradient(160deg,#2a2e2a,#0b0c0b 40%,#161916);
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 60px -24px rgba(0,0,0,.95),0 0 60px -20px rgba(32,220,119,.25)}
.fone::before{content:"";position:absolute;top:13px;left:50%;width:74px;height:20px;border-radius:12px;background:#050605;transform:translateX(-50%);z-index:3}
.fone-tela{position:relative;height:100%;overflow:hidden;border-radius:29px;display:flex;flex-direction:column;
  background:radial-gradient(120% 60% at 50% 0%,rgba(32,220,119,.10),transparent 60%),#0d100e;font-size:12.5px;line-height:1.35;color:#E8EAE7;text-align:left}
.fone-tela svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fone-barra{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 0;font-size:11.5px;font-weight:600;color:#D1D1D1}
.barra-lua svg{width:14px;height:14px;color:#cfd8ff}
.fone-topo{display:flex;align-items:center;gap:9px;padding:38px 14px 10px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.fone-barra+.fone-topo{padding-top:16px}
.fone-av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#1c2a20,#0b0f0c);color:var(--green);box-shadow:0 0 0 1px rgba(32,220,119,.35)}
.fone-av svg,.fone-cam svg{width:17px;height:17px}
.fone-nome{display:grid;line-height:1.2}
.fone-nome b{font-size:13px;font-weight:600}
.fone-status{font-style:normal;font-size:10.5px;color:var(--green)}
.fone-cam{margin-left:auto;color:#8f948f;display:grid}
.chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 10px 14px;overflow:hidden;
  background-image:radial-gradient(1px 1px at 1px 1px,rgba(255,255,255,.035) 1px,transparent 1.5px);background-size:16px 16px}
.msg{max-width:84%;padding:0 10px;border-radius:12px;font-size:12px;opacity:0;max-height:0;margin:0;overflow:hidden;text-wrap:pretty;
  transform:translateY(8px) scale(.98);transition:opacity .45s var(--ease),transform .45s var(--ease),max-height .45s var(--ease),margin .45s var(--ease),padding .45s var(--ease)}
.msg.on{opacity:1;max-height:140px;margin-top:6px;padding:7px 10px 5px;transform:none}
.msg small{display:block;text-align:right;font-size:9.5px;color:rgba(232,234,231,.5);margin-top:2px}
.msg-e{align-self:flex-start;background:#1d211e;border-top-left-radius:4px}
.msg-s{align-self:flex-end;background:#11482b;border-top-right-radius:4px}
.msg-s small{color:rgba(190,255,215,.6)}
.digitando.on{display:flex;gap:4px;padding:10px 12px}
.digitando span{width:6px;height:6px;border-radius:50%;background:rgba(232,234,231,.7);animation:pisca 1s infinite ease-in-out}
.digitando span:nth-child(2){animation-delay:.15s}.digitando span:nth-child(3){animation-delay:.3s}
@keyframes pisca{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
.msg-arq.on{display:flex;align-items:center;gap:9px;padding:8px 10px}
.arq-ic{width:32px;height:38px;flex:none;border-radius:6px;display:grid;place-items:center;background:#e9ecea;color:#11482b}
.arq-ic svg{width:18px;height:18px}
.msg-arq b{display:block;font-size:12px;font-weight:600}
.msg-arq i{display:block;width:60px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin-top:5px}
.msg-comp.on{padding:6px}
.comp{position:relative;display:grid;gap:5px;width:120px;padding:12px 10px;border-radius:8px;background:#f2f4f1;overflow:hidden}
.comp-ic{width:22px;height:22px;color:#139a52}
.comp-ic svg{width:100%;height:100%}
.comp i{display:block;height:5px;border-radius:3px;background:#cfd4ce}
.comp i.curta{width:60%}
.varre{position:absolute;left:0;right:0;top:-22px;height:22px;background:linear-gradient(to bottom,transparent,rgba(32,220,119,.55),transparent)}
.rodando .msg-comp.on .varre{animation:varre 1.1s .3s ease-in-out 2}
@keyframes varre{to{top:100%}}
.msg-ok.on{display:flex;align-items:center;gap:7px;font-weight:600;background:linear-gradient(160deg,#16653c,#0f4428)}
.ok-ic{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#06140B}
.ok-ic svg{width:12px;height:12px;stroke-width:3}
.etiqueta-chat{align-self:center;font-size:10px;padding:0 9px;border-radius:999px;background:#1d211e;color:#B4B9B4;opacity:0;max-height:0;overflow:hidden;transition:opacity .45s,max-height .45s,margin .45s,padding .45s}
.etiqueta-chat.on{opacity:1;max-height:30px;margin-top:10px;padding:3px 9px}

/* tela de bloqueio com Pix entrando */
.bloqueio{position:relative;display:flex;flex-direction:column;height:100%;padding:34px 12px 12px;
  background:radial-gradient(90% 50% at 50% 0%,rgba(32,220,119,.18),transparent 70%),linear-gradient(170deg,#121a15,#0a0c0b)}
.bloq-hora{text-align:center;font-size:44px;font-weight:500;letter-spacing:-1.5px;line-height:1;color:#F3F5F2}
.bloq-data{text-align:center;font-size:11px;color:#B4B9B4;margin-top:4px}
.bloq-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:9px 12px;border-radius:12px;background:rgba(32,220,119,.12);border:1px solid rgba(32,220,119,.3)}
.bloq-total span{font-size:11px;color:#B4B9B4}
.bloq-total b{font-size:16px;font-weight:600;color:var(--green);font-variant-numeric:tabular-nums}
.notifs{display:flex;flex-direction:column-reverse;justify-content:flex-end;margin-top:8px;overflow:hidden}
.notif{display:flex;align-items:center;gap:9px;padding:0 10px;border-radius:14px;background:rgba(40,46,42,.95);border:1px solid rgba(255,255,255,.06);
  opacity:0;max-height:0;margin:0;overflow:hidden;transform:translateY(-10px) scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease),max-height .5s var(--ease),margin .5s var(--ease),padding .5s var(--ease)}
.notif.on{opacity:1;max-height:70px;margin-top:6px;padding:8px 10px;transform:none}
.notif-ic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--green);color:#06140B}
.notif-ic svg{width:16px;height:16px;stroke-width:2}
.notif b{display:block;font-size:11.5px;font-weight:600}
.notif i{font-style:normal;font-size:12px;color:#D1D1D1}
.notif small{margin-left:auto;align-self:flex-start;font-size:9.5px;color:#8f948f}
/* a ordem visual: hora, total, notificações (o total sobe para logo abaixo da hora) */
.bloqueio{display:grid;grid-template-rows:auto auto auto 1fr;align-content:start}
.bloq-total{grid-row:3}
.notifs{grid-row:4}

/* área de membros com as capas reais */
.membros{display:flex;flex-direction:column;height:100%;padding:36px 12px 0}
.membros-logo{width:86px;height:auto;margin:0 auto 10px;display:block}
.membros-rolo{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.membros-grade{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rodando .membros-grade{animation:rolo 18s linear infinite}
.capa{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(32,220,119,.25)}
.capa img{display:block;width:100%;height:auto}
.capa.atual::after{content:"";position:absolute;left:8px;right:8px;bottom:6px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--green) 45%,rgba(255,255,255,.25) 45%)}
@keyframes rolo{0%,8%{transform:translateY(0)}100%{transform:translateY(-50%)}}

/* aula de anúncios */
.aula{display:flex;flex-direction:column;height:100%;padding-top:34px}
.aula-video{position:relative;margin:0 10px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:radial-gradient(80% 80% at 30% 20%,#1a2a20,#0a0d0b)}
.ad-card{position:absolute;left:14%;top:12%;width:44%;height:76%;padding:6px;border-radius:8px;background:#e9ecea;display:grid;gap:4px;align-content:start}
.ad-img{display:block;height:42px;border-radius:5px;background:linear-gradient(135deg,#2c4a37,#16241b)}
.ad-card i{display:block;height:4px;border-radius:2px;background:#c4c9c3}
.ad-card i.curta{width:60%}
.ad-btn{display:grid;place-items:center;height:16px;border-radius:5px;background:var(--green);color:#06140B;margin-top:2px}
.ad-btn svg{width:11px;height:11px;stroke-width:2.2}
.aula-play{position:absolute;right:14%;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff}
.aula-play svg{width:14px;height:14px}
.aula-barra{position:absolute;left:8px;right:8px;bottom:7px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
.aula-barra em{position:absolute;inset:0;background:var(--green);transform-origin:left;transform:scaleX(.42)}
.rodando .aula-barra em{animation:aula 9s linear infinite}
@keyframes aula{from{transform:scaleX(.08)}to{transform:scaleX(.9)}}
.aula-info{padding:12px 12px 0}
.aula-info b{font-size:14px;font-weight:600}
.aula-info p{font-size:11px;color:#B4B9B4;margin-top:3px}
.aula-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.aula-chips span{font-size:10px;padding:4px 8px;border-radius:999px;background:rgba(32,220,119,.12);border:1px solid rgba(32,220,119,.35);color:#cdf5dd}
.aula-lista{list-style:none;display:grid;gap:7px;margin-top:12px}
.aula-lista li{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;background:#151915}
.aula-lista span{width:20px;height:20px;flex:none;border-radius:6px;display:grid;place-items:center;background:rgba(32,220,119,.15);color:var(--green)}
.aula-lista span svg{width:11px;height:11px;stroke-width:2.6}
.aula-lista i{display:block;flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.passo-cena{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.passo-cena.on{opacity:1;transform:none}

/* encaixe no card da Transformação: celular cortado embaixo */
.cena-card{position:relative;height:260px;margin-top:34px;overflow:hidden;border-radius:14px 14px 0 0;
  border:1px solid rgba(113,113,113,.3);border-bottom:0;background:radial-gradient(70% 90% at 50% 100%,rgba(32,220,119,.12),transparent 70%),#0f120f}
/* palco claro em 2 cards (diagonal), para quebrar a repetição dos fundos escuros */
.cena-card[data-cena="pagina"],.cena-card[data-cena="aparecer"]{border-color:rgba(255,255,255,.55);
  background:radial-gradient(70% 90% at 50% 100%,rgba(32,220,119,.18),transparent 70%),linear-gradient(160deg,#FFFFFF 0%,#EEF2EE 100%)}
.cena-card .fone{position:absolute;left:50%;top:24px;width:250px;height:440px;transform:translateX(-50%)}
.cena-card .chat{flex:none;height:150px}
.cena-card .fone-barra+.fone-topo+.chat{height:128px}
.cena-card .notifs{height:96px}
.cena-card .bloqueio{padding-top:30px}
.cena-card .bloq-hora{font-size:34px}
/* encaixe no Método: celular inteiro */
.cena-metodo{display:grid;place-items:center}
.cena-metodo .fone{width:300px;height:600px}
@media (max-width:767px){
  .cena-card{height:210px;margin-top:24px}
  .cena-card .fone{width:226px;height:400px;top:18px}
  .cena-card .chat{height:116px}
  .cena-card .fone-barra+.fone-topo+.chat{height:96px}
  .cena-card .notifs{height:64px}
  .cena-card .bloq-hora{font-size:30px}
  .cena-metodo .fone{width:250px;height:480px}
}
@media (prefers-reduced-motion:reduce){.digitando span{animation:none}}

/* nada encolhe: a lista sobe e o mais antigo some pelo topo */
.msg,.notif,.etiqueta-chat{flex:none}

/* ============ MOLDURA REAL (foto de estúdio gerada no Codex) com a cena dentro da tela ============ */
.fone{container-type:inline-size;aspect-ratio:1080/2260;height:auto!important;padding:0;border-radius:0;background:none;
  box-shadow:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.75))}
.fone::before{display:none}
.fone::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:url("assets/img/moldura-iphone-600.webp") center/100% 100% no-repeat}
.fone-tela{position:absolute;left:5.556%;top:2.655%;width:88.89%;height:94.69%;border-radius:9.63cqw}
.fone-topo{padding-top:30px}
.bloqueio{padding-top:30px}
.membros{padding-top:32px}
.aula{padding-top:32px}
.notif.on{padding:6px 9px;margin-top:6px}
.notif-ic{width:26px;height:26px}
.cena-card .notifs{height:104px}
@media (max-width:767px){.cena-card .notifs{height:54px}}
.cena-card .chat{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22px);mask-image:linear-gradient(to bottom,transparent,#000 22px)}

/* área segura do topo (como num iPhone real): barra de status ao lado da ilha, ~11% da tela */
.sb{flex:none;display:flex;justify-content:space-between;align-items:flex-start;height:22cqw;padding:5.2cqw 9cqw 0 11cqw;font-size:max(10px,5.4cqw);font-weight:600;color:#E8EAE7;letter-spacing:.01em}
.sb-ic{display:flex;align-items:center;gap:1.6cqw;color:#E8EAE7}
.sb-ic svg{height:max(10px,5.4cqw);width:auto;stroke-width:2.2}
.sb-ic .sb-bat{height:max(11px,6cqw)}
.fone-topo{padding-top:8px}
.bloqueio,.membros,.aula{padding-top:4px}
.fone-tela .bloqueio,.fone-tela .membros,.fone-tela .aula{flex:1;min-height:0;height:auto}

/* tamanhos: Método com o celular na altura da coluna dos pilares; Transformação com o celular cortado (~62%) */
.metodo-telas{height:470px}
.cena-metodo .fone{width:224px}
.cena-card{height:284px}
.cena-card .fone{width:200px;top:24px}
.cena-card .chat{height:148px}
.cena-card .notifs{height:104px}
.cena-card .bloq-hora{font-size:30px}
.transforma .img-card{height:284px}
@media (max-width:767px){
  .metodo-telas{height:440px}
  .cena-metodo .fone{width:210px}
  .cena-card{height:265px}
  .cena-card .fone{width:190px;top:18px}
  .cena-card .chat{height:138px}
  .cena-card .notifs{height:54px}
  .cena-card .bloq-hora{font-size:28px}
  .transforma .img-card{height:265px}
}
.fone-nome b,.notif b,.sb{white-space:nowrap}
.fone-nome{min-width:0}
@media (max-width:767px){
  .cena-card{height:282px}
  .cena-card .fone{width:208px}
  .cena-card .chat{height:150px}
  .cena-card .notifs{height:104px}
  .transforma .img-card{height:282px}
}

.msg small .lido{width:13px;height:8px;vertical-align:baseline;stroke-width:2;margin-left:2px}

/* palco do Método: mesmo card da Transformação, altura da coluna dos pilares */
.metodo-telas{position:relative;width:400px;max-width:100%;height:470px;overflow:hidden;border-radius:18px;
  border:1px solid rgba(113,113,113,.3);background:radial-gradient(70% 90% at 50% 100%,rgba(32,220,119,.14),transparent 70%),#0f120f}
.metodo-tela.cena-metodo{position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;display:block}
.cena-metodo .fone{position:absolute;left:50%;top:30px;width:300px;transform:translateX(-50%)}
.cena-metodo .chat{flex:none;height:300px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 22px);mask-image:linear-gradient(to bottom,transparent,#000 22px)}
@media (max-width:767px){
  .metodo-telas{width:100%;height:420px}
  .cena-metodo .fone{width:270px;top:24px}
  .cena-metodo .chat{height:262px}
}