/* =========================================================
   Memórias de Nanã · página inicial (v0.3)
   O site é a casa dela. A parte de baixo, depois da porta, é o ateliê.
   1. Casa (3 banners)  2. Porta que abre na rolagem  3. Janela fixa
   4. Prateleira  5. Como nasceu  6. Bancada + cadastro
   ========================================================= */

/* body com overflow-x:hidden vira caixa de rolagem e quebra o sticky da porta: clip resolve sem criar rolagem */
body{overflow-x:clip}

/* ---------- 1. A casa: três banners ---------- */
.casa{position:relative;min-height:100svh;overflow:hidden;
  background:radial-gradient(ellipse 70% 80% at 75% 45%,#3a2449 0%,#261630 45%,var(--noite) 80%)}
.casa__slides{position:absolute;inset:0}
/* slide de verdade: o banner que sai desliza pra esquerda e o próximo entra pela direita */
.slide{position:absolute;inset:0;display:flex;align-items:center;padding:140px var(--gutter) 190px;transform:translateX(100%);visibility:hidden;transition:none}
.slide.ativo{transform:translateX(0);visibility:visible;transition:transform .9s cubic-bezier(.77,0,.18,1),visibility 0s}
.slide.saindo{transform:translateX(-100%);visibility:hidden;transition:transform .9s cubic-bezier(.77,0,.18,1),visibility 0s linear .9s}
.slide__foto{position:absolute;right:0;top:0;bottom:0;width:min(62vw,1000px);margin:0;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 60% 45%,#000 42%,transparent 80%);mask-image:radial-gradient(ellipse 75% 75% at 60% 45%,#000 42%,transparent 80%)}
/* troca de banner com movimento de cinema: a foto entra de leve pela lateral e vai se aproximando */
.slide__foto img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,60% 30%);transform:scale(1.08);transition:transform 3.4s cubic-bezier(.2,.6,.3,1)}
.slide.ativo .slide__foto img{transform:scale(1)}
.slide__texto{position:relative;z-index:2;max-width:620px}
.slide__titulo{font-size:clamp(50px,7vw,108px);font-weight:300;line-height:.98;margin-bottom:28px}
.slide__titulo em{display:block;color:var(--barro-claro)}
/* título mais comprido (frase inteira): letra menor, sem quebrar no meio */
.slide__titulo--longo{font-size:clamp(40px,4.6vw,72px);line-height:1.04}
.slide__titulo--longo em{white-space:nowrap}
.slide:has(.slide__titulo--longo) .slide__texto{max-width:780px}
.slide__lead{font-weight:300;font-size:clamp(18px,1.5vw,21px);line-height:1.6;max-width:480px}
/* o texto de cada banner entra devagar, linha por linha */
.slide__texto > *{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.casa.pronta .slide.ativo .slide__texto > *{opacity:1;transform:none}
.casa.pronta .slide.ativo .slide__texto > :nth-child(2){transition-delay:.12s}
.casa.pronta .slide.ativo .slide__texto > :nth-child(3){transition-delay:.26s}
.no-js .slide__texto > *{opacity:1;transform:none}

.casa__base{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:0 var(--gutter) 64px}
.casa__botoes{display:flex;flex-wrap:wrap;gap:14px}
.casa__controle{display:flex;align-items:flex-end;gap:18px}
.casa__pontos{display:flex;gap:14px}
/* botão de pausar / tocar os banners */
.casa__pausa{width:36px;height:36px;margin-bottom:2px;display:grid;place-items:center;border:1px solid var(--linha);border-radius:50%;transition:border-color .3s}
.casa__pausa:hover{border-color:var(--barro)}
.casa__pausa svg{width:14px;height:14px;fill:var(--creme)}
.casa__pausa .ic-toca,.casa__pausa[aria-pressed="true"] .ic-pausa{display:none}
.casa__pausa[aria-pressed="true"] .ic-toca{display:block}
.casa__pontos button{width:72px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:6px 0}
.casa__pontos span{font-size:11px;letter-spacing:.2em;color:var(--mudo);transition:color .4s}
.casa__pontos [aria-selected="true"] span{color:var(--creme)}
.casa__pontos button:hover span{color:var(--barro-claro)}
.casa__pontos i{position:relative;display:block;width:100%;height:1px;background:rgba(244,237,227,.25);overflow:hidden}
/* a barrinha do banner atual enche enquanto ele está na tela (quem enche é o js/atelie.js) */
.casa__pontos i::after{content:"";position:absolute;inset:0;background:var(--barro-claro);transform:scaleX(var(--prog,0));transform-origin:left}



/* ---------- 1b. A entrada: o sapato fica na porta ---------- */
.entrada{position:relative;background:#120a17}
.entrada__palco{position:relative;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.entrada__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.entrada__veu{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 55% at 50% 48%,rgba(14,7,18,.78) 0%,rgba(14,7,18,.5) 50%,rgba(14,7,18,.12) 100%),
             linear-gradient(180deg,rgba(18,10,23,.82) 0%,rgba(18,10,23,0) 22%,rgba(18,10,23,0) 72%,rgba(18,10,23,.95) 100%)}
.entrada__texto{position:relative;z-index:2;text-align:center;padding:0 var(--gutter)}
.entrada__texto .sobretitulo{color:var(--vela);font-size:13px;text-shadow:0 2px 12px rgba(0,0,0,.85)}
.entrada__frase{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,76px);line-height:1.08;color:var(--creme);max-width:17ch;margin:0 auto;text-shadow:0 4px 32px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.7)}
.entrada__frase span,.entrada__frase em{display:inline}
.entrada__frase em{display:block;font-style:italic;color:var(--barro-claro);margin-top:.12em}
.entrada-viva .entrada{height:230vh}
.entrada-viva .entrada__palco{position:sticky;top:0}
.porta__aviso::before{display:none}

/* ---------- 2. A porta ---------- */
.porta{position:relative;background:#120a17}
.porta__palco{position:relative;height:100vh;height:100svh;overflow:hidden;perspective:1800px;background:#120a17}
.porta__zoom{position:absolute;inset:0}
.porta__fundo{position:absolute;inset:-40px}
.porta__fundo img{width:100%;height:100%;object-fit:cover;filter:blur(24px) brightness(.45) saturate(1.1)}
/* o quadro do ateliê cobre a tela inteira sem perder a posição dos pontos */
.porta .cena__quadro{position:absolute;left:50%;top:50%;width:max(100vw,177.7vh);aspect-ratio:1672/941;transform:translate(-50%,-50%)}
.porta .cena__quadro > img{width:100%;height:100%;object-fit:cover;box-shadow:none;border-radius:0}
.porta__palco::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(0deg,rgba(18,10,23,.85) 0%,rgba(18,10,23,0) 26%),radial-gradient(ellipse 90% 80% at 50% 50%,transparent 55%,rgba(18,10,23,.55) 100%)}
/* paleta da luz (legenda e pontos) */
.porta__palco{--k0:255 246 224;--k1:255 222 150;--k2:240 170 70;--k3:224 120 40}

/* pontos de luz: miolo claro + anel escuro + anel claro (leem-se sobre chama, livro ou sombra) */
.porta .ponto{width:48px;height:48px;margin:-24px 0 0 -24px;border:0;background:none;cursor:pointer;padding:0;display:block}
.porta .ponto::after{content:"";position:absolute;inset:-8px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(10,4,14,.5) 0%,rgba(10,4,14,.28) 46%,rgba(10,4,14,0) 72%)}
.porta .ponto span{position:absolute;inset:16px;width:auto;height:auto;border-radius:50%;animation:none;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#fff0cc 52%,#ffc766 100%);
  box-shadow:0 0 0 2px rgba(14,6,20,.92),0 0 0 3.5px rgba(255,238,200,.95),0 0 16px 5px rgb(var(--k2)/.8),0 0 36px 10px rgb(var(--k3)/.45);
  transition:transform .25s}
.porta .ponto::before{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid rgb(var(--k1)/.95);pointer-events:none;
  filter:drop-shadow(0 0 2px rgba(10,4,14,.95));animation:anelLuz 2.6s ease-out infinite}
.porta .ponto:hover span,.porta .ponto.ativo span{transform:scale(1.3);background:radial-gradient(circle at 35% 30%,#fff 0%,#fff0cc 52%,#ffc766 100%)}
@keyframes anelLuz{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.55);opacity:0}}

/* ================= A LEGENDA QUE ACENDE ================= */
.porta__legenda{position:absolute;left:0;right:0;bottom:clamp(26px,5.5vh,60px);z-index:2;text-align:center;padding:0 var(--gutter);
  display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.9vh,10px);pointer-events:none;margin:0}
