/* ============================================================
   demos.css · Munoz Company · deck de fechamento
   Portado sem reescrever: premium.css + outOB-B/frag.css (d1,d2)
   + outOB-C/frag.css (d3,d4), concatenados na integra, seguidos
   pelas regras de escopo/adaptacao (secao 6 do PLANO-ANIMACOES.md).
   ============================================================ */

/* ============================================================
   ORGANICFLOW · PREMIUM v1 FINAL (contrato visual, prefixo pm)
   Consolidado: base PM1 + enxertos PM2 (status bar, aro escuro,
   pmScope, unidade de moeda, botao money, stagger automatico).
   Mobile first ~390px. Sem asset externo, sem webfont, sem lib.
   Zero transform 3D. Zero filter em conteudo/texto.
   Animacao infinita so em pseudo/elemento sem texto.
   Rabinho de bolha por borda e radius, nunca losango rotacionado.
   ============================================================ */

:root{
  /* superficies */
  --pm-bg:#EFEDE6;
  --pm-card:#FFFFFF;
  --pm-card-sub:#F7F5EF;
  /* tinta */
  --pm-ink:#0C2A23;          /* texto principal */
  --pm-ink2:#3B4A44;         /* corpo */
  --pm-mut:#6A645B;          /* caption */
  --pm-faint:#CAC4B7;
  --pm-line:rgba(12,42,35,.07);
  /* preto de compromisso (decisao, aro) */
  --pm-black:#0B0D14;
  --pm-black-hi:#1B2130;
  /* accent (marca Munoz Company, #3D9BFF) */
  --pm-blu:#3D9BFF;
  --pm-blu-hi:#6BB4FF;
  --pm-blu-lo:#1E7FE0;
  --pm-blu-press:#0A5FD0;
  --pm-blu-t:#E4F0FF;
  /* semanticas */
  --pm-grn:#2BC65A;
  --pm-grn-t:#E7F6EC;
  --pm-red:#E5484D;
  --pm-amber:#FBBC04;        /* estrelas Google */
  /* google (so dentro da replica) */
  --pm-glink:#1A73E8;
  --pm-gtxt:#202124;
  --pm-gmut:#70757A;
  --pm-gline:#DADCE0;
  /* sms iOS */
  --pm-sms-out-hi:#3FD35A;
  --pm-sms-out-lo:#27B444;
  --pm-sms-in:#E9E9EB;
  /* raios */
  --pm-r-lg:24px; --pm-r-md:20px; --pm-r-sm:14px; --pm-r-pill:28px;
  /* sombras: SEMPRE 2 camadas, contato (curta) + ambiente (longa,
     spread negativo pra nao virar mancha cinza) */
  --pm-sh-card:0 1px 2px rgba(12,42,35,.05), 0 12px 32px -8px rgba(12,42,35,.10);
  --pm-sh-float:0 2px 4px rgba(12,42,35,.06), 0 24px 48px -12px rgba(12,42,35,.16);
  --pm-sh-btn:0 1px 2px rgba(10,95,208,.28), 0 10px 24px -6px rgba(61,155,255,.45);
  /* motion */
  --pm-spring:cubic-bezier(.34,1.56,.64,1);  /* entradas pequenas */
  --pm-glide:cubic-bezier(.2,.8,.2,1);       /* deslizes */
}

/* escopo tipografico: aplicar no body ou no wrapper raiz */
.pmScope{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  background:var(--pm-bg);
  color:var(--pm-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-.014em;
}

/* ------------------------------------------------------------
   1 · MOLDURA DE CELULAR PREMIUM  (.pmPhone)
   Aro titanio escuro em gradiente, ilha dinamica, status bar,
   brilho de vidro estatico em pseudo, sombra em 2 camadas.
   markup: .pmPhone > .pmPhone__bezel > .pmPhone__screen
           > (.pmPhone__island + .pmPhone__status + .pmPhone__body)
   ------------------------------------------------------------ */
.pmPhone{
  position:relative;
  width:min(320px,88vw);
  margin:0 auto;
  border-radius:58px;
  padding:3.5px;                             /* espessura do aro */
  background:linear-gradient(155deg,
    #EDEEF1 0%, #B8BCC4 16%, #878C97 38%,
    #CDD0D6 55%, #7C818C 78%, #B4B8BF 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.75),   /* fio de luz no metal */
    inset 0 -1px 1px rgba(11,13,20,.35),
    0 4px 10px rgba(11,13,20,.14),           /* contato */
    0 30px 64px -16px rgba(11,13,20,.34);    /* ambiente */
}
.pmPhone__bezel{
  background:#05060A;
  border-radius:54.5px;
  padding:9px;
}
.pmPhone__screen{
  position:relative;
  overflow:hidden;
  border-radius:46px;
  background:var(--pm-bg);
  min-height:560px;
  display:flex;
  flex-direction:column;
}
.pmPhone__screen>*{ min-width:0; }
/* ilha dinamica */
.pmPhone__island{
  position:absolute;
  top:11px; left:50%;
  width:92px; height:27px;
  margin-left:-46px;
  border-radius:14px;
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  z-index:60;
}
/* brilho de vidro: sliver diagonal estatico no canto superior,
   alpha maximo .14, nunca sobre texto de conteudo */
.pmPhone__screen::after{
  content:"";
  position:absolute;
  top:-40%; left:-30%;
  width:70%; height:60%;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.14) 48%,
    rgba(255,255,255,.05) 60%,
    rgba(255,255,255,0) 70%);
  pointer-events:none;
  z-index:55;
}
/* status bar fiel: hora esquerda, sinal e bateria direita */
.pmPhone__status{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 26px 6px;
  font-size:14px; font-weight:600; color:var(--pm-ink);
}
.pmPhone__glyphs{ display:flex; align-items:center; gap:6px; }
.pmStSignal{ display:inline-flex; align-items:flex-end; gap:1.5px; }
.pmStSignal i{ width:3px; border-radius:1px; background:var(--pm-ink); }
.pmStSignal i:nth-child(1){ height:4px; }
.pmStSignal i:nth-child(2){ height:6px; }
.pmStSignal i:nth-child(3){ height:8px; }
.pmStSignal i:nth-child(4){ height:10px; }
.pmStBatt{
  width:24px; height:11.5px;
  border:1.5px solid rgba(15,21,34,.42);
  border-radius:3.5px; position:relative;
}
.pmStBatt::before{ content:""; position:absolute; inset:1.5px; right:5.5px;
  background:var(--pm-ink); border-radius:1.5px; }
.pmStBatt::after{ content:""; position:absolute; right:-4px; top:3px;
  width:1.8px; height:4px; background:rgba(15,21,34,.42); border-radius:0 2px 2px 0; }
/* corpo da tela */
.pmPhone__body{
  padding:8px 16px 22px;
  display:flex; flex-direction:column; gap:12px;
  flex:1;
}

