/* Sustentabilidade: uma imagem calma (musgo ao anoitecer) e a peca plantada nela. So esta pagina carrega este arquivo (depois de site.css).
   Mobile first. Sem parallax, sem zoom, sem rolagem presa. Geometria (monte, linha do musgo) vem de js/sustentabilidade.js. */

body:has(.sust) .nav{background:var(--bg)}   /* nav solida como na home */

.sust{--ink:#eef3f6;--mut:#97a5ae;--bd:rgba(238,243,247,.34);--line:rgba(255,255,255,.14);--on-cy:#010101;--focus:#55bdec;
  position:relative;background:#0a1417;color:var(--ink);color-scheme:dark}
.sust__stage{position:relative;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:420px;overflow:hidden;overflow:clip;isolation:isolate;background:#12262b;
  --px:max(var(--gut),env(safe-area-inset-left),env(safe-area-inset-right));--py:clamp(36px,6svh,80px)}
.pic{position:absolute;inset:0;display:block;pointer-events:none}
.pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;user-select:none;-webkit-user-drag:none}
.pic--bg{z-index:0}
.peca{position:absolute;inset:0;z-index:2;overflow:hidden}
.peca>*{opacity:0;transition:opacity .9s ease}
.peca.on>*{opacity:1}
.pic--fg{z-index:3}

/* sombra de contato: escurece so o musgo (mascara = o proprio recorte do musgo), em volta de onde a peca entra */
.shade{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse calc(var(--pw,120px)*.9) calc(var(--pw,120px)*.38) at var(--bx,50%) calc(var(--by,70%) + var(--pw,120px)*.12),rgba(0,0,0,.55),rgba(0,0,0,0) 100%),
    radial-gradient(ellipse calc(var(--pw,120px)*2.6) calc(var(--pw,120px)*.9) at var(--bx,50%) calc(var(--by,70%) + var(--pw,120px)*.2),rgba(0,0,0,.28),rgba(0,0,0,0) 100%);
  -webkit-mask-image:url(../img/sust/musgo-l.webp);mask-image:url(../img/sust/musgo-l.webp);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 100%;mask-position:50% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@media (max-aspect-ratio:1/1){.shade{-webkit-mask-image:url(../img/sust/musgo-p.webp);mask-image:url(../img/sust/musgo-p.webp)}}
/* neblina fria e baixa na frente da base da peca, quase invisivel */
.haze{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse calc(var(--pw,120px)*3.4) calc(var(--pw,120px)*.7) at var(--bx,50%) calc(var(--by,70%) + var(--pw,120px)*.05),rgba(130,180,195,.08),rgba(130,180,195,0) 100%)}

/* tipo: Futuro no alto a esquerda; Sustentavel acima da linha do musgo, a direita (ou empilhado no celular em pe) */
.sust__eb{position:absolute;z-index:1;left:var(--px);top:calc(var(--py) - 1.6em);margin:0;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8fd3ea;pointer-events:none;text-shadow:0 1px 8px rgba(2,8,10,.7)}
.sust__h{position:absolute;inset:0;z-index:1;margin:0;pointer-events:none;font-weight:600;line-height:.88;letter-spacing:-.05em;color:#eef6f4;
  font-size:clamp(2.4rem,min(14.6vw,15svh),14rem);text-wrap:nowrap;text-shadow:0 2px 26px rgba(2,8,10,.55)}
.sust__h .w1,.sust__h .w2{position:absolute;display:block}
.sust__h .w1{left:var(--px);top:var(--py)}
.sust__h .w2{right:var(--px);bottom:calc(100% - var(--by,70%) + .1em);font-size:calc(var(--k,1)*1em)}
@media (max-aspect-ratio:1/1){
  .sust__h .w2{right:auto;left:var(--px);bottom:auto;top:calc(var(--py) + .92em)}
}

.sust__cue,.sust__note{position:absolute;z-index:6;pointer-events:none;margin:0;color:#b4c1c9;text-shadow:0 1px 3px #010101}
.sust__cue{left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));text-align:center;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem}
.sust__cue::after{content:"";display:block;width:1px;height:18px;margin:6px auto 0;background:linear-gradient(#b4c1c9,transparent);transform-origin:top;animation:sx-cue 2.4s var(--ease-out) infinite}
@keyframes sx-cue{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.sust__note{left:max(var(--gut),env(safe-area-inset-left));top:8px;font-size:.7rem;color:#a2b3ba;display:none}
.sust__note{display:block;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));font-size:.7rem;color:#9fb0b7}

/* ---------- conteudo abaixo: segue o tema do site ---------- */
.sx{padding-block:56px 32px}
.sx>*{min-width:0}
.sx-q{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.3;max-width:34ch}
.sx-q cite{display:block;margin-top:12px;font-style:normal;font-size:.82rem;font-weight:500;letter-spacing:0;color:var(--mut)}
.sx-q--big{margin-top:4px;font-size:clamp(1.45rem,6.4vw,2.2rem);line-height:1.22;letter-spacing:-.03em;font-weight:600}
.sx-q2{display:grid;gap:12px;margin-top:32px}
.sx-q2 .sx-q{padding:22px;border-radius:var(--r-card);background:var(--surface);font-size:clamp(1.1rem,4.6vw,1.35rem);max-width:none}
.sx-q2 .sx-q>:not(cite){max-width:34ch}
.sx-cols{display:grid;gap:12px;margin-top:32px}
.sx-cols .qcell p{max-width:56ch}
.sx-rec{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.sx-rec__i{width:52px;height:52px;color:var(--cy-d);flex:none}
:root[data-theme="dark"] .sx-rec__i{color:var(--cy)}
.sx .slot{margin-top:12px}
.sx .sec__cta{margin-top:28px}

@media (min-width:600px){
  .sx-q2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-q2 .sx-q{padding:28px}
  .sx-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .sx{padding-block:88px 48px}
}


@media (max-height:480px) and (orientation:landscape){
  .sust__cue{display:none}
  .sust__stage{min-height:326px}
}
@media (prefers-reduced-motion:reduce){
  .sust__cue::after{animation:none}
  .peca>*{transition:none}
}