.porta__legenda::before{content:"";position:absolute;left:50%;bottom:-50px;width:min(1100px,96vw);height:300px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 68%,rgb(var(--k2)/.42) 0%,rgb(var(--k2)/.16) 38%,rgb(var(--k3)/0) 72%);
  opacity:1;z-index:-1}
.porta__legenda::after{content:"";position:absolute;left:50%;bottom:-36px;width:min(960px,94vw);height:270px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 56%,rgba(10,4,14,.66) 0%,rgba(10,4,14,.42) 46%,rgba(10,4,14,0) 74%);z-index:-2}
.porta__legenda .lamp{display:block;--d:0s;margin:0;
  --c-off:rgba(244,237,227,.82);--sombra:0 2px 14px rgba(10,4,14,.95),0 0 4px rgba(10,4,14,.85);--c-dim:rgb(var(--k1)/.8);--glow-weak:0 0 8px rgb(var(--k2)/.6),var(--sombra);
  color:var(--c-on);text-shadow:var(--glow);animation:respiraLuz 6s ease-in-out infinite alternate;letter-spacing:0;text-transform:none}
.porta__legenda .l1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(32px,3.9vw,54px);line-height:1.1;
  --c-on:rgb(var(--k0));
  --glow:0 0 3px rgb(var(--k0)/.95),0 0 10px rgb(var(--k1)/.95),0 0 26px rgb(var(--k2)/.8),0 0 64px rgb(var(--k3)/.6),0 0 120px rgb(var(--k3)/.34);
  --glow-strong:0 0 4px rgb(var(--k0)/1),0 0 14px rgb(var(--k1)/1),0 0 38px rgb(var(--k2)/.95),0 0 88px rgb(var(--k3)/.78),0 0 160px rgb(var(--k3)/.48)}