/* ------------------------------------------------------------
   2 · CARTAO ELEVADO  (.pmCard)
   ------------------------------------------------------------ */
.pmCard{
  background:var(--pm-card);
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-card);
  padding:20px;
}
.pmCard--float{ box-shadow:var(--pm-sh-float); }
.pmCard--sub{ background:var(--pm-card-sub); box-shadow:none; }
.pmCard--tight{ padding:14px 16px; }

/* ------------------------------------------------------------
   3 · BOTAO PRINCIPAL  (.pmBtn)
   56px, gradiente sutil, sombra colorida, active 0.97.
   Azul: proximo passo. --dark: decisao. --money: so paywall.
   ------------------------------------------------------------ */
.pmBtn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:56px;
  border:none; cursor:pointer;
  border-radius:var(--pm-r-pill);
  background:linear-gradient(180deg,var(--pm-blu-hi) 0%,var(--pm-blu) 52%,var(--pm-blu-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), var(--pm-sh-btn);
  color:#fff;
  font-family:inherit;
  font-size:17px; font-weight:700; letter-spacing:-.01em;
  transition:transform .16s var(--pm-spring), box-shadow .2s ease;
}
.pmBtn:active{
  transform:scale(.97);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(10,95,208,.28), 0 6px 14px -6px rgba(61,155,255,.40);
}
.pmBtn[disabled]{
  background:#85C2FF; box-shadow:none; cursor:default;
}
.pmBtn--dark{
  background:linear-gradient(180deg,var(--pm-black-hi) 0%,var(--pm-black) 60%,#06070C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 1px 2px rgba(11,13,20,.30), 0 10px 24px -6px rgba(11,13,20,.42);
}
.pmBtn--dark:active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 1px 4px rgba(11,13,20,.30);
}
/* dinheiro: gradiente marinho ate azul, caps, 64px. SO no paywall. */
.pmBtn--money{
  height:64px;
  background:linear-gradient(135deg,#0C2A23 0%,#1C7C43 100%);
  text-transform:uppercase; letter-spacing:.04em; font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(10,95,208,.28), 0 14px 32px -6px rgba(61,155,255,.40);
}
.pmBtn svg{ width:20px; height:20px; stroke:currentColor; stroke-width:2.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }

/* ------------------------------------------------------------
   4 · PUSH NOTIFICATION iOS FIEL  (.pmPush)
   Banner moderno: icone 38, titulo bold 13, corpo 13, "agora".
   Sem linha de nome de app (iOS atual nao mostra).
   ------------------------------------------------------------ */
.pmPush{
  display:flex; align-items:flex-start; gap:11px;
  background:rgba(250,250,252,.97);
  border:1px solid rgba(16,24,40,.05);
  border-radius:22px;
  padding:12px 14px;
  box-shadow:0 1px 2px rgba(16,24,40,.06), 0 16px 40px -10px rgba(16,24,40,.22);
}
.pmPush__icon{
  flex:none;
  width:38px; height:38px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--pm-blu-hi),var(--pm-blu-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  color:#fff; font-size:16px; font-weight:800;
}
.pmPush__icon svg{ width:22px; height:22px; stroke:#fff; stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.pmPush__body{ flex:1; min-width:0; }
.pmPush__row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pmPush__title{
  flex:1; min-width:0;
  font-size:13px; font-weight:700; letter-spacing:-.01em; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pmPush__when{ flex:none; font-size:12px; color:rgba(60,60,67,.6); }
.pmPush__text{ font-size:13px; line-height:1.32; color:#1C1C1E; margin-top:1px; letter-spacing:-.005em; }

/* ------------------------------------------------------------
   5 · THREAD DE SMS iOS FIEL  (.pmSms)
   Rabinho OPT-IN via --tail (so no ultimo balao da sequencia),
   desenhado por par de pseudos com border-radius.
   Dentro de fundo nao branco: setar --pm-sms-carve.
   ------------------------------------------------------------ */
.pmSms{
  background:#FFFFFF;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-card);
  overflow:hidden;
}
.pmSms__bar{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 16px 10px;
  background:rgba(247,247,249,.98);
  border-bottom:.5px solid rgba(16,24,40,.10);
}
.pmSms__avatar{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#A6AEBB,#8A93A2);
  color:#fff; font-size:16px; font-weight:600; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.pmSms__name{
  font-size:12px; font-weight:500; color:var(--pm-ink);
  display:flex; align-items:center; gap:3px;
}
.pmSms__name small{ font-size:11px; font-weight:400; color:var(--pm-mut); }
.pmSms__name::after{ content:"›"; color:var(--pm-faint); font-size:13px; }
.pmSms__feed{ display:flex; flex-direction:column; gap:3px; padding:14px 14px 16px; }
.pmSms__stamp{
  align-self:center;
  font-size:11px; font-weight:500; color:rgba(60,60,67,.45);
  margin:4px 0 8px;
}
.pmSms__bub{
  position:relative;
  max-width:78%;
  padding:8px 13px;
  font-size:15px; line-height:1.32; letter-spacing:-.01em;
  border-radius:18px;
}
.pmSms__bub + .pmSms__bub{ margin-top:2px; }
/* recebido: cinza, esquerda */
.pmSms__bub--in{
  align-self:flex-start;
  background:var(--pm-sms-in);
  color:#000;
}
/* enviado: verde, direita */
.pmSms__bub--out{
  align-self:flex-end;
  background:linear-gradient(180deg,var(--pm-sms-out-hi),var(--pm-sms-out-lo));
  color:#fff;
}
/* rabinho: curva por dois blocos com border-radius */
.pmSms__bub--tail{ overflow:visible; }
.pmSms__bub--tail::before{
  content:"";
  position:absolute; bottom:0;
  width:18px; height:19px;
  z-index:0;
}
.pmSms__bub--tail::after{
  content:"";
  position:absolute; bottom:0;
  width:12px; height:21px;
  background:var(--pm-sms-carve,#FFFFFF);
  z-index:1;
}
.pmSms__bub--in.pmSms__bub--tail::before{
  left:-7px;
  background:var(--pm-sms-in);
  border-bottom-right-radius:16px 14px;
}
.pmSms__bub--in.pmSms__bub--tail::after{
  left:-12px;
  border-bottom-right-radius:11px;
}
.pmSms__bub--out.pmSms__bub--tail::before{
  right:-7px;
  background:var(--pm-sms-out-lo);
  border-bottom-left-radius:16px 14px;
}
.pmSms__bub--out.pmSms__bub--tail::after{
  right:-12px;
  border-bottom-left-radius:11px;
}
/* recibo de entrega */
.pmSms__read{
  align-self:flex-end;
  font-size:11px; font-weight:500; color:rgba(60,60,67,.55);
  margin:3px 4px 0;
}
/* typing dots: infinito permitido, elemento sem texto */
.pmSms__typing{
  align-self:flex-start;
  display:flex; gap:5px; align-items:center;
  background:var(--pm-sms-in);
  border-radius:18px;
  padding:12px 14px;
}
.pmSms__typing i{
  width:8px; height:8px; border-radius:50%;
  background:#9B9BA1;
  animation:pmDot 1.3s ease-in-out infinite;
}
.pmSms__typing i:nth-child(2){ animation-delay:.18s; }
.pmSms__typing i:nth-child(3){ animation-delay:.36s; }
@keyframes pmDot{
  0%,60%,100%{ opacity:.35; transform:translateY(0); }
  30%{ opacity:1; transform:translateY(-2px); }
}

/* ------------------------------------------------------------
   6 · REPLICA DO GOOGLE  (.pmG)
   Cores e fonte do Google valem SO aqui dentro.
   ------------------------------------------------------------ */
.pmG{
  background:#FFFFFF;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-card);
  overflow:hidden;
  font-family:Roboto,-apple-system,BlinkMacSystemFont,system-ui,Arial,sans-serif;
  font-size:14px;
  letter-spacing:0;
  color:var(--pm-gtxt);
}
.pmG__head{ padding:16px 16px 0; }
.pmG__logo{
  font-size:24px; font-weight:500; letter-spacing:-.5px;
  text-align:center; margin-bottom:12px;
}
.pmG__logo b{ font-weight:500; }
.pmG__logo .g1{ color:#4285F4; } .pmG__logo .g2{ color:#EA4335; }
.pmG__logo .g3{ color:#FBBC05; } .pmG__logo .g4{ color:#4285F4; }
.pmG__logo .g5{ color:#34A853; } .pmG__logo .g6{ color:#EA4335; }
.pmG__bar{
  display:flex; align-items:center; gap:10px;
  height:44px; padding:0 16px;
  border:1px solid #DFE1E5;
  border-radius:22px;
  box-shadow:0 1px 6px rgba(32,33,36,.12);
  font-size:15px; color:var(--pm-gtxt);
}
.pmG__bar svg{ width:18px; height:18px; flex:none; stroke:#9AA0A6; stroke-width:2;
  fill:none; stroke-linecap:round; }
.pmG__bar span{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pmG__mic{ stroke:#4285F4 !important; }
.pmG__tabs{
  display:flex; gap:22px;
  padding:12px 16px 0;
  border-bottom:1px solid #EBEBEB;
  font-size:13px; color:var(--pm-gmut);
  overflow-x:auto; scrollbar-width:none;
}
.pmG__tabs::-webkit-scrollbar{ display:none; }
.pmG__tab{ padding-bottom:10px; white-space:nowrap; }
.pmG__tab--on{
  color:var(--pm-glink); font-weight:500;
  border-bottom:3px solid var(--pm-glink);
}
/* Business Profile */
.pmG__biz{ padding:16px; border-bottom:8px solid #F1F3F4; }
.pmG__bizName{ font-size:22px; font-weight:400; color:var(--pm-gtxt); letter-spacing:0; }
.pmG__bizRate{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:13px; color:var(--pm-gmut); }
.pmG__bizRate b{ color:var(--pm-gtxt); font-weight:400; }
.pmG__stars{ color:var(--pm-amber); font-size:13px; letter-spacing:1px; }
.pmG__bizMeta{ font-size:13px; color:var(--pm-gmut); margin-top:3px; }
.pmG__bizOpen{ color:#188038; font-weight:500; }
.pmG__acts{ display:flex; gap:8px; margin-top:12px; }
.pmG__act{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:36px;
  border:1px solid var(--pm-gline);
  border-radius:18px;
  background:#fff;
  font-family:inherit; font-size:13px; font-weight:500; color:var(--pm-glink);
  cursor:pointer;
  transition:background .15s ease;
}
.pmG__act:active{ background:#F1F6FE; }
/* variante preenchida: so no primeiro botao (Ligar) quando destacado */
.pmG__act--fill{ background:var(--pm-glink); border-color:var(--pm-glink); color:#fff; }
.pmG__act--fill svg{ stroke:#fff !important; }
.pmG__act svg{ width:15px; height:15px; stroke:var(--pm-glink); stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }
.pmG__photos{ display:flex; gap:6px; margin-top:12px; }
.pmG__photo{ flex:1; height:74px; border-radius:10px; }
.pmG__photo--a{ background:linear-gradient(135deg,#D7E3EE 0%,#9FB6C9 55%,#6E8AA3 100%); }
.pmG__photo--b{ background:linear-gradient(160deg,#EFE4D4 0%,#CBB79B 60%,#93805F 100%); }
.pmG__photo--c{ background:linear-gradient(145deg,#DFE8E1 0%,#A7BFAE 55%,#70907C 100%); }
/* resultados organicos: dominio simples, sem https */
.pmG__res{ padding:14px 16px; }
.pmG__res + .pmG__res{ border-top:1px solid #EBEBEB; }
.pmG__src{ display:flex; align-items:center; gap:8px; }
.pmG__fav{
  width:26px; height:26px; border-radius:50%;
  background:#F1F3F4;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#5F6368;
}
.pmG__url{ font-size:13px; color:var(--pm-gtxt); line-height:1.25; }
.pmG__url small{ display:block; font-size:12px; color:var(--pm-gmut); }
.pmG__title{ display:block; font-size:17px; color:#1A0DAB; margin-top:6px;
  line-height:1.3; font-weight:400; text-decoration:none; }
.pmG__snip{ font-size:13px; color:#4D5156; line-height:1.45; margin-top:3px; }
.pmG__snip b{ font-weight:500; color:var(--pm-gtxt); }

/* ------------------------------------------------------------
   7 · NUMEROS VIVOS  (.pmNum)
   Dinheiro sempre: tabular, peso 800, tracking apertado.
   Unidade de moeda menor via .pmNum__unit.
   ------------------------------------------------------------ */
.pmNum{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--pm-ink);
  line-height:1.05;
}
.pmNum--display{ font-size:44px; line-height:1.02; }
.pmNum--card{ font-size:32px; }
.pmNum--row{ font-size:22px; font-weight:700; }
.pmNum--grn{ color:var(--pm-grn); }
.pmNum--blu{ color:var(--pm-blu); }
.pmNum__unit{
  font-size:.5em; font-weight:700; color:var(--pm-mut);
  letter-spacing:-.01em; vertical-align:baseline;
}
/* alvo do count-up: o JS le data-countup e anima o textContent */
.pmNum [data-countup], .pmNum[data-countup]{ min-width:1ch; }

/* ------------------------------------------------------------
   8 · MOMENTO DE VITORIA  (.pmWin)
   Selo verde cheio, check que desenha, particulas em pseudo
   sem texto, rajada unica, sem som. Disparo: classe is-on.
   ------------------------------------------------------------ */
.pmWin{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:8px 0; }
.pmWin__badge{
  position:relative;
  width:84px; height:84px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#43D065,#23AE49);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 2px 4px rgba(35,174,73,.25),
    0 16px 36px -8px rgba(35,174,73,.45);
}
.pmWin__badge svg{ width:44px; height:44px; }
.pmWin__check{
  stroke:#fff; stroke-width:3.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:52; stroke-dashoffset:52;
}
.pmWin.is-on .pmWin__badge{ animation:pmPop .55s var(--pm-spring) both; }
.pmWin.is-on .pmWin__check{ animation:pmDraw .55s .30s var(--pm-glide) forwards; }
/* particulas: pontos por box-shadow, uma passada so */
.pmWin__badge::before,
.pmWin__badge::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:5px; height:5px; margin:-3px 0 0 -3px;
  border-radius:50%;
  background:transparent;
  opacity:0;
  pointer-events:none;
}
.pmWin__badge::before{
  box-shadow:
    -46px -30px 0 var(--pm-grn),
     48px -22px 0 var(--pm-amber),
    -34px  40px 0 var(--pm-blu),
     40px  38px 0 var(--pm-grn),
      2px -52px 0 var(--pm-blu);
}
.pmWin__badge::after{
  width:4px; height:4px;
  box-shadow:
    -55px   6px 0 var(--pm-amber),
     58px   8px 0 var(--pm-blu),
    -18px -48px 0 var(--pm-grn),
     24px  50px 0 var(--pm-amber);
}
.pmWin.is-on .pmWin__badge::before{ animation:pmBurst .8s .32s var(--pm-glide) forwards; }
.pmWin.is-on .pmWin__badge::after{ animation:pmBurst .9s .40s var(--pm-glide) forwards; }
.pmWin__title{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--pm-ink); margin-top:18px; }
.pmWin__sub{ font-size:15px; color:var(--pm-mut); margin-top:5px; line-height:1.4; }
.pmWin.is-on .pmWin__title{ animation:pmRise .5s .18s var(--pm-glide) both; }
.pmWin.is-on .pmWin__sub{ animation:pmRise .5s .26s var(--pm-glide) both; }
@keyframes pmPop{
  from{ opacity:0; transform:scale(.55); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes pmDraw{ to{ stroke-dashoffset:0; } }
@keyframes pmBurst{
  0%{ opacity:0; transform:scale(.2); }
  25%{ opacity:1; }
  100%{ opacity:0; transform:scale(1.15); }
}

/* ------------------------------------------------------------
   9 · TIPOGRAFIA (hierarquia por PESO)
   ------------------------------------------------------------ */
.pmDisplay{ font-size:40px; font-weight:800; letter-spacing:-.02em; line-height:1.05; color:var(--pm-ink); }
.pmH1{ font-size:27px; font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--pm-ink); }
.pmH2{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--pm-ink); }
.pmBody{ font-size:16px; line-height:1.45; color:var(--pm-ink2); }
.pmCaption{ font-size:13px; line-height:1.4; color:var(--pm-mut); }
.pmOverline{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--pm-mut); }

/* ------------------------------------------------------------
   10 · MOTION (entradas, stagger automatico ou manual)
   ------------------------------------------------------------ */
@keyframes pmRise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes pmPopIn{
  from{ opacity:0; transform:scale(.72); }
  to{ opacity:1; transform:scale(1); }
}
.pmIn{ animation:pmRise .45s var(--pm-glide) both; }
.pmIn--pop{ animation:pmPopIn .45s var(--pm-spring) both; }
/* stagger manual (controle fino) */
.pmIn[data-i="1"]{ animation-delay:.07s; }
.pmIn[data-i="2"]{ animation-delay:.15s; }
.pmIn[data-i="3"]{ animation-delay:.23s; }
.pmIn[data-i="4"]{ animation-delay:.31s; }
.pmIn[data-i="5"]{ animation-delay:.39s; }
.pmIn[data-i="6"]{ animation-delay:.47s; }
/* stagger automatico (filhos diretos, 70 a 90ms) */
.pmStagger>*{ animation:pmRise .45s var(--pm-glide) both; }
.pmStagger>*:nth-child(1){ animation-delay:.02s; }
.pmStagger>*:nth-child(2){ animation-delay:.09s; }
.pmStagger>*:nth-child(3){ animation-delay:.17s; }
.pmStagger>*:nth-child(4){ animation-delay:.25s; }
.pmStagger>*:nth-child(5){ animation-delay:.33s; }
.pmStagger>*:nth-child(6){ animation-delay:.41s; }
.pmStagger>*:nth-child(7){ animation-delay:.49s; }

@media (prefers-reduced-motion:reduce){
  .pmIn,.pmIn--pop,.pmStagger>*,
  .pmWin.is-on .pmWin__badge,
  .pmWin.is-on .pmWin__title,
  .pmWin.is-on .pmWin__sub,
  .pmWin.is-on .pmWin__badge::before,
  .pmWin.is-on .pmWin__badge::after,
  .pmSms__typing i{ animation:none; }
  .pmWin.is-on .pmWin__check{ animation:none; stroke-dashoffset:0; }
}


/* ============================================================
   TEMA RAW (?ds=raw) · reescrito 28/08 com os numeros MEDIDOS
   no funil da Jobber, colhidos ao vivo em secure.getjobber.com.
   Nao e inspiracao de olho: cada valor abaixo saiu do inspetor.

   O que foi medido la:
     fonte     Inter
     tinta     #233D48   (titulo E corpo na mesma cor)
     titulo    36px peso 900, entrelinha 1.08
     corpo     14px peso 400, entrelinha 1.5
     campo     altura 48, raio 8, padding 14px 24px, fonte 14
     botao     altura 48, raio 8, fonte 14, PESO 400
     coluna    500px
     verde     #388523

   Duas adaptacoes conscientes, e so duas:
   1) o verde vira o AZUL da nossa marca. Formato deles, cor nossa.
   2) o corpo sobe de 14 para 15px porque o nosso funil e de celular
      e o deles que eu medi era desktop. No video do celular deles o
      corpo tambem e maior.
   O peso 400 do botao eu MANTIVE igual ao deles, mesmo parecendo
   fraco, porque e escolha deliberada la: o peso mora no titulo.
   ============================================================ */
html[data-ds="raw"]{
  /* superficies */
  --pm-bg:#FFFFFF;
  --pm-card:#FFFFFF;
  --pm-card-sub:#F7F7F5;
  /* tinta: um tom so pra titulo e corpo, como eles fazem */
  --pm-ink:#1F382E;
  --pm-ink2:#1F382E;
  --pm-mut:#6A645B;
  --pm-line:rgba(12,42,35,.18);
  /* acao: o formato e deles, a cor e nossa */
  --pm-blu:#1C7C43;
  --pm-blu-hi:#2E9C56;
  --pm-blu-lo:#155F33;
  --pm-blu-press:#0F4A28;
  --pm-blu-t:#E4F0E7;
  /* raio 8, medido. Nao 4 como eu tinha chutado antes. */
  --pm-r-lg:8px; --pm-r-md:8px; --pm-r-sm:8px; --pm-r-pill:8px;
  /* sombra nao existe no sistema deles */
  --pm-sh-card:none;
  --pm-sh-float:none;
  --pm-sh-btn:none;
  /* motion sem mola */
  --pm-spring:cubic-bezier(.2,.7,.3,1);
  --pm-glide:cubic-bezier(.2,.7,.3,1);
}
html[data-ds="raw"] .pmScope,
html[data-ds="raw"] body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:normal;   /* eles nao apertam. SF apertado e a assinatura Apple */
}
/* TIPOGRAFIA medida */
html[data-ds="raw"] h1,
html[data-ds="raw"] .ob h1,
html[data-ds="raw"] .pmH1{
  font-size:34px;
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--pm-ink);
}
html[data-ds="raw"] .ob p,
html[data-ds="raw"] .pmSub,
html[data-ds="raw"] .pmBody{
  font-size:15px;
  font-weight:400;
  line-height:1.5;
  color:var(--pm-ink);
}
/* CONTROLES medidos: 48 de altura, raio 8 */
html[data-ds="raw"] .pmBtn,
html[data-ds="raw"] .obCta,
html[data-ds="raw"] .obECta,
html[data-ds="raw"] button.cta{
  min-height:48px;
  border-radius:8px;
  font-size:15px;
  font-weight:400;      /* igual a eles. O peso mora no titulo. */
  box-shadow:none;
  background:var(--pm-blu);
  background-image:none;
  letter-spacing:normal;
}
html[data-ds="raw"] .obInput,
html[data-ds="raw"] .pmInput,
html[data-ds="raw"] input[type=text],
html[data-ds="raw"] input[type=tel],
html[data-ds="raw"] input[type=email],
html[data-ds="raw"] input[type=password]{
  min-height:48px;
  border-radius:8px;
  font-size:15px;
  padding:14px 20px;
  border:1px solid var(--pm-line);
  box-shadow:none;
  background:#fff;
}
html[data-ds="raw"] .obInput:focus,
html[data-ds="raw"] .pmInput:focus{
  border-color:var(--pm-blu);
  box-shadow:0 0 0 2px rgba(61,155,255,.16);
}
/* chip de escolha: pilula CONTINUA pilula na Jobber, mas com borda
   fina e sem sombra. Aqui eu sigo eles. */
html[data-ds="raw"] .obChip,
html[data-ds="raw"] .obOpt,
html[data-ds="raw"] .obPick{
  border-radius:999px;
  border:1px solid var(--pm-line);
  box-shadow:none;
  font-size:15px;
  min-height:44px;
}
/* cartao: sem sombra, com borda */
html[data-ds="raw"] .pmCard,
html[data-ds="raw"] .pmTile,
html[data-ds="raw"] .pmSheet{
  border:1px solid var(--pm-line);
  border-radius:8px;
  box-shadow:none;
}
/* BARRA DE PROGRESSO no padrao deles: mais grossa, chapada, reta,
   largura cheia da coluna. A nossa era 3px com gradiente. */
html[data-ds="raw"] #obBar{
  height:5px;
  max-width:none;
  background:#E4E6E4;
  border-radius:0;
}
html[data-ds="raw"] #obBar i{
  background:var(--pm-blu);
  border-radius:0;
}
/* moldura de celular sem aro de vidro */
html[data-ds="raw"] .pmPhone__bezel{
  border-radius:10px;
  padding:6px;
  background:#0B0D14;
  box-shadow:none;
}
html[data-ds="raw"] .pmPhone__screen{ border-radius:6px; }
html[data-ds="raw"] .pmPhone__bezel::before,
html[data-ds="raw"] .pmPhone__bezel::after{ display:none; }

/* ---------------------------------------------------------- outOB-B/frag.css (ob-d1, ob-d2) ---------------------------------------------------------- */
/* ============================================================
   BUILDER B · ob-d1 + ob-d2 · CSS proprio (prefixo ob)
   Nenhuma classe pm* redefinida aqui. Zero transform 3D.
   Zero filter. Animacao infinita SO no caret (elemento sem
   texto). Scale transitorio sempre assenta em 1.
   ============================================================ */

/* regra global de layout: topo ocupado (barra, brand tile, toggle de
   som) fica com o padding-top padrao do shell. Nenhum override aqui:
   as duas telas herdam .ob (64px 20px 36px + safe area). */

/* --- pecas compartilhadas do builder B --- */
.obEnt{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--pm-glide), transform .5s var(--pm-glide);
}
.obEnt.is-go{ opacity:1; transform:none; }

.obCap{
  text-align:center;
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--pm-mut);
  margin:16px 4px 0; min-height:20px;
  opacity:0;
  transition:opacity .35s ease;
}
.obCap.is-on{ opacity:1; }

.obCtaWrap{
  margin-top:16px;
  opacity:0; transform:translateY(14px);
  pointer-events:none;
  transition:opacity .5s var(--pm-glide), transform .5s var(--pm-glide);
}
.obCtaWrap.is-go{ opacity:1; transform:none; pointer-events:auto; }

/* ============================================================
   ob-d1 · replica Google: ranking vivo
   ============================================================ */
#ob-d1 .obD1Head{ margin:2px 2px 16px; }

/* caret de digitacao na barra de busca (sem texto, infinito ok) */
.obCaret{
  display:inline-block;
  width:2px; height:17px; margin-left:1px;
  background:#1A73E8;
  vertical-align:-3px;
  animation:obBlink 1.06s steps(1,end) infinite;
}
.obCaret.is-off{ display:none; }
@keyframes obBlink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

/* pista do ranking: linhas absolutas, posicao por translateY 2D */
.obRank{ position:relative; height:348px; }
.obRank__row{
  position:absolute; top:0; left:0; right:0;
  height:68px; padding:9px 16px; box-sizing:border-box;
  display:flex; align-items:flex-start; gap:12px;
  background:#fff;
  border-top:1px solid #EBEBEB;
  opacity:0;
  transition:transform .62s cubic-bezier(.25,1.08,.35,1), opacity .4s ease;
}
.obRank__row.is-in{ opacity:1; }
/* a empresa do lead: cartao com anel azul, easing com peso e leve
   overshoot 2D na subida (rodada 4: subida ~35% mais rapida) */
.obRank__row--you{
  left:8px; right:8px;
  border-top:none; border-radius:14px;
  z-index:5; background:#fff;
  box-shadow:
    0 0 0 2px var(--pm-blu),
    0 2px 4px rgba(61,155,255,.16),
    0 12px 26px -10px rgba(61,155,255,.45);
  transition:transform .72s cubic-bezier(.3,1.22,.38,1), opacity .4s ease;
}

.obRank__pos{
  flex:none; min-width:22px; height:22px; margin-top:3px; padding:0 5px;
  border-radius:11px; box-sizing:border-box;
  background:#F1F3F4; color:#5F6368;
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, color .3s ease;
}
.obRank__row--you .obRank__pos{ background:var(--pm-blu-t); color:var(--pm-blu); }
.obRank__row--you.is-first .obRank__pos{
  background:linear-gradient(180deg,var(--pm-blu-hi),var(--pm-blu-lo));
  color:#fff;
  box-shadow:0 1px 2px rgba(10,95,208,.35);
}

.obRank__info{ flex:1; min-width:0; }
.obRank__name{
  font-size:15px; font-weight:500; color:var(--pm-gtxt); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.obRank__meta{
  display:flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--pm-gmut); line-height:1.3; margin-top:2px;
}
.obRank__meta b{ font-weight:400; color:var(--pm-gtxt); }
.obRank__sub{
  position:relative;
  font-size:12px; color:var(--pm-gmut); line-height:1.35; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.obRank__cat{ transition:opacity .3s ease; }
.obRank__row--you.is-first .obRank__cat{ opacity:0; }
.obRank__ver{
  position:absolute; left:0; top:0;
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500; color:var(--pm-glink);
  opacity:0; transform:translateY(4px);
  transition:opacity .4s ease .15s, transform .4s var(--pm-glide) .15s;
}
.obRank__row--you.is-first .obRank__ver{ opacity:1; transform:none; }

/* chip da marca: nasce com a subida, fica no cartao do 1o lugar */
.obWith{
  position:absolute; right:12px; top:50%;
  height:22px; margin-top:-11px; padding:0 9px 0 6px;
  display:inline-flex; align-items:center; gap:4px;
  border-radius:11px;
  background:linear-gradient(180deg,var(--pm-blu-hi),var(--pm-blu-lo));
  color:#fff; font-size:11px; font-weight:700; letter-spacing:0;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(10,95,208,.32);
  opacity:0; transform:scale(.6);
  transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.obWith.is-on{ opacity:1; transform:scale(1); }
.obWith svg{ width:13px; height:13px; display:block; }
.obRank__row--you.has-with .obRank__name{ padding-right:96px; }

/* estrelas Google: base cinza + camada ambar por largura */
.obStars{
  position:relative; display:inline-block;
  font-size:12px; line-height:1; letter-spacing:1px;
  color:#DADCE0;
}
.obStars__fill{
  position:absolute; top:0; left:0;
  overflow:hidden; white-space:nowrap;
  color:var(--pm-amber);
  width:0;
  transition:width .9s var(--pm-glide) .12s;
}

/* logo oficial no chip do d1 (o global .obLogoImg vem do shell;
   aqui so o tamanho no contexto do chip) */
.obWith .obLogoImg{ width:13px; height:13px; flex:none; object-fit:contain; display:block; }

/* estados cheios sem movimento */
@media (prefers-reduced-motion:reduce){
  .obEnt,.obRank__row,.obRank__row--you,.obRank__pos,
  .obRank__cat,.obRank__ver,.obStars__fill,.obWith{ transition:none; }
  .obCaret{ animation:none; }
}

/* ---------------------------------------------------------- slide 7 · Site 24h (plano de agencia: fusao condensada de ob-d3 + ob-d4, 3 passos: orcamento monta e envia, homeowner aceita, servico fecha com o valor) ---------------------------------------------------------- */

/* palco: 4 telas empilhadas (site parado, orcamento, aceite, fechamento), uma crossfade de cada vez */
.d4Stage{ position:relative; width:100%; min-height:68cqh; margin-top:2.2cqh; }
/* o print do site e o mais alto dos 4 momentos; trava a altura dele
   pra caber dentro do palco sem sobrepor a mocknote (o palco e
   position:absolute por dentro, nao acompanha o filho mais alto) */
#obD4SiteV .siteframe{ max-height:68cqh; margin-top:0; }
.d4View{
  position:absolute; left:0; right:0; top:0;
  opacity:0; transform:translateY(1.4cqh);
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.d4View.is-on{ opacity:1; transform:none; pointer-events:auto; }
.d4View.is-out{ opacity:0; transform:translateY(-1cqh); }
#obD4DocV .pmScope,#obD4SmsV .pmScope,#obD4CloseV .pmScope{ width:min(90cqw,440px); margin:0 auto; }

/* selo "preenchido pela Munoz": rotulo informativo no cabecalho do orcamento, nao e comando de app */
.d4Ficha__lockTag{
  flex:none;
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--pm-mut);
  background:#EEF1F6;
  border-radius:10px; padding:3px 9px 3px 7px;
}
.d4Ficha__lockTag svg{
  width:11px; height:11px; display:block;
  stroke:currentColor; stroke-width:2; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}

/* orcamento: documento que se monta linha por linha */
.d4Est{ margin-top:1.4cqh; }
.d4Est__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.d4Est__co{
  font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--pm-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.d4Est__tag{
  flex:none;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--pm-blu);
  background:var(--pm-blu-t);
  border-radius:10px; padding:3px 9px;
}
.d4Est__srv{ margin:12px 0 4px; }
.d4Est__rows{ margin-top:8px; }
.d4Est__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--pm-line);
  font-size:14.5px; color:var(--pm-ink2);
}
.d4Est__row b{ font-weight:700; color:var(--pm-ink); font-variant-numeric:tabular-nums; }
.d4Est__row--tot{ border-bottom:none; padding-top:14px; font-size:15px; font-weight:600; color:var(--pm-ink); }
/* linhas guardam o espaco e deslizam quando o documento se monta */
.d4Bld{
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .4s var(--pm-glide);
}
.d4Bld.is-on{ opacity:1; transform:none; }
.d4Est__sent{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--pm-line);
  font-size:13px; font-weight:600; color:var(--pm-grn);
  opacity:0; transform:translateY(6px);
  transition:opacity .35s ease, transform .4s var(--pm-glide);
}
.d4Est__sent.is-on{ opacity:1; transform:none; }
.d4Est__sent svg{
  width:15px; height:15px;
  stroke:currentColor; stroke-width:2.6; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}

/* aceite: uma unica mensagem do homeowner, sem negociacao (corte da secao 4.2 do plano) */
.d4Feed{ display:flex; flex-direction:column; gap:3px; padding:14px 14px 16px; min-height:84px; }
.d4Pop{ animation:d4PopIn .38s var(--pm-spring) both; }
@keyframes d4PopIn{
  from{ opacity:0; transform:translateY(8px) scale(.97); }
  to{ opacity:1; transform:none; }
}
.d4Ty{ display:flex; flex-direction:column; gap:3px; width:100%; align-items:flex-start; }
.d4Ty__who{ font-size:11px; font-weight:600; color:var(--pm-mut); margin-left:4px; }
.d4Ty__bub{
  display:inline-flex; align-items:center; gap:4px;
  padding:10px 14px; border-radius:18px;
  background:var(--pm-sms-in);
}
.d4Ty__bub i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(60,60,67,.45);
  animation:d4TyDot 1.1s ease-in-out infinite;
}
.d4Ty__bub i:nth-child(2){ animation-delay:.14s; }
.d4Ty__bub i:nth-child(3){ animation-delay:.28s; }
@keyframes d4TyDot{
  0%,60%,100%{ transform:translateY(0); opacity:.4; }
  30%{ transform:translateY(-3px); opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .d4View,.d4Bld,.d4Est__sent{ transition:none; }
  .d4Pop{ animation:none; }
  .d4Ty__bub i{ animation:none; opacity:.6; }
}

/* ============================================================
   ADAPTACAO PRO DECK MUNOZ COMPANY (plano de agencia)
   As animacoes de Google (slide 4) e Site 24h (slide 7) moram
   DENTRO do slide do template, no lugar do mock estatico — nao
   sao mais slides proprias, entao usam o fundo e a moldura que
   o slide do template ja tem. .pmScope so centraliza e ativa a
   tipografia do sistema pm; o fundo dele fica transparente pra
   nao pintar um retangulo claro atras do cartao — quem pinta e
   o proprio .ob.demoCard/.pmCard.
   ============================================================ */

/* logo oficial dentro de qualquer ladrilho das demos */
.obLogoImg{width:100%;height:100%;object-fit:contain;display:block}

.pmScope{background:transparent;position:relative}

/* seguro contra filtro: nada de grayscale dentro das demos, mesmo
   que uma edicao futura amplie os seletores do filtro pb do deck */
#slideGoogle .pmScope,#slideGoogle .pmScope *,
#slideSite .pmScope,#slideSite .pmScope *,
#slideSocial .pmScope,#slideSocial .pmScope *{filter:none}

/* excecao a regra de seguranca acima: o filtro "foto ruim"/"foto limpa" do
   plano Insta+Site (secao 4) precisa vencer o filter:none de seguranca
   dentro dos slides 6/7 — ID+duas classes empata/bate a regra acima */
#slideSocial .pmScope .is-bad,#slideSite .pmScope .is-bad{filter:brightness(.72) contrast(1.32) saturate(.55) blur(.8px)}
#slideSocial .pmScope .is-clean,#slideSite .pmScope .is-clean{filter:none}

/* cartao flutuante da demo do Google (slide 4): mesma familia visual
   de .browser/.siteframe que ja flutuam nos outros slides do mecanismo */
.ob.demoCard{
  width:440px; max-width:92cqw;
  margin:0 auto;
  transform:scale(var(--demo-scale,1));
  transform-origin:top center;
  background:var(--pm-bg);
  border-radius:1.6cqh;
  box-shadow:0 3cqh 8cqh rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);
  padding:20px 20px 24px;
  overflow:hidden;
}
#slideGoogle .pmScope{margin-top:3cqh}
#slideGoogle .ob.demoCard{--demo-scale:.9}

/* degraus/setas/bolinhas/caneta do deck nunca fazem parte do que a
   caneta risca por cima nem do clique-avanca-passo: ja ficam de fora
   por serem <button>/.dot/.nav, tratados no <script> */

/* ---------------------------------------------------------- slide 8 · Jornada (reforco pequeno na 3a etapa: mensagem real do homeowner, sem clique nem tela bloqueada, plano de agencia) ---------------------------------------------------------- */
.jrnPhone{
  width:min(22cqw,236px);
  margin:2.6cqh auto 0;
  border-radius:2.4cqh;
  padding:.45cqh;
  background:linear-gradient(155deg,#EDEEF1 0%,#B8BCC4 16%,#878C97 38%,#CDD0D6 55%,#7C818C 78%,#B4B8BF 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -1px 1px rgba(11,13,20,.35),0 1.4cqh 3.2cqh rgba(11,13,20,.4);
}
.jrnPhone__bezel{ background:#05060A; border-radius:2cqh; padding:.5cqh; }
.jrnPhone__screen{ position:relative; overflow:hidden; border-radius:1.6cqh; background:var(--pm-bg); }
.jrnPhone__bar{
  display:flex; align-items:center; gap:.8cqh;
  padding:1.3cqh 1.3cqh .9cqh;
  background:rgba(247,247,249,.98);
  border-bottom:.5px solid rgba(16,24,40,.10);
}
.jrnPhone__av{
  width:2.8cqh; height:2.8cqh; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#A6AEBB,#8A93A2);
  color:#fff; font-size:1.3cqh; font-weight:700;
}
.jrnPhone__name{ font-size:1.25cqh; font-weight:600; color:var(--pm-ink); }
.jrnPhone__feed{ padding:1.3cqh 1.3cqh 1.6cqh; }
.jrnPhone__feed .pmSms__bub{ font-size:1.7cqh; padding:1.1cqh 1.5cqh; }

/* ============================================================
   PLANO INSTA+SITE (pedido do Enrico 16/09) · slide 6 (Instagram
   se transformando) e slide 7 (site velho virando o site novo).
   Mesmo arquivo de foto serve pro antes e pro depois: quem muda a
   aparencia e so filtro/transform via classe, nunca o src.
   ============================================================ */

/* --- recorte compartilhado antes/depois (secao 4 do plano) --- */
.is-bad{
  filter:brightness(.72) contrast(1.32) saturate(.55) blur(.8px);
  transform:rotate(var(--bad-rot,-3deg)) scale(1.06);
}
.is-clean{
  filter:none; transform:none;
  transition:filter .34s var(--pm-glide),transform .34s var(--pm-glide);
}
/* marca dagua falsa de banco de imagem: sempre logo depois da <img>
   no DOM (irma adjacente), some quando a irma vira .is-clean */
.pmBank__wm{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-28deg,rgba(255,255,255,.16) 0 2px,transparent 2px 44px);
}
.pmBank__wm::after{
  content:"PREVIEW"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-28deg); letter-spacing:.3em;
  font-size:11px; font-weight:700; color:rgba(255,255,255,.60); white-space:nowrap;
}
.is-clean + .pmBank__wm{ display:none; }

/* ------------------------------------------------------------
   slide 6 · Instagram (.pmIG) · perfil real, sem chrome de app
   ------------------------------------------------------------ */
#slideSocial .pmScope{ margin-top:2.6cqh; }
#slideSocial .ob.demoCard{ --demo-scale:.94; padding:0; overflow:visible; box-shadow:none; background:transparent; }
.pmIG{
  background:var(--pm-card);
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  box-shadow:var(--pm-sh-float);
  overflow:hidden;
  padding:20px 20px 6px;
}
.pmIG__head{ display:flex; gap:16px; align-items:flex-start; }
.pmIG__avatar{
  flex:none; width:68px; height:68px; border-radius:50%;
  background:#E7E5DD; border:1px solid var(--pm-line);
  overflow:hidden; position:relative;
}
.pmIG__avatar img,.pmIG__avatar .obLogoImg{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pmIG__avatar.is-on img,.pmIG__avatar.is-on .obLogoImg{ animation:pmPopIn .4s var(--pm-spring) both; }
.pmIG__info{ flex:1; min-width:0; }
.pmIG__handle{ font-size:16px; font-weight:700; color:var(--pm-ink); letter-spacing:-.01em; }
.pmIG__stats{ margin-top:10px; line-height:1.3; }
.pmIG__stats b{ font-size:15px; font-weight:800; color:var(--pm-ink); font-variant-numeric:tabular-nums; }
.pmIG__stats span{ font-size:11.5px; color:var(--pm-mut); margin:0 14px 0 4px; }
.pmIG__bio{
  position:relative; min-height:17px; margin-top:10px;
  font-size:13px; line-height:1.4; color:transparent;
  transition:color .4s ease;
}
.pmIG__bio::before{
  content:""; position:absolute; left:0; top:7px; width:132px;
  border-top:1px dashed var(--pm-faint);
  opacity:1; transition:opacity .3s ease;
}
.pmIG__bio.is-on{ color:var(--pm-ink2); }
.pmIG__bio.is-on::before{ opacity:0; }
.pmIG__bio2{
  min-height:15px; margin-top:2px; font-size:13px; line-height:1.4; color:var(--pm-ink2);
  opacity:0; transform:translateY(4px);
  transition:opacity .4s ease,transform .4s var(--pm-glide);
}
.pmIG__bio2.is-on{ opacity:1; transform:none; }
.pmIG__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:18px; }
.pmIG__post{ position:relative; aspect-ratio:1; overflow:hidden; background:#E7E5DD; }
.pmIG__post img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:center;
}
.pmIG__likes{
  position:absolute; right:6px; bottom:6px;
  padding:3px 8px; border-radius:10px;
  background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:700; letter-spacing:-.01em;
  opacity:0; transform:scale(.7);
  transition:opacity .3s var(--pm-glide),transform .4s var(--pm-spring);
}
.pmIG__likes.is-on{ opacity:1; transform:scale(1); }

@media (prefers-reduced-motion:reduce){
  .pmIG__avatar img,.pmIG__avatar .obLogoImg,.pmIG__likes,.pmIG__bio,.pmIG__bio2,.is-clean{ transition:none; animation:none; }
}

/* ------------------------------------------------------------
   slide 7 · site velho virando o site novo (.pmSite), passo 0
   novo na frente do fluxo de orcamento que ja existia
   ------------------------------------------------------------ */
.pmSite{ position:relative; min-height:66cqh; background:#fff; overflow:hidden; }
.pmSite__old,.pmSite__new{
  position:absolute; top:3.6cqh; left:0; right:0; bottom:0;
  background:#fff;
  opacity:0; transform:translateY(6px);
  pointer-events:none;
  transition:opacity .34s ease,transform .34s ease;
}
.pmSite__old.is-on,.pmSite__new.is-on{ opacity:1; transform:none; pointer-events:auto; }
.pmSite__old.is-out{ opacity:0; transform:translateY(-6px); pointer-events:none; }

/* -- site velho: tipografia generica, foto ruim, botao sem destaque, sobreposicao de proposito -- */
.pmSite__oldTop{
  font-family:Arial,Helvetica,sans-serif;
  font-size:15px; font-weight:400; color:#4a4a4a;
  padding:14px 20px; background:#F2F1EC; border-bottom:1px solid #DEDCD3;
}
.pmSite__old{ display:flex; flex-direction:column; }
.pmSite__oldHero{ position:relative; flex:1; min-height:216px; overflow:hidden; background:#ccc; }
.pmSite__oldPhoto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; display:block; }
.pmSite__oldH1{
  position:absolute; left:20px; bottom:46px; max-width:66%; z-index:2;
  font-family:Arial,Helvetica,sans-serif; font-weight:700; font-size:22px; line-height:1.18;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.65);
}
.pmSite__oldBtn{
  position:absolute; left:20px; bottom:6px; z-index:3;
  padding:9px 20px; font-family:Arial,Helvetica,sans-serif; font-size:13px; font-weight:400;
  background:#C7C7C2; color:#8C8C86; border:1px solid #B4B4AE; border-radius:2px;
  cursor:default;
}

/* -- site novo: topo com logo, hero, servicos, avaliacoes, CTA -- */
.pmSite__newTop{
  display:flex; align-items:center; gap:10px;
  padding:16px 22px; border-bottom:1px solid var(--pm-line);
}
.pmSite__newLogo{ width:30px; height:30px; flex:none; border-radius:8px; overflow:hidden; display:block; }
.pmSite__newLogo .obLogoImg{ width:100%; height:100%; object-fit:contain; display:block; }
.pmSite__newName{ font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--pm-ink); }
.pmSite__new{ display:flex; flex-direction:column; }
.pmSite__newHero{ position:relative; flex:1; min-height:164px; overflow:hidden; }
.pmSite__newPhoto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 62%; display:block; }
.pmSite__newH1{
  position:absolute; left:22px; bottom:20px; max-width:70%; z-index:2;
  font-weight:800; font-size:22px; line-height:1.18; letter-spacing:-.015em;
  color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.pmSite__newSvc{ display:flex; gap:10px; flex-wrap:wrap; padding:16px 22px 0; }
.pmSite__newSvcItem{
  font-size:12.5px; font-weight:600; color:var(--pm-ink2);
  background:var(--pm-card-sub); border:1px solid var(--pm-line);
  border-radius:999px; padding:6px 13px;
}
.pmSite__newRev{
  padding:14px 22px 0; font-size:14px; color:var(--pm-amber); letter-spacing:1px;
}
.pmSite__newRev b{ color:var(--pm-ink); font-size:14px; letter-spacing:0; }
.pmSite__newCta{
  display:block; margin:16px 22px 20px; padding:12px 22px;
  border:none; border-radius:var(--pm-r-pill); cursor:default;
  background:linear-gradient(180deg,var(--pm-blu-hi) 0%,var(--pm-blu) 52%,var(--pm-blu-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), var(--pm-sh-btn);
  color:#fff; font-family:inherit; font-size:14.5px; font-weight:700; letter-spacing:-.005em;
}

/* estagio 2 (frag2): cascata manual do passo 0, nao usa o stagger
   automatico .frag do deck (que revelaria tudo de uma vez na entrada
   do slide, antes do clique) */
.frag2{
  opacity:0; transform:translateY(10px) scale(.98);
  transition:opacity .38s var(--pm-glide),transform .42s var(--pm-glide);
}
.frag2.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .pmSite__old,.pmSite__new,.frag2,.is-clean{ transition:none; }
}