/* Partes claras com movimento: imagens do vídeo em volta do propósito, títulos que sobem e um capítulo fixo para os produtos. */

/* Propósito: três recortes do vídeo da entrada, em ritmos diferentes de rolagem. */
.declaracao{position:relative;overflow:hidden;min-height:150vh;padding-bottom:46vh}
.declaracao .label,.declaracao .fill{position:relative;z-index:1;max-width:min(66vw,1180px)}
.dec-tile{position:absolute;margin:0;overflow:hidden;border-radius:var(--card-r);background:#e8ebe6;will-change:transform}
.dec-tile video{display:block;width:100%;height:100%;object-fit:cover;will-change:transform}
.dec-escrita{top:12vh;right:var(--gutter);width:21vw;aspect-ratio:4/5}
.dec-predio{bottom:9vh;left:24vw;width:24vw;aspect-ratio:4/3}
.dec-faixa{bottom:20vh;right:14vw;width:15vw;aspect-ratio:1}


/* Títulos com máscara: palavras ou linhas sobem ao entrar na tela. */
.rise .pw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.rise .pw>span{display:inline-block}
.rise-lines .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.rise-lines .line>span{display:inline-block}

/* Produtos: um palco fixo; o texto troca e a demonstração seguinte sobe por baixo. */
.prods-index{display:none}
.prods-on .prods{height:430vh}
.prods-on .prods-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--tint,transparent)}
.prods-on .prods .prod{position:absolute;inset:0}
.prods-on .prods .prod-stage{height:100%;min-height:0}
.prods-on .prods-index{position:absolute;z-index:2;left:var(--gutter);bottom:7vh;display:flex;gap:36px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#0d100f4d}
.prods-index span{transition:color .35s}
.prods-index span.is-on{color:var(--near)}
.prods-index i{position:absolute;left:0;right:0;bottom:-16px;height:1px;background:#0d100f1f}
.prods-index b{position:absolute;inset:0;background:var(--deep);transform-origin:left;transform:scaleX(var(--p,0))}
.prods-on .prod-copy>*{will-change:transform,opacity}
.prods-on .prod-media{will-change:transform}

@media(max-width:900px){
 .declaracao{min-height:0;padding-bottom:80vw}
 .declaracao .label,.declaracao .fill{max-width:none}
 .dec-escrita{top:auto;bottom:22vw;right:var(--gutter);width:38vw}
 .dec-predio{bottom:10vw;left:var(--gutter);width:44vw}
 .dec-faixa{bottom:40vw;right:46vw;left:auto;width:24vw}
}
.static-after .dec-tile,.static-after .dec-tile video{transform:none!important}

/* Fundos das demonstrações e da imagem imersiva: coleção material da marca, versão retrato no celular. */
.prod-media>picture,.imersiva-media picture{display:contents}
.prod-media>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imersiva-media img{object-position:70% 50%}

/* No que acreditamos: duas frases em tela cheia, sem texto de apoio. */
.publicos .pub-head{max-width:17ch;font-size:clamp(44px,6.4vw,124px)}
@media(max-width:900px){.publicos .pub-head{font-size:clamp(36px,10vw,60px)}}

/* O que dizem: a página escurece para o verde ao entrar nos depoimentos. */
.vozes{--vbg:#F8F7F4;--vfg:#0D100F;--vlab:#27634E;--vline:#0d100f24;background:var(--vbg);color:var(--vfg);border-top:0}
.vozes .voz{border-left-color:var(--vline)}
.vozes .voz figcaption,.vozes .vozes-count{color:var(--vlab)}
.vozes .voz-n,.vozes .vozes-count span{color:var(--vfg)}

/* Fechamento: a forma clara da marca abre de um cartão até a tela cheia, dentro do verde. */
.retorno{position:relative;overflow:hidden;isolation:isolate;background:var(--verde);align-items:flex-start;justify-content:center;text-align:left;padding:14vh var(--gutter)}
.retorno-media{position:absolute;inset:0;z-index:-1;margin:0;overflow:hidden;clip-path:var(--rc,inset(0 round 0))}
.retorno-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(var(--rs,1))}
.retorno h2{max-width:13ch}
.retorno>p:not(.eyebrow){margin:28px 0 34px}
.retorno .eyebrow{color:var(--deep)}
.static-after .retorno-media{clip-path:none}
@media(max-width:900px){.retorno{justify-content:flex-end;padding-bottom:9vh}.retorno h2{max-width:none;font-size:clamp(36px,10vw,46px)}.retorno>p:not(.eyebrow){font-size:17px;margin:20px 0 26px}}
.retorno>:not(.retorno-media){opacity:var(--ro,1)}
@media(max-width:900px) and (max-height:720px){.retorno-media img{height:calc(100% + 24vh);margin-top:-24vh}.retorno .eyebrow{margin-bottom:16px}}

/* Segunda frase sem imagem: campo claro liso, para a pedra marcar só as aberturas. */
.pub-campo{position:absolute;inset:-25% 0;background:var(--off)}
.pub-claro:after{display:none}
.pub-claro .pub-ch{color:var(--near)}
body.pub-light .pub-index{color:#0d100f59}
body.pub-light .pub-index span.is-on{color:var(--near)}
body.pub-light .pub-index i{background:#0d100f24}
body.pub-light .pub-index b{background:var(--near)}
body.pub-light.on-dark .header{color:var(--near)}