.porta__legenda .l2{font-family:var(--sans);font-style:normal;font-weight:700;font-size:clamp(15px,1.4vw,20px);letter-spacing:.1em;line-height:1.4;margin-top:2px;
  --c-on:rgb(var(--k0));--d:.5s;
  --glow:0 0 3px rgb(var(--k0)/.8),0 0 12px rgb(var(--k1)/.8),0 0 28px rgb(var(--k2)/.55);
  --glow-strong:0 0 4px rgb(var(--k0)/.95),0 0 16px rgb(var(--k1)/.95),0 0 38px rgb(var(--k2)/.75)}
.porta__legenda .l3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,3vw,42px);line-height:1.2;
  --c-on:rgb(var(--k1));--d:1s;
  --glow:0 0 3px rgb(var(--k0)/.9),0 0 10px rgb(var(--k1)/.95),0 0 28px rgb(var(--k2)/.85),0 0 66px rgb(var(--k3)/.62),0 0 124px rgb(var(--k3)/.36);
  --glow-strong:0 0 4px rgb(var(--k0)/1),0 0 14px rgb(var(--k1)/1),0 0 38px rgb(var(--k2)/1),0 0 90px rgb(var(--k3)/.8),0 0 166px rgb(var(--k3)/.5)}
.porta__legenda .pilot{display:inline-block;font-style:normal;margin-right:.55em;transform:translateY(-.04em);color:rgb(var(--k1));text-shadow:0 0 6px rgb(var(--k0)/.95),0 0 16px rgb(var(--k2)/.9),0 0 34px rgb(var(--k3)/.6);animation:pilotoLuz 2.4s ease-in-out infinite}
@keyframes pilotoLuz{0%,100%{opacity:.55;transform:translateY(-.04em) scale(.92)}50%{opacity:1;transform:translateY(-.04em) scale(1.12)}}
@keyframes respiraLuz{0%{color:var(--c-on);text-shadow:var(--glow)}100%{color:var(--c-on);text-shadow:var(--glow-strong)}}
@media (prefers-reduced-motion:reduce){.porta__legenda .lamp,.porta__legenda .pilot,.porta .ponto::before{animation:none}}
.porta .memoria{z-index:4;left:auto;top:auto;right:clamp(20px,3vw,56px);bottom:clamp(24px,6vh,64px)}
/* a linha dourada que liga o ponto de luz ao cartão de memória */
.memoria__linha{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.memoria__linha.on{display:block}
.memoria__linha path{fill:none;stroke-linecap:round;stroke-dasharray:1}
.memoria__linha .brilho{stroke:rgb(226 192 138/.22);stroke-width:7}
.memoria__linha .fio{stroke:var(--vela);stroke-width:1.5}
.memoria__linha circle{fill:var(--vela)}
/* com o cartão aberto, a legenda sai de cena pra não brigar com ele */
.porta__palco .porta__legenda{transition:opacity .4s ease}
.porta__palco.memoria-aberta .porta__legenda{opacity:0!important}

/* as folhas só existem quando a animação está ligada (.porta-viva) */
.porta__folhas,.porta__aviso{display:none}
.porta-viva .porta{height:320vh}
.porta-viva .porta__palco{position:sticky;top:0}
.porta-viva .porta__folhas{display:flex;position:absolute;inset:0;z-index:5;pointer-events:none;transform-style:preserve-3d}
.porta-viva .porta__aviso{display:flex}

.folha{position:relative;flex:1;height:100%;backface-visibility:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 7%,rgba(0,0,0,0) 93%,rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 2px,rgba(0,0,0,0) 2px 11px,rgba(255,220,180,.03) 11px 12px,rgba(0,0,0,0) 12px 27px),
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 calc(25% - 2px),rgba(0,0,0,.35) calc(25% - 2px) 25%),
    linear-gradient(180deg,#4a2c1d 0%,#3b2216 45%,#2c190f 100%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
.folha--esq{transform-origin:left center}
.folha--dir{transform-origin:right center}
/* almofadas entalhadas */
.folha::before,.folha::after{content:"";position:absolute;left:14%;right:14%;border:1px solid rgba(0,0,0,.45);
  box-shadow:inset 0 0 0 12px rgba(0,0,0,.14),inset 0 0 0 13px rgba(255,210,170,.05),1px 1px 0 rgba(255,210,170,.06)}
.folha::before{top:46%;bottom:30%}
.folha::after{top:74%;bottom:6%}
/* a janelinha redonda, como as do ateliê, com luz de vela vazando */
.folha__janela{position:absolute;top:12%;left:50%;width:min(22vh,26vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  border:10px solid #2a170d;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 30px rgba(0,0,0,.4),0 0 60px rgba(226,160,90,.18);
  background:
    linear-gradient(90deg,transparent calc(50% - 3px),#2a170d calc(50% - 3px) calc(50% + 3px),transparent calc(50% + 3px)),
    linear-gradient(0deg,transparent calc(50% - 3px),#2a170d calc(50% - 3px) calc(50% + 3px),transparent calc(50% + 3px)),
    radial-gradient(circle at 50% 55%,#f3c98a 0%,#c98a4f 35%,#6b3f24 75%,#3a2216 100%)}
.folha__puxador{position:absolute;top:52%;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e6c08a,#8a5a2e 70%);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.folha--esq .folha__puxador{right:22px}
.folha--dir .folha__puxador{left:22px}
.porta__fresta{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(243,201,138,0),rgba(243,201,138,.9) 30%,rgba(243,201,138,.9) 70%,rgba(243,201,138,0));box-shadow:0 0 30px 6px rgba(226,160,90,.45)}
.porta__aviso{position:absolute;inset:0;z-index:6;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gutter);pointer-events:none}
.porta__aviso::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,110vw);height:420px;transform:translate(-50%,-55%);background:radial-gradient(ellipse at center,rgba(24,12,6,.72) 0%,rgba(24,12,6,.35) 45%,rgba(24,12,6,0) 70%);z-index:-1}
.porta__aviso .sobretitulo{font-size:13px;color:var(--vela);text-shadow:0 2px 12px rgba(0,0,0,.8)}
.porta__frase{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,68px);line-height:1.08;color:var(--creme);max-width:17ch;text-shadow:0 4px 30px rgba(0,0,0,.85)}
.porta__frase em{display:block;font-style:italic;color:var(--barro-claro)}
.porta__rola{position:absolute;bottom:34px;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,237,227,.7)}
.porta__rola i{width:1px;height:46px;background:linear-gradient(var(--vela),transparent);animation:escorre 2.2s var(--ease) infinite}

/* ---------- 3. A janela: foto fixa na lateral ---------- */
.janela{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--noite)}
/* clip-path + imagem fixa = a foto fica parada e a página passa por ela, como uma janela */
.janela__foto{position:relative;clip-path:inset(0);min-height:100svh}
.janela__foto img{position:fixed;left:0;top:0;width:50vw;height:100vh;object-fit:cover;object-position:50% 38%}
.janela__foto::after{content:"";position:fixed;left:0;top:0;width:50vw;height:100vh;background:linear-gradient(90deg,rgba(26,16,34,0) 84%,rgba(26,16,34,.85) 100%),linear-gradient(0deg,rgba(26,16,34,.35),rgba(26,16,34,0) 30%)}
.janela__texto{padding:0 var(--gutter) 0 clamp(40px,5vw,90px)}
.janela__bloco{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(80px,10vw,130px) 0;max-width:560px}
.janela__bloco + .janela__bloco{border-top:1px solid var(--linha)}
.janela__bloco h2{margin-bottom:28px}
.janela__bloco > p:not(.sobretitulo){font-weight:300;font-size:18px;line-height:1.75;margin-bottom:18px}
.janela__bloco > .janela__lead{font-family:var(--serif);font-style:italic;font-size:clamp(21px,1.8vw,25px);line-height:1.45;color:var(--creme)}
.pilares__lista--coluna{grid-template-columns:1fr;padding:0;border-top:0;margin:10px 0 0}
.pilares__lista--coluna li,.pilares__lista--coluna li + li{padding:26px 0;border-left:0;border-top:1px solid var(--linha);margin:0;display:grid;grid-template-columns:44px 1fr;column-gap:10px}
.pilares__lista--coluna .num{grid-row:span 2;margin:4px 0 0}
.pilares__lista--coluna h3{margin-bottom:8px}

