/* 6 · Responda esta carta — o fecho, fim de tarde mais fundo */
.wf-sec.fe[data-luz="fim"]{--m1:color-mix(in oklab,var(--entardecer-1) 75%,#9ea1c4);--m2:var(--entardecer-2);--m3:color-mix(in oklab,var(--mel) 35%,var(--entardecer-2))}
.fe{overflow-x:clip}
.fe .wf-malha i{filter:blur(50px)}
.fe-ceu{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg in oklab,transparent 0,transparent 55%,color-mix(in oklab,var(--mel) 16%,var(--papel)) 100%)}

.fe-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,110px);align-items:center}
.fe .wf-h2{margin-top:16px;font-size:clamp(40px,5vw,72px)}
.fe-txt{margin-top:22px;font-family:var(--serif);font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--tinta-2);max-width:26em}
.fe-assina{display:flex;align-items:flex-end;margin-top:26px}
.fe-nome{padding-bottom:10px;position:relative;z-index:1}
.fe-nome .wf-assina{font-size:clamp(54px,5vw,78px)}
.js .fe-nome[data-rev]{opacity:1;filter:none;transform:none}
.js .fe-nome .wf-assina{display:inline-block;clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.6s ease-out .5s}
.js .fe-nome.visto .wf-assina{clip-path:inset(-20% -10% -20% 0)}
.fe-ps{margin-top:22px;padding-top:14px;border-top:1px solid var(--filete);width:fit-content;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--tinta)}
.fe-ps span{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.16em;color:var(--mel);margin-right:8px}

/* a folha de resposta, em branco */
.fe-resp{position:relative;margin-left:clamp(-60px,-3vw,0px);padding:0 0 84px}
/* o envelope aberto, por trás da folha */
.fe-env{position:absolute;left:-14px;right:-34px;bottom:0;height:56%;z-index:0;transform:rotate(-1.6deg)}
.fe-corpo{position:absolute;inset:0;background:linear-gradient(170deg,#f3ebe0,#e9dfd2);box-shadow:var(--sombra)}
.fe-corpo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),rgba(90,70,60,.12) 50%,transparent calc(50% + .5px)),linear-gradient(to top left,transparent calc(50% - .5px),rgba(90,70,60,.12) 50%,transparent calc(50% + .5px))}
.fe-aba{position:absolute;left:0;right:0;bottom:100%;height:70%;clip-path:polygon(0 100%,100% 100%,50% 0);
  background:linear-gradient(180deg in oklab,color-mix(in oklab,var(--entardecer-1) 92%,#8f93bb),var(--entardecer-2))}
.fe-cabeca{text-align:right;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--mel);margin-bottom:22px}
.fe-folha{position:relative;z-index:1;margin:0 clamp(28px,3vw,44px);padding:40px 52px 46px 56px}
.fe-querida{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,24px);color:var(--tinta)}
.fe-pautas{height:calc(5 * 46px);margin-top:10px;background:repeating-linear-gradient(180deg,transparent 0 45px,rgba(90,70,60,.16) 45px 46px)}
.fe-zap{margin-top:28px}
.fe-zap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.fe-zap:hover svg{transform:translateX(3px)}

/* a tulipa grande cresce por trás da quina da folha */
.fe-tulipa{width:clamp(150px,13vw,200px);height:auto;margin-left:clamp(-64px,-4vw,-36px);stroke-width:1.3}
.js .fe .fe-tulipa[data-rev] path:nth-child(1){transition-delay:1.6s;transition-duration:1.6s}
.js .fe .fe-tulipa[data-rev] path:nth-child(2){transition-delay:2.3s}
.js .fe .fe-tulipa[data-rev] path:nth-child(3){transition:stroke-dashoffset 1.8s var(--curva) 2.6s,fill 1.6s ease 4.2s}
.fe .fe-tulipa path:nth-child(3){fill:color-mix(in oklab,var(--tulipa) 0%,transparent)}
.fe .fe-tulipa.visto path:nth-child(3),html:not(.js) .fe-tulipa path:nth-child(3){fill:color-mix(in oklab,var(--tulipa) 14%,transparent)}

@media (max-width:900px){
  .fe-grade{grid-template-columns:1fr;gap:20px}
  .fe-resp{margin:30px 0 0;padding-bottom:40px}
  .fe-folha{margin:0 14px;padding:26px 22px 26px 24px}
  .fe-cabeca{font-size:14px;margin-bottom:16px}
  .fe-env{height:46%;left:-6px;right:-10px}
  .fe-pautas{height:calc(3 * 42px);background:repeating-linear-gradient(180deg,transparent 0 41px,rgba(90,70,60,.16) 41px 42px)}
  .fe-zap{width:100%;justify-content:center;min-height:54px;padding:16px 18px;white-space:nowrap}
  .fe-tulipa{width:120px;margin-left:-34px}
  .fe{padding-bottom:calc(var(--respiro) + 20px)}
}

/* com o fecho na tela, o botão fixo da base desce: uma ação só */
.wf-zap-fixo.fe-oculto{transform:translateY(140%)!important}
/* movimento reduzido: assinatura e tulipa já prontas (a base zera duração, não o atraso das transições) */
@media (prefers-reduced-motion:reduce){
  .fe .fe-tulipa path,.fe .fe-nome .wf-assina{transition:none!important}
}