/* motion dos diferenciais — um arquivo só, servido em bpconstrucoes.com/motion/ e embutido no site, no /orcamentos e na proposta.
   o palco é 1280x720 e escala pra caber (contain) na janela, seja iframe ou tela cheia. */
:root{--creme:#F3F0E8;--navy:#131946;--navy2:#1F3261;--azul:#3B5C8F;--warm:#C5BEA8;--ouro:#B39A67;--cinza:#6B6F80;--fio:#DCD6C6;
  --f:"Barlow",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--fc:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--navy);overflow:hidden;font-family:var(--f);-webkit-font-smoothing:antialiased}
html,body,.tela{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;caret-color:transparent}
.tela{position:fixed;inset:0;cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;-webkit-tap-highlight-color:transparent}
/* safari mostrava o cursor de texto (barrinha colorida) no fim da frase depois de clicar no vídeo (sergio 28/09) */
.palco,.palco *{-webkit-user-select:none;user-select:none;caret-color:transparent;outline:none;cursor:pointer}
/* o ponteiro virava o "I" de texto sobre as letras e parecia um cursor piscando (sergio 28/09) — mãozinha no vídeo inteiro */
.palco{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;background:var(--navy);color:#fff}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(19,25,70,0) 40%,rgba(19,25,70,.55));border:0;cursor:pointer;padding:0;color:#fff;font-family:var(--f);z-index:10}
.play .bola{width:clamp(56px,11vw,84px);height:clamp(56px,11vw,84px);border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.play:hover .bola,.play:focus-visible .bola{transform:scale(1.07)}
.play:focus-visible{outline:2px solid var(--warm);outline-offset:-4px}
.play .leg{position:absolute;left:16px;bottom:14px;font-size:clamp(12px,2.2vw,15px);opacity:.92}
[hidden]{display:none!important}
.ctrl{position:absolute;left:0;right:0;bottom:0;z-index:11;display:flex;align-items:center;gap:10px;padding:8px 12px 10px;background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,0));opacity:0;transition:opacity .25s}
.tela:hover .ctrl,.tela.pausado .ctrl,.ctrl:focus-within{opacity:1}
.ctrl .barra{flex:1;height:16px;position:relative;cursor:pointer}
.ctrl .trilho{position:absolute;left:0;right:0;top:7px;height:2px;background:rgba(255,255,255,.35)}
.ctrl .feito{position:absolute;left:0;top:7px;height:2px;background:#fff}
.ctrl button{background:transparent;border:0;color:#fff;cursor:pointer;padding:4px;display:flex}
.ctrl button:focus,.ctrl .barra:focus{outline:none}
.ctrl button:focus-visible,.ctrl .barra:focus-visible{outline:2px solid var(--warm);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.play .bola,.ctrl{transition:none}}
/* ---------- cenas ---------- */
.scene{position:absolute;inset:0;visibility:hidden;background:var(--navy)}
.scene *{box-sizing:border-box}
.lbl{font-size:13px;letter-spacing:.16em;color:var(--warm);font-weight:500}
/* 1 abertura */
.s1 .frase{position:absolute;left:0;right:0;top:318px;text-align:center;font-weight:300;font-size:42px}
.s1 .frase b{font-weight:300}
.s1 .masc{position:absolute;left:50%;top:165px;width:220px;margin-left:-110px}
.s1 .convite{position:absolute;left:0;right:0;top:506px;text-align:center;font-weight:300;font-size:36px}
.s1 .convite b{font-weight:300}
/* 2 dez anos */
.s2 .dez{position:absolute;left:70px;top:40px;font-family:var(--fc);font-weight:800;font-size:640px;line-height:.9;letter-spacing:-.02em;color:transparent;background-image:url(img/apartamento-terra.jpg);background-size:cover;background-position:40% 50%;-webkit-background-clip:text;background-clip:text}
.s2 .lado{position:absolute;left:720px;top:250px;display:flex;flex-direction:column;gap:10px}
.s2 .anos{font-weight:300;font-size:110px;line-height:1}
.s2 .sub{font-size:40px;font-weight:300;line-height:1.2;max-width:500px}
/* 3 números */
.s3 .col{position:absolute;top:150px;display:flex;flex-direction:column;gap:8px}
.s3 .big{font-family:var(--fc);font-weight:300;font-size:250px;line-height:.85;font-variant-numeric:tabular-nums}
.s3 .big sup{font-size:.4em;vertical-align:.95em;color:var(--warm)}
.s3 .cap{font-size:36px;font-weight:300;line-height:1.2;max-width:520px}
/* 4 escritórios */
.s4 .nome{position:absolute;left:0;right:0;top:300px;text-align:center;font-weight:700;font-size:76px;line-height:1.05;letter-spacing:-.01em}
.s4 .topo{position:absolute;left:56px;top:62px}
.s4 .grade{position:absolute;left:56px;right:56px;top:150px;display:grid;grid-template-columns:repeat(3,1fr)}
.s4 .grade span{font-weight:700;font-size:32px;padding:22px 0 20px;border-bottom:1px solid rgba(255,255,255,.16)}
.s4 .grade span.mais{grid-column:span 2;font-weight:300;color:var(--warm)}
/* 5 fotos */
.s5 .foto{position:absolute;inset:0;background-size:cover;background-position:center}
.s5 .rotulo{position:absolute;left:56px;bottom:48px;font-size:22px;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.s5 .tit{position:absolute;left:56px;top:56px;font-family:var(--fc);font-size:64px;font-weight:500;line-height:1;text-shadow:0 1px 24px rgba(0,0,0,.4)}
.s5 .tira{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)}
.s5 .tira div{background-size:cover;background-position:center}
/* 6 escopo */
.s6{background:var(--creme);color:var(--navy)}
.s6 .esq{position:absolute;left:64px;top:92px;width:470px;display:flex;flex-direction:column;gap:22px}
.s6 .esq .h{font-family:var(--fc);font-size:74px;font-weight:500;line-height:.95}
.s6 .esq .p{font-size:28px;font-weight:300;color:#3A3F58;line-height:1.35}
.s6 .esq .p b{font-weight:300;color:var(--navy)}
.s6 .doc{position:absolute;right:64px;top:70px;width:560px;background:#fff;border-radius:14px;box-shadow:0 30px 60px -30px rgba(19,25,70,.45);padding:26px 30px}
.s6 .doc .cab{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.14em;color:var(--azul);padding-bottom:12px;border-bottom:1px solid var(--fio)}
.s6 .it{display:grid;grid-template-columns:38px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid #EEEAE0;font-size:19px;align-items:baseline}
.s6 .it .c{font-size:13px;color:var(--cinza);font-variant-numeric:tabular-nums}
.s6 .it .q{font-size:16px;color:var(--azul);font-variant-numeric:tabular-nums}
.s6 .marca{background:linear-gradient(transparent 58%,rgba(197,190,168,.7) 58%)}
/* 7 corpo técnico */
.s7 .h{position:absolute;left:56px;top:80px;font-family:var(--fc);font-size:110px;font-weight:500;line-height:1}
.s7 .tres{position:absolute;left:56px;right:56px;top:260px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.18)}
.s7 .tres div{padding:26px 28px 0 0;display:flex;flex-direction:column;gap:10px}
.s7 .tres .n{font-family:var(--fc);font-size:22px;color:var(--warm);font-weight:500}
.s7 .tres b{font-weight:300;font-size:40px;line-height:1.05;min-height:2.1em}
.s7 .tres span{font-size:26px;font-weight:300;line-height:1.25}
.s7 .seguro{position:absolute;left:56px;right:56px;top:500px;display:flex;align-items:center;gap:22px;padding:24px 28px;border:1px solid rgba(197,190,168,.55);border-radius:14px}
.s7 .seguro .ic{width:46px;height:52px;flex:none}
.s7 .seguro b{font-size:36px;font-weight:300}
.s7 .seguro span{font-size:26px;font-weight:300}
/* 8 sistema */
.s8{background:#E9EDF3;color:var(--navy)}
.s8 .h{position:absolute;left:56px;top:56px;width:380px;font-family:var(--fc);font-size:58px;font-weight:500;line-height:.98}
.s8 .p{position:absolute;left:58px;top:246px;width:390px;font-size:25px;line-height:1.3;font-weight:300;color:var(--navy)}
.s8 .chips{position:absolute;left:58px;top:470px;display:flex;flex-direction:column;gap:10px}
.s8 .chip{font-size:21px;padding:9px 16px;border-radius:999px;background:#fff;box-shadow:0 1px 0 #DCE1EB;display:inline-flex;gap:10px;align-items:center;width:max-content}
.s8 .chip i{width:8px;height:8px;border-radius:50%;background:var(--azul)}
.s8 .mac{position:absolute;left:470px;top:64px;width:860px;height:680px;border-radius:16px;background:#fff;box-shadow:0 40px 80px -30px rgba(19,25,70,.5);overflow:hidden}
.s8 .mac .barra-j{height:34px;background:#F4F5F8;border-bottom:1px solid #E3E6EE;display:flex;align-items:center;gap:7px;padding-left:14px;position:relative;z-index:3}
.s8 .mac .barra-j i{width:11px;height:11px;border-radius:50%;background:#D5D9E2}
.s8 .mac .barra-j em{font-style:normal;font-size:12px;color:#8A90A2;margin-left:16px}
.s8 .mac .shot{position:absolute;left:0;top:34px;width:860px;height:646px;background-size:860px auto;background-repeat:no-repeat;background-position:0 0;transform-origin:30% 45%}
.s8 .cursor{position:absolute;width:22px;height:22px;z-index:4;pointer-events:none}
.s8 .toque{position:absolute;width:44px;height:44px;border-radius:50%;border:2px solid var(--azul);z-index:4}
/* 9 semanal */
.s9{background:var(--creme);color:var(--navy)}
.s9 .h{position:absolute;left:56px;top:52px;font-family:var(--fc);font-size:60px;font-weight:500;line-height:1}
.s9 .p{position:absolute;left:58px;top:124px;width:680px;font-size:25px;line-height:1.3;font-weight:300;color:var(--navy)}
.s9 .grade{position:absolute;left:56px;top:222px;width:680px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.s9 .grade div{aspect-ratio:4/3;border-radius:10px;background-size:cover;background-position:center;box-shadow:0 12px 24px -16px rgba(19,25,70,.5)}
.s9 .cont{position:absolute;left:58px;top:648px;font-size:18px;color:var(--cinza)}
.s9 .cont b{font-family:var(--fc);font-size:34px;color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums}
.s9 .fone{position:absolute;left:800px;top:40px;width:330px;height:700px;border-radius:44px;background:#0B0F2E;padding:10px;box-shadow:0 40px 70px -30px rgba(19,25,70,.6)}
.s9 .scr,.s10 .scr{width:100%;height:100%;border-radius:35px;overflow:hidden;background:var(--creme);position:relative}
.shotp{position:absolute;inset:0;background-size:100% auto;background-repeat:no-repeat;background-position:0 0}
.s9 .aviso-push{position:absolute;left:780px;top:70px;width:370px;background:rgba(255,255,255,.96);border-radius:18px;padding:14px 16px;display:flex;gap:12px;align-items:center;box-shadow:0 20px 40px -16px rgba(19,25,70,.45);z-index:3}
.s9 .aviso-push img{width:38px;height:38px;border-radius:9px;background:var(--creme);object-fit:contain;padding:3px}
.s9 .aviso-push b{font-weight:400;display:block;font-size:14px}
.s9 .aviso-push span{font-size:13px;color:var(--cinza)}
/* 10 portais */
.s10{background:var(--navy2)}
.s10 .h{position:absolute;left:56px;top:150px;width:470px;font-family:var(--fc);font-size:64px;font-weight:500;line-height:1}
.s10 .p{position:absolute;left:58px;top:370px;width:440px;font-size:30px;line-height:1.25;font-weight:300}
.s10 .leg{position:absolute;left:58px;top:490px;display:flex;flex-direction:column;gap:14px}
.s10 .leg div{font-size:34px;font-weight:300;line-height:1.1}
.s10 .leg i{font-style:normal;font-size:12px;letter-spacing:.16em;color:var(--warm);width:140px}
.s10 .fone{position:absolute;width:320px;height:680px;border-radius:44px;background:#0B0F2E;padding:10px;box-shadow:0 50px 80px -30px rgba(0,0,0,.7)}
.s10 .tag{position:absolute;font-size:12px;letter-spacing:.16em;color:var(--warm)}
/* 11 fecho */
.s11{background:var(--creme);color:var(--navy)}
.s11 .linha{position:absolute;left:0;right:0;text-align:center;font-size:46px;font-weight:300;line-height:1.1}
.s11 .fio{position:absolute;left:600px;top:305px;width:80px;height:1px;background:var(--ouro)}
.s11 .logo{position:absolute;left:50%;top:450px;width:230px;margin-left:-115px}
