/* =====================================================================
   MM Construtora: identidade visual sobre o motor do deck.
   O motor (v9.css, deck.js) veio da apresentação da Moura; as cores dele já foram
   recoloridas para a paleta da MM por _build/recolorir-mm.py. Este arquivo carrega
   DEPOIS do v9.css e põe o resto da identidade da MM: Montserrat e Poppins, título em
   dois pesos (300 branco + 800 bege com brilho), sobretítulo com o símbolo da MM,
   o símbolo vetorizado nas máscaras e os tamanhos de título recalculados para a
   Montserrat, que é mais larga que a Inter.
   ===================================================================== */
:root{--display:'Montserrat',system-ui,-apple-system,sans-serif;--sans:'Poppins',system-ui,-apple-system,sans-serif;
  --pico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'%3E%3Cpath fill='%23000000' d='M0 0 L18.6 0 L34 24.6 L50 0 L66 24.6 L81.4 0 L100 0 L100 64 L82.5 64 L82.5 27.4 L66.2 52 L50 27.5 L33.8 52 L17.5 27.4 L17.5 64 L0 64Z M50 43.8 L58.8 58.6 L58.8 64 L41.2 64 L41.2 58.6Z'/%3E%3C/svg%3E")}

/* títulos: Montserrat 300, destaque em 800 bege com o brilho do feed da MM */
h1,h2,h3,.display{letter-spacing:-.022em;word-spacing:0}
h1,h2{font-weight:300}
.acc{font-weight:800;background:linear-gradient(100deg,#fff 0%,var(--creme) 35%,#fff7e6 55%,var(--creme) 75%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mmBrilho 7s linear infinite}
@keyframes mmBrilho{to{background-position:220% 0}}
.cap-t h1{font-weight:300;letter-spacing:.1em}
.cap-t h1 .acc,.cap2-t h1 .acc,.cx2-t h1 .acc{font-weight:800}
/* em papel claro o destaque fica sólido (o gradiente some no creme) */
.prancha .acc,.pr-cab .acc,.mt-folha .acc,.pr2-cartao .acc,.ficha .acc{background:none;-webkit-text-fill-color:currentColor;animation:none}
body.qa .acc{animation:none}

/* sobretítulo: Montserrat 700 espaçada, com o símbolo da MM no lugar dos picos */
.eyebrow{font:700 11px var(--display);letter-spacing:.24em}
.eyebrow::before{width:23px;height:15px}

/* o símbolo da MM (quadrado 100x100 do motor, M de 100x64 centrado) */
.simb .simb-fill{fill:url(#simbG);opacity:0}
.is-active .simb .simb-fill,.play .simb .simb-fill{animation:mmEnche .8s var(--ease) forwards;animation-delay:calc(var(--sd,.25s) + 1.05s)}
.c3d-simb .simb-fill,.am-ana-simb .simb-fill{display:none}
@keyframes mmEnche{to{opacity:1}}
[data-simbolo-mask] .simb-fill{fill:#fff;stroke:none;opacity:0}
.is-active [data-simbolo-mask] .simb-fill{animation:mmEnche .55s 1.2s var(--ease) forwards}
[data-simbolo-mask] rect.simb-cheio{fill:#fff;stroke:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:0}
.is-active [data-simbolo-mask] rect.simb-cheio{animation:mmEnche .45s 2.75s var(--ease) forwards}
body.qa [data-simbolo-mask] .simb-fill,body.qa [data-simbolo-mask] rect.simb-cheio{opacity:1}

/* marcas: o símbolo da MM é largo (100x64), não quadrado */
.tp-m img{width:25px;height:16px;object-fit:contain}
.ficha-top img,.mt-cab img,.pr2-topo img,.cmp-h.est img,.pr-marca img{object-fit:contain}
#intro img{height:58px}
.intro-simb{width:120px;height:120px}
.logo-pq{height:74px}
#capa .logo-pq{height:78px}
.aut-logo{height:70px}

/* tamanhos de título recalculados para a Montserrat (86% dos do motor) */
h1{font-size:72px}
h2{font-size:43px}
.diag-cab h2{font-size:41px}
.jor-cab h2{font-size:50px}
.pr-cab h2{font-size:33px}
.aut-l h2{font-size:45px}
.lid-cab h2{font-size:40px}
.casas-cab h2{font-size:36px}
.cab h2{font-size:38px}
.pr7-cab h2{font-size:38px}
.inv-calma h2{font-size:58px}
.cx-h h2{font-size:36px}
.alin-l h2{font-size:48px}
.cf-capa-in h2{font-size:64px}
.cf-head h2{font-size:40px}
.pq-l h2{font-size:45px}
#fecho h1{font-size:48px}
#capa h1{font-size:89px}
.jor-cab h2{font-size:46px}
.lid2-txt h2{font-size:40px}
.cap-t h1{font-size:76px}
.cap2-t h1{font-size:65px}
#cf-terreno .cab h2{font-size:36px}
.pj-txt h2{font-size:36px}
.am-cab h2{font-size:36px}
.ex-txt h2{font-size:40px}
.md-cab h2{font-size:36px}
.ent-pad h2{font-size:52px}
.mt-l h2{font-size:38px}
.pl-l h2{font-size:43px}
.ce-pad .cf-head h2{font-size:43px}
.pj2-txt h2{font-size:43px}
.cx2-t h1{font-size:79px}
.cm-l h2{font-size:40px}
.pr2s .inv-calma h2{font-size:72px}
.cmp-cab h2{font-size:41px}

/* ---------- encaixe do conteúdo da MM nas lâminas do motor ---------- */
/* 02 referência: a logo da MM é mais alta e "Porto Seguro" é mais longo que "na região" */
.aut-logo{height:54px;margin-bottom:14px}
.aut-l h2{font-size:40px}
.aut-pil b{font-size:18px}
.aut-pil span:last-child{font-size:13px}
/* 10 investimento: as faixas em mil cabem numa linha */
.faixas .op{font-size:14px;white-space:nowrap;padding:0 4px}
/* 14 projeto: três renders verticais da MM lado a lado, à direita do texto */
.pj2-tri{display:grid;grid-template-columns:repeat(3,1fr);left:38%}
.pj2-tri img{object-position:50% 60%}
/* 16 execução: o Marco conferindo a planta, à direita */
.ex2-marco{left:44%}
.ex2-marco img{object-position:50% 30%}
/* 23 proposta: no centro do anel, o valor do m² */
.pp-comp .cp-centro .num{font-size:15px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.pp-comp .cp-centro .num small{display:block;font:500 8.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#6a7686;margin-top:3px}

/* ---------- transição entre capítulos: os chevrons da MM (no lugar da persiana do motor) ---------- */
#cortina{display:none}
#wipe{position:absolute;inset:0;z-index:58;pointer-events:none;overflow:hidden;visibility:hidden}
#wipe.on{visibility:visible}
.wpanel{position:absolute;top:0;left:0;width:170%;height:100%;transform:translateX(-160%);clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%,14% 50%)}
.wpanel.rev{clip-path:polygon(14% 0,100% 0,86% 50%,100% 100%,14% 100%,0 50%)}
.wpanel.areia{z-index:1;background:linear-gradient(90deg,#6f685b,#9c9280 40%,#dfd6c7)}
.wpanel.claro{z-index:2;background:linear-gradient(90deg,#cfc5b3,#dfd6c7 45%,#fff)}
.wpanel.ceu{z-index:3;background:linear-gradient(90deg,#23405f,#3d6590 55%,#5a82ad)}
.wpanel.ink{z-index:4;background:linear-gradient(90deg,#0b141e,#1c3452 60%,#2c4b6e)}
.wmark{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;opacity:0}
.wmark img{height:140px;width:auto;filter:drop-shadow(0 0 30px rgba(223,214,199,.45))}

/* "As seis etapas": 04 a 06 mostram o caminho inteiro até as chaves, mas não abrem tela nesta primeira
   apresentação (ela termina na aprovação do crédito e no próximo passo) */
.ce-m.ce-depois{cursor:default}