/* ---------- 4. A prateleira ---------- */
.livro{padding-top:var(--ritmo)}
.prateleira__cabeca{margin-bottom:0}
.prateleira__cabeca h2{max-width:20ch}
.livro__grade{padding-top:calc(var(--ritmo) * .7)}
.livro .fala{margin-bottom:26px}
.prateleira{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--ritmo)}
.prateleira__rotulo{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--mudo);padding-top:34px;margin-bottom:26px;border-top:1px solid var(--linha)}
.prateleira__grade{padding:0;max-width:none}

/* ---------- 5. Como nasceu: o fio ---------- */
.nasceu{padding:var(--ritmo) 0;background:linear-gradient(180deg,var(--roxo-900),var(--noite))}
.nasceu .cabeca h2{max-width:20ch}
.nasceu .cabeca h2 em,.prateleira__cabeca h2 em{display:block}
.fios{position:relative;list-style:none;margin:0 auto;padding:10px var(--gutter) 0;max-width:var(--maxw)}
/* o fio que costura os capítulos */
.fios::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(196,134,90,0),rgba(196,134,90,.6) 6%,rgba(196,134,90,.6) 94%,rgba(196,134,90,0))}
.fio{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,7vw,110px);align-items:center;padding:clamp(34px,4vw,56px) 0}
.fio::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--noite);border:1px solid var(--barro-claro);box-shadow:0 0 0 5px var(--roxo-900)}
.fio:nth-child(even) .fio__foto{order:2}
.fio__foto{aspect-ratio:16/10;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.fio__foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.fio__onde{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mudo);margin-bottom:12px}
.fio__canto{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1.1;color:var(--barro-claro);margin-bottom:16px}
.fio__fala{font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.6vw,22px);line-height:1.45;color:var(--creme);max-width:34ch}
.nasceu__rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 28px;margin-top:clamp(40px,5vw,64px);padding:0 var(--gutter);text-align:center}
.nasceu__rodape p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:22px;color:var(--creme)}

/* ---------- 6. Bancada + cadastro ---------- */
.cantinho__caixa > .cantinho__bancada{font-size:13px;letter-spacing:.08em;color:var(--mudo);margin:-18px 0 36px}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .slide{align-items:flex-end;padding:0 var(--gutter) 250px}
  .livro__grade{grid-template-columns:1fr}
  .livro__capa{max-width:300px}
  .porta__fundo img{filter:blur(24px) brightness(.6) saturate(1.1)}
  .slide__foto{width:100%;bottom:auto;height:66svh;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 98%);mask-image:linear-gradient(180deg,#000 50%,transparent 98%)}
  .slide__titulo{font-size:clamp(44px,12vw,72px);margin-bottom:18px}
  .slide__titulo--longo{font-size:clamp(34px,9vw,56px)}
  .slide__titulo--longo em{white-space:normal}
  .slide__lead{font-size:17px}
  .casa__base{flex-direction:column;align-items:stretch;gap:22px;padding-bottom:34px}
  .casa__controle{order:-1}
  .casa__botoes .btn{flex:1 1 auto}

  .porta-viva .porta{height:260vh}
  .porta .cena__quadro{width:100vw}
  .entrada__img{object-position:36% 70%}
  .porta__legenda .l2{letter-spacing:.06em}
  .porta .ponto{width:32px;height:32px;margin:-16px 0 0 -16px}
  .porta .ponto span{inset:10px}
  .porta .memoria{position:absolute;left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto;margin:0}

  .janela{grid-template-columns:1fr}
  .janela__foto{clip-path:none;min-height:0;height:62svh}
  .janela__foto img,.janela__foto::after{position:absolute;width:100%;height:100%}
  .janela__foto::after{background:linear-gradient(0deg,var(--noite) 0%,rgba(26,16,34,0) 45%)}
  .janela__texto{padding:0 var(--gutter)}
  .janela__bloco{min-height:0;padding:56px 0}
  .janela__bloco:first-child{padding-top:10px}

  .fios::before{left:var(--gutter)}
  .fio{grid-template-columns:1fr;gap:22px;padding:30px 0 30px 28px}
  .fio::before{left:var(--gutter);top:44px;margin-left:-5px}
  .fio:nth-child(even) .fio__foto{order:0}
  .fios{padding-left:var(--gutter)}
  .fio{margin-left:0}
}
@media (max-width:600px){
  .prateleira__grade{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px}
  .prateleira__grade .peca{flex:0 0 58%;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  .slide__foto img{transform:none!important}
  .slide__texto > *{opacity:1;transform:none}
}

/* ---------- Banners: o rosto de Nanã no canto direito, longe do texto ---------- */
.slide__foto{right:calc(var(--sai,0px) * -1)}
@media (min-width:901px){
  .slide:nth-child(1) .slide__foto,
  .slide:nth-child(2) .slide__foto{--sai:clamp(0px,14vw,230px)}
}