/* seção "Depois da festa" (depoimentos) · prefixo df- · nasce do hero E, recomposta no sistema do hero B (GFS Didot, Josefin Sans, a mão) */
.df-sec{
  --df-rw:clamp(250px,min(32vw,62svh),500px);   /* largura do exemplar */
  --df-t:13px;                                   /* espessura do miolo */
  --df-dx:0px;                                   /* deslocamento para centrar a página dupla (medido no script) */
  --df-vira:cubic-bezier(.62,.04,.22,1);
  --df-sombra-papel:color-mix(in oklab,var(--castanho) 34%,transparent);
  padding-top:clamp(4rem,7vw,6.5rem);
}

/* ---------- fundo: noite, malha de vinho e madeira, luzes de lustre ---------- */
.df-fundo{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--noite)}
.df-malha{position:absolute;inset:0}
.df-m{position:absolute;display:block;border-radius:50%;will-change:transform}
.df-m--vinho{width:78vmax;height:78vmax;right:-20vmax;top:-10vmax;
  background:radial-gradient(closest-side in oklch,color-mix(in oklch,var(--vinho) 92%,transparent),color-mix(in oklch,var(--vinho) 40%,transparent) 55%,color-mix(in oklch,var(--vinho) 0%,transparent));
  animation:df-respira-a 31s ease-in-out infinite alternate}
.df-m--madeira{width:70vmax;height:70vmax;left:-26vmax;top:-24vmax;
  background:radial-gradient(closest-side in oklab,color-mix(in oklab,var(--castanho) 96%,transparent),color-mix(in oklab,var(--castanho) 45%,transparent) 55%,color-mix(in oklab,var(--castanho) 0%,transparent));
  animation:df-respira-b 37s ease-in-out infinite alternate}
.df-m--sangue{width:54vmax;height:54vmax;left:-14vmax;bottom:-30vmax;
  background:radial-gradient(closest-side in oklch,color-mix(in oklch,var(--vinho-fundo) 90%,transparent),color-mix(in oklch,var(--vinho-fundo) 0%,transparent));
  animation:df-respira-c 27s ease-in-out infinite alternate}
.df-m--vela{width:38vmax;height:38vmax;right:2vmax;top:4vmax;opacity:.55;
  background:radial-gradient(closest-side in oklab,color-mix(in oklab,var(--castanho) 70%,var(--vela)),color-mix(in oklab,var(--castanho) 0%,transparent));
  animation:df-respira-c 23s ease-in-out infinite alternate-reverse}
@keyframes df-respira-a{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,6%,0) scale(1.1)}}
@keyframes df-respira-b{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(8%,6%,0) scale(.94)}}
@keyframes df-respira-c{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6%,-8%,0) scale(1.12)}}
.df-luzes{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);transform:translate3d(calc(var(--df-px,0)*-16px),calc(var(--df-py,0)*-10px),0);transition:opacity 1.2s ease}
.df-vinheta{position:absolute;inset:0;background:linear-gradient(180deg in oklab,color-mix(in oklab,var(--noite) 70%,transparent),transparent 14%,transparent 82%,color-mix(in oklab,var(--noite) 90%,transparent))}

/* marcas de corte, como na capa */
.df-corte{position:absolute;width:14px;height:14px;pointer-events:none;opacity:.5}
.df-corte::before,.df-corte::after{content:"";position:absolute;background:var(--marfim)}
.df-corte::before{width:100%;height:1px;top:50%}
.df-corte::after{height:100%;width:1px;left:50%}
.df-corte--se{top:10px;left:10px}.df-corte--sd{top:10px;right:10px}

/* ---------- grade ---------- */
.df-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"topo cena" "pe cena";grid-template-rows:auto 1fr;column-gap:clamp(1.5rem,4vw,5rem);align-items:start}
.df-texto--topo{grid-area:topo;max-width:40rem;padding-top:clamp(0rem,2vw,2rem)}
.df-texto--pe{grid-area:pe;max-width:34rem}
.df-cena{grid-area:cena;align-self:center;padding:1rem 0 1rem}
.df-texto{transition:opacity .6s ease,transform .9s var(--df-vira),visibility 0s}

.df-pt{color:var(--vela);padding:0 .5em}
.df-olho{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:0 0 1.6rem;color:var(--vela)}
.df-olho-data{color:var(--marfim-suave)}
.df-olho-data::before{content:"";display:inline-block;width:2.2rem;height:1px;background:currentColor;vertical-align:middle;margin-right:1rem;opacity:.6}
.df-titulo{margin:0 0 clamp(.9rem,1.4vw,1.4rem);font-size:clamp(3rem,6.2vw,6rem);line-height:.98;color:var(--marfim)}
.df-titulo-l{display:block}
.df-titulo-mao{display:block;width:fit-content;position:relative;font-size:2.05em;line-height:.8;margin:-.2em 0 0 .62em;padding:0 .14em .16em .1em;
  background:linear-gradient(100deg in oklab,var(--marfim) 0%,var(--vela) 34%,var(--marfim) 58%,var(--vela) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--marfim);
  animation:df-chama 17s ease-in-out infinite alternate}
@keyframes df-chama{from{background-position:0 0}to{background-position:100% 0}}
.df-origem{margin:0 0 clamp(1.6rem,2.6vw,2.4rem);padding-left:1.7rem;border-left:1px solid var(--vela);max-width:33rem}
.df-origem blockquote{font-size:var(--t-sub);line-height:1.24;color:var(--marfim);text-wrap:pretty;text-indent:-.42em}
.df-origem figcaption{margin-top:1rem;color:var(--marfim-suave)}
.df-origem figcaption b{font-weight:500;color:var(--marfim)}

.df-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.8rem;margin-bottom:clamp(1.6rem,2.6vw,2.4rem)}
.df-abrir svg{transition:transform .5s var(--ease)}
.df-abrir:hover svg{transform:translateX(4px)}
.df-zap{font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--marfim-fio);min-height:3.4rem;transition:border-color .3s}
.df-zap:hover{border-color:var(--marfim)}
.df-prova{border-top:1px solid var(--marfim-fio);max-width:33rem;font-size:var(--t-mini);letter-spacing:.06em;line-height:1.45;color:var(--marfim-suave)}
.df-prova li{border-bottom:1px solid color-mix(in oklab,var(--marfim) 16%,transparent)}
.df-prova a{display:grid;grid-template-columns:4.6rem 1fr;align-items:center;gap:0 1rem;color:inherit;text-decoration:none;padding:.7rem 0;min-height:3.4rem}
.df-prova a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.32em;text-decoration-color:var(--marfim-fio);transition:text-decoration-color .3s}
.df-prova a:hover span{text-decoration-color:currentColor}
.df-prova b{font-family:var(--serifa);font-weight:400;font-size:2.6rem;line-height:1;letter-spacing:-.01em;color:var(--vela)}
.df-prova-ig{display:block;width:2.1rem;height:2.1rem;color:var(--vela)}
.df-prova-rot{margin:0 0 .2rem;font-size:var(--t-mini);letter-spacing:.24em;text-transform:uppercase;color:var(--vela)}

/* ---------- o exemplar ---------- */
.df-palco{display:grid;place-items:center;position:relative;perspective:1700px;perspective-origin:50% 45%;transition:transform 1.1s var(--df-vira)}
.df-revista{position:relative;width:var(--df-rw);aspect-ratio:791/1028;transform-style:preserve-3d;
  transform:rotateX(calc(7deg + var(--df-ix,0deg))) rotateY(calc(-21deg + var(--df-iy,0deg))) rotateZ(2deg);
  transition:transform 1.1s var(--df-vira)}
.df-palco::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--df-rw)*2.3);height:calc(var(--df-rw)*2.1);transform:translate(-50%,-52%);pointer-events:none;
  background:
   radial-gradient(closest-side at 58% 32% in oklch,color-mix(in oklch,var(--vela) 22%,transparent),transparent),
   radial-gradient(closest-side in oklch,color-mix(in oklch,var(--vermelho-aceso) 40%,transparent),color-mix(in oklch,var(--sangue) 22%,transparent) 55%,transparent);
  opacity:.8;animation:df-pulsa 11s ease-in-out infinite alternate;transition:opacity 1s ease}
@keyframes df-pulsa{from{opacity:.62}to{opacity:.9}}
.df-revista::after{content:"";position:absolute;inset:4% -7% -11% 5%;transform:translateZ(-34px);background:radial-gradient(closest-side at 50% 58%,color-mix(in oklab,var(--noite) 96%,transparent),color-mix(in oklab,var(--noite) 60%,transparent) 55%,transparent);z-index:-1}
.df-contracapa{position:absolute;inset:0;background:var(--vinho-fundo)}
.df-miolo{position:absolute;left:100%;top:.4%;width:var(--df-t);height:99.2%;transform-origin:left center;transform:rotateY(-90deg);
  background:repeating-linear-gradient(90deg,var(--papel) 0 1px,color-mix(in oklab,var(--papel-2) 78%,var(--castanho)) 1px 2px)}
.df-miolo--base{left:.4%;top:100%;width:99.2%;height:var(--df-t);transform-origin:center top;transform:rotateX(90deg);
  background:repeating-linear-gradient(0deg,var(--papel-2) 0 1px,color-mix(in oklab,var(--papel-2) 66%,var(--castanho)) 1px 2px)}

/* página da direita: papel da capa do site */
.df-pagina{position:absolute;inset:.5% .6% .5% 0;transform:translateZ(calc(var(--df-t) - 1px));container-type:inline-size;
  background:linear-gradient(90deg,var(--df-sombra-papel) 0,color-mix(in oklab,var(--castanho) 9%,transparent) 5%,transparent 14%),linear-gradient(180deg in oklab,var(--papel-claro),var(--papel) 60%,var(--papel-2));
  color:var(--tinta);padding:calc(var(--df-rw)*.07) calc(var(--df-rw)*.075) calc(var(--df-rw)*.06) calc(var(--df-rw)*.095);display:flex;flex-direction:column;overflow:hidden}
.df-pg-cabeco{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 4cqw;padding-bottom:1.8cqw;border-bottom:1px solid var(--tinta);font-size:max(2.2cqw,var(--t-mini));letter-spacing:.2em;text-transform:uppercase;line-height:1.3}
.df-pg-cabeco b{font-family:var(--serifa);font-weight:400;letter-spacing:.16em}
.df-pg-olho{margin:0 0 1.6cqw;font-size:max(2cqw,var(--t-mini));letter-spacing:.2em;text-transform:uppercase;color:var(--vermelho)}
.df-pg-olho .df-pt{color:var(--vermelho)}
.df-pg-titulo{font-family:var(--serifa);font-weight:400;font-size:max(6.6cqw,1.25rem);line-height:1.04;letter-spacing:-.01em;margin:0 0 5.4cqw;text-wrap:balance}
.df-pg-mao{font-family:var(--manuscrita);color:var(--vermelho);font-size:1.75em;line-height:.5;letter-spacing:0;padding:0 .1em 0 .04em;display:inline-block;transform:rotate(-6deg) translateY(.06em)}
.df-fala{margin:0}
.df-fala blockquote{font-family:var(--serifa);font-weight:400;font-size:max(4.6cqw,1.02rem);line-height:1.2;text-indent:-.42em}
.df-fala--grande{margin-bottom:4.4cqw;padding-bottom:4.4cqw;border-bottom:1px solid var(--papel-fio)}
.df-fala--grande blockquote{font-size:max(10cqw,1.6rem);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.df-fala figcaption{margin-top:1.8cqw;font-size:max(2.1cqw,var(--t-mini));letter-spacing:.16em;text-transform:uppercase;line-height:1.35;color:var(--tinta-suave)}
.df-fala figcaption b{font-weight:500;color:var(--tinta)}
.df-fala--grande figcaption b::after{content:" ·";color:var(--vermelho)}
.df-falas-par{display:grid;grid-template-columns:1fr 1fr;gap:5cqw}
.df-falas-par .df-fala+.df-fala{border-left:1px solid var(--papel-fio);padding-left:5cqw}
.df-falas-par figcaption b,.df-falas-par figcaption span{display:block}
.df-pg-pe{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.df-pg-botao{display:inline-flex;align-items:center;min-height:max(8.4cqw,3rem);padding:0 4.4cqw;background:var(--tinta);color:var(--papel);text-decoration:none;font-size:max(2.2cqw,var(--t-mini));font-weight:500;letter-spacing:.18em;text-transform:uppercase;transition:background-color .3s}
.df-pg-botao:hover{background:var(--vermelho)}
.df-pg-folio{font-family:var(--serifa);font-size:max(3cqw,var(--t-mini));line-height:1}

/* tarja "chamada de capa", a mesma tarja da capa do site */
.df-fala-selo{margin:0 0 2.6cqw;line-height:1}
.df-fala-selo span{display:inline-block;background:var(--tinta);color:var(--papel-claro);padding:.62em .85em .5em;font-size:max(1.8cqw,var(--t-mini));font-weight:500;letter-spacing:.22em;text-transform:uppercase}

/* a folha que vira: capa e verso */
.df-folha{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center;transform:translateZ(var(--df-t));transition:transform 1.25s var(--df-vira);cursor:pointer}
.df-capa,.df-verso{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;container-type:inline-size}
.df-capa{background:var(--noite);color:var(--marfim);box-shadow:inset 3px 0 6px -2px rgb(255 255 255/.18)}
.df-capa-foto{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.df-capa-veu{position:absolute;inset:0;background:linear-gradient(180deg in oklab,color-mix(in oklab,var(--noite) 72%,transparent) 0%,transparent 26%,transparent 56%,color-mix(in oklab,var(--noite) 92%,transparent) 100%)}
.df-capa-faixa{position:absolute;left:7.4cqw;right:5.6cqw;top:2.6cqw;display:flex;justify-content:space-between;padding-bottom:1.2cqw;border-bottom:1px solid color-mix(in oklab,var(--marfim) 40%,transparent);font-size:1.8cqw;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.df-capa-tarja{position:absolute;left:7.4cqw;top:33cqw;line-height:1}
.df-capa-tarja span{display:inline-block;background:var(--marfim);color:var(--tinta);padding:1.3cqw 1.8cqw 1cqw;font-size:1.75cqw;font-weight:500;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.df-capa-lombada{position:absolute;inset:0 auto 0 0;width:3cqw;background:linear-gradient(90deg,rgb(18 0 3/.82),rgb(40 0 8/.5) 70%,rgb(255 230 220/.14) 96%,rgb(0 0 0/.3))}
.df-letreiro{position:absolute;left:6.6cqw;right:5cqw;top:7.4cqw;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--serifa);font-weight:400;font-size:21.6cqw;line-height:1;color:var(--marfim);text-shadow:0 .4cqw 2.4cqw rgb(0 0 0/.3)}
.df-letreiro span{display:block}
.df-capa-ass{position:absolute;z-index:2;right:3.4cqw;top:24cqw;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.df-capa-nome{font-family:var(--manuscrita);font-size:11.4cqw;line-height:.9;color:var(--marfim);transform:rotate(-7deg);transform-origin:100% 60%;padding:0 .12em .1em .3em;text-shadow:0 0 .2em rgb(20 0 4/.7)}
.df-capa-oficio{margin-top:.4cqw;padding-right:1.8cqw;font-size:1.75cqw;font-weight:500;letter-spacing:.34em;text-transform:uppercase;text-shadow:0 0 1.4cqw rgb(0 0 0/.8)}
.df-capa-cabeca{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto}
.df-ch{position:absolute;text-transform:uppercase;letter-spacing:.2em;font-size:2.2cqw;line-height:1.5;text-shadow:0 0 2cqw rgb(0 0 0/.6)}
.df-ch--ano{left:7.4cqw;top:41.5cqw;display:grid;gap:.6em}
.df-ch--ano b{font-family:var(--serifa);font-weight:400;font-size:7cqw;letter-spacing:.04em;line-height:.9;text-transform:none}
.df-ch--ano span{font-size:1.9cqw}
.df-ch--lado{left:7.4cqw;top:58cqw;line-height:1.85;padding-left:2.4cqw;border-left:1px solid var(--vela)}
.df-ch--principal{left:7.4cqw;bottom:6.5cqw;max-width:58cqw;text-transform:none;letter-spacing:0}
.df-ch--principal b{display:block;font-family:var(--serifa);font-weight:400;font-size:12.4cqw;line-height:1;letter-spacing:-.01em;color:var(--vela)}
.df-ch--principal span{display:block;margin-top:1.8cqw;font-family:var(--serifa);font-size:3.7cqw;line-height:1.2;text-wrap:balance}
.df-ch--paris{right:6cqw;bottom:21cqw;text-align:right;line-height:1.3}
.df-ch--paris b{display:block;margin-top:.4cqw;font-family:var(--serifa);font-weight:400;font-size:4.4cqw;letter-spacing:.02em;text-transform:none}
.df-barras{position:absolute;right:6cqw;bottom:6.5cqw;width:22cqw;background:var(--marfim);color:var(--tinta-barras);padding:1.3cqw 1.5cqw .9cqw;text-align:center}
.df-barras i{display:block;height:7cqw;background:linear-gradient(90deg,var(--tinta-barras) 0.000% 1.053%,transparent 1.053% 2.105%,var(--tinta-barras) 2.105% 3.158%,transparent 3.158% 4.211%,var(--tinta-barras) 4.211% 6.316%,transparent 6.316% 9.474%,var(--tinta-barras) 9.474% 10.526%,transparent 10.526% 12.632%,var(--tinta-barras) 12.632% 14.737%,transparent 14.737% 15.789%,var(--tinta-barras) 15.789% 17.895%,transparent 17.895% 18.947%,var(--tinta-barras) 18.947% 21.053%,transparent 21.053% 23.158%,var(--tinta-barras) 23.158% 25.263%,transparent 25.263% 28.421%,var(--tinta-barras) 28.421% 29.474%,transparent 29.474% 30.526%,var(--tinta-barras) 30.526% 32.632%,transparent 32.632% 35.789%,var(--tinta-barras) 35.789% 36.842%,transparent 36.842% 37.895%,var(--tinta-barras) 37.895% 40.000%,transparent 40.000% 42.105%,var(--tinta-barras) 42.105% 44.211%,transparent 44.211% 45.263%,var(--tinta-barras) 45.263% 47.368%,transparent 47.368% 48.421%,var(--tinta-barras) 48.421% 49.474%,transparent 49.474% 50.526%,var(--tinta-barras) 50.526% 51.579%,transparent 51.579% 52.632%,var(--tinta-barras) 52.632% 53.684%,transparent 53.684% 54.737%,var(--tinta-barras) 54.737% 55.789%,transparent 55.789% 60.000%,var(--tinta-barras) 60.000% 61.053%,transparent 61.053% 63.158%,var(--tinta-barras) 63.158% 64.211%,transparent 64.211% 67.368%,var(--tinta-barras) 67.368% 68.421%,transparent 68.421% 69.474%,var(--tinta-barras) 69.474% 70.526%,transparent 70.526% 74.737%,var(--tinta-barras) 74.737% 76.842%,transparent 76.842% 78.947%,var(--tinta-barras) 78.947% 81.053%,transparent 81.053% 82.105%,var(--tinta-barras) 82.105% 83.158%,transparent 83.158% 84.211%,var(--tinta-barras) 84.211% 85.263%,transparent 85.263% 89.474%,var(--tinta-barras) 89.474% 91.579%,transparent 91.579% 93.684%,var(--tinta-barras) 93.684% 95.789%,transparent 95.789% 96.842%,var(--tinta-barras) 96.842% 97.895%,transparent 97.895% 98.947%,var(--tinta-barras) 98.947% 100.000%)}
.df-barras span{display:block;margin-top:.7cqw;font-size:1.7cqw;letter-spacing:.1em;white-space:nowrap}
.df-brilho{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(104deg,transparent 28%,rgb(255 236 205/.2) 46%,rgb(255 255 255/.05) 52%,transparent 64%);background-size:240% 100%;background-position:var(--df-bx,70%) 0}
.df-faiscas{position:absolute;inset:0;pointer-events:none}
.df-faiscas i{position:absolute;width:5cqw;height:5cqw;opacity:0;background:
  radial-gradient(circle,#fff 0 6%,rgb(255 226 190/.55) 10%,transparent 30%),
  linear-gradient(90deg,transparent 47%,rgb(255 240 220/.9) 50%,transparent 53%),
  linear-gradient(0deg,transparent 47%,rgb(255 240 220/.9) 50%,transparent 53%);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 68%);mask:radial-gradient(circle,#000 0,transparent 68%);animation:df-cintila 5.5s ease-in-out infinite}
.df-faiscas i:nth-child(1){left:82%;top:19%;animation-delay:2.1s;width:3.6cqw;height:3.6cqw}
.df-faiscas i:nth-child(2){left:86%;top:41%;animation-delay:1.2s;width:3.4cqw;height:3.4cqw}
.df-faiscas i:nth-child(3){left:80%;top:56%;animation-delay:4.2s}
.df-faiscas i:nth-child(4){left:88%;top:66%;animation-delay:2.8s;width:3.2cqw;height:3.2cqw}
.df-faiscas i:nth-child(5){left:8%;top:27%;animation-delay:1.7s;width:4cqw;height:4cqw}
.df-faiscas i:nth-child(6){left:34%;top:36%;animation-delay:3.9s;width:3.6cqw;height:3.6cqw}
@keyframes df-cintila{0%,62%,100%{opacity:0;transform:scale(.4) rotate(0)}74%{opacity:.95;transform:scale(1) rotate(25deg)}86%{opacity:0;transform:scale(.5) rotate(45deg)}}

/* verso da capa: página da esquerda */
.df-verso{transform:rotateY(180deg);background:var(--vinho);color:var(--marfim);display:flex;flex-direction:column;justify-content:flex-end}
.df-verso-foto{position:absolute;top:0;right:0;width:128%;max-width:none;height:100%;object-fit:cover;object-position:50% 34%;transform:scale(1.07);transform-origin:62% 36%;transition:transform 9s cubic-bezier(.2,.6,.2,1)}
.df-verso::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg in oklab,transparent 50%,color-mix(in oklab,var(--noite) 94%,transparent) 88%),
  linear-gradient(270deg,color-mix(in oklab,var(--castanho) 55%,transparent) 0,transparent 10%)}
.df-verso-olho,.df-verso-texto,.df-verso-ass{position:relative;z-index:2;margin-left:8cqw;margin-right:9cqw}
.df-verso-olho{margin-bottom:2.4cqw;font-size:max(2.2cqw,var(--t-mini));letter-spacing:.24em;text-transform:uppercase;color:var(--vela)}
.df-verso-texto{margin-bottom:2cqw;font-family:var(--serifa);font-size:max(6.6cqw,1.3rem);line-height:1.08;text-wrap:balance;text-indent:-.4em}
.df-verso-ass{margin-bottom:7cqw;display:flex;flex-direction:column;gap:.4cqw;font-size:max(2.1cqw,var(--t-mini));letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--marfim-suave)}
.df-verso-mao{font-family:var(--manuscrita);font-size:max(9cqw,2rem);line-height:1;letter-spacing:0;text-transform:none;color:var(--marfim);transform:rotate(-5deg);transform-origin:0 60%;width:fit-content}
.df-verso-folio{position:absolute;z-index:2;left:6cqw;top:5cqw;font-family:var(--serifa);font-size:max(3cqw,var(--t-mini));text-shadow:0 0 12px rgb(0 0 0/.5)}

.df-fechar{position:absolute;left:50%;bottom:-4.6rem;transform:translateX(-50%);min-height:3rem;padding:0 1.4rem;background:none;border:1px solid var(--marfim-fio);color:var(--marfim);font-family:var(--versal);font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:border-color .3s,background-color .3s}
.df-fechar:hover{border-color:var(--marfim);background:color-mix(in oklab,var(--marfim) 8%,transparent)}
.df-fechar[hidden]{display:none}
.df-aberta .df-fechar{left:calc(50% - var(--df-rw)/2)}

/* legenda do exemplar: o crédito da foto, como na capa do site, e a dica do gesto */
.df-legenda{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:1.6rem auto 0;text-align:center;font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-suave);transition:opacity .5s ease,visibility 0s}
.df-legenda-dica{display:inline-flex;align-items:center;gap:.7rem;color:var(--vela)}
.df-legenda-dica::before,.df-legenda-dica::after{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.6}
.df-aberta .df-legenda{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}

/* ---------- aberta ---------- */
.df-aberta .df-folha{transform:translateZ(var(--df-t)) rotateY(-176deg)}
.df-aberta .df-revista{transform:rotateX(calc(9deg + var(--df-ix,0deg))) rotateY(calc(-4deg + var(--df-iy,0deg))) rotateZ(0deg)}
.df-aberta .df-verso-foto{transform:none}
@media (min-width:861px){
  .df-aberta .df-texto{opacity:0;transform:translateX(-3rem);pointer-events:none;visibility:hidden;transition:opacity .5s ease,transform .9s var(--df-vira),visibility 0s .5s}
  .df-aberta .df-palco{transform:translateX(var(--df-dx)) translateY(-1rem) scale(1.06)}
}

/* a capa se levanta um pouco, de tempos em tempos, enquanto a seção está na tela e ninguém abriu */
.df-na-tela:not(.df-tocada):not(.df-aberta) .df-folha{animation:df-espia 7s var(--df-vira) 2.4s infinite}
@keyframes df-espia{0%,70%,100%{transform:translateZ(var(--df-t)) rotateY(0)}80%{transform:translateZ(var(--df-t)) rotateY(-13deg)}88%{transform:translateZ(var(--df-t)) rotateY(-9deg)}}

/* o exemplar pousa ao entrar na tela */
.df-cena[data-wf-entra]{transform:translateY(3rem) rotate(-4deg) scale(.94);transition:opacity 1s var(--ease),transform 1.5s cubic-bezier(.2,.75,.15,1)}
.df-cena[data-wf-entra].wf-visto,.sem-js .df-cena[data-wf-entra]{transform:none}

/* luz de leitura: ao abrir, o salão escurece e a luz fica na página dupla */
.df-vinheta::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;
  background:radial-gradient(70% 62% at 50% 46% in oklab,transparent 40%,color-mix(in oklab,var(--noite) 86%,transparent) 100%)}
.df-aberta .df-vinheta::after{opacity:1}
.df-aberta .df-luzes{opacity:.5}
.df-aberta .df-palco::before{opacity:.5;animation:none}

/* a página se imprime depois que a capa vira */
.df-aberta .df-pagina>:not(.df-pg-lustro){animation:df-imprime .9s var(--ease) both}
.df-aberta .df-pg-cabeco{animation-delay:.5s}
.df-aberta .df-pg-olho{animation-delay:.56s}
.df-aberta .df-pg-titulo{animation-delay:.62s}
.df-aberta .df-fala--grande{animation-delay:.74s}
.df-aberta .df-falas-par{animation-delay:.9s}
.df-aberta .df-pg-pe{animation-delay:1.05s}
@keyframes df-imprime{from{opacity:0;transform:translateY(.8rem);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(-20% -20% -20% -20%)}}
.df-pg-lustro{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:0;
  background:linear-gradient(104deg,transparent 30%,rgb(255 255 255/.9) 48%,transparent 62%);background-size:260% 100%;background-position:120% 0}
.df-aberta .df-pg-lustro{animation:df-lustro 1.9s ease-out .55s both}
@keyframes df-lustro{0%{opacity:0;background-position:120% 0}30%{opacity:.9}100%{opacity:0;background-position:-40% 0}}
.df-pagina::before{content:"";position:absolute;inset:0 auto 0 0;width:16%;pointer-events:none;background:linear-gradient(90deg,color-mix(in oklab,var(--castanho) 26%,transparent),transparent);animation:df-dobra 9s ease-in-out infinite alternate}
@keyframes df-dobra{from{opacity:.25}to{opacity:1}}

/* emenda com a contracapa */
.df-continua{max-width:var(--wf-max);margin:clamp(2rem,3vw,3rem) auto 0;display:flex;justify-content:flex-end;border-top:1px solid var(--marfim-fio)}
.df-continua a{display:inline-flex;align-items:center;gap:1.1rem;min-height:4rem;padding-top:.5rem;color:var(--marfim);text-decoration:none}
.df-continua span{font-size:var(--t-mini);letter-spacing:.2em;text-transform:uppercase;color:var(--marfim-suave)}
.df-continua b{font-family:var(--serifa);font-weight:400;font-size:var(--t-sub);line-height:1}
.df-continua svg{width:1.6rem;height:1.6rem;flex:none;transition:transform .5s var(--ease)}
.df-continua a:hover svg{transform:translateX(6px)}

/* a mão escreve "mãos." quando o título entra */
.df-titulo .df-titulo-mao{clip-path:inset(-30% -10% -40% -10%)}
.df-titulo:not(.wf-visto) .df-titulo-mao{clip-path:inset(-30% 100% -40% -10%)}
.sem-js .df-titulo .df-titulo-mao{clip-path:none}
.df-titulo.wf-visto .df-titulo-mao{animation:df-chama 17s ease-in-out infinite alternate,df-escreve 1.6s .55s var(--ease) backwards}
@keyframes df-escreve{from{clip-path:inset(-30% 100% -40% -10%)}to{clip-path:inset(-30% -10% -40% -10%)}}

/* ---------- celular e tablet em pé ---------- */
@media (max-width:860px){
  .df-sec{--df-rw:min(76vw,48svh,400px);--df-t:9px}
  .df-aberta{--df-rw:min(88vw,58svh,430px)}
  .df-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"topo" "cena" "pe";row-gap:2.2rem}
  .df-texto--topo{padding-top:0}
  .df-cena{padding-bottom:0}
  .df-legenda{margin-top:1.1rem;letter-spacing:.12em;gap:.4rem}
  .df-aberta .df-legenda{display:none}
  .df-olho{gap:.3rem .7rem;margin-bottom:1rem;letter-spacing:.16em}
  .df-olho-data::before{width:1.2rem;margin-right:.7rem}
  .df-titulo{font-size:clamp(2.9rem,14vw,5rem)}
  .df-origem{margin-bottom:0;padding-left:1.3rem}
  .df-origem figcaption{letter-spacing:.06em}
  .df-palco{perspective:1100px;padding:.6rem 0 1rem}
  .df-revista{transform:rotateX(calc(6deg + var(--df-ix,0deg))) rotateY(calc(-17deg + var(--df-iy,0deg))) rotateZ(1.5deg);transition:transform 1.1s var(--df-vira),width .8s var(--df-vira)}
  .df-aberta .df-revista{transform:rotateX(3deg) rotateY(-2deg)}
  .df-fechar{display:none}
  .df-acoes{gap:.4rem 1.6rem}
  .df-abrir{flex:1 1 100%;justify-content:center}
  .df-aberta .df-abrir svg{transform:rotate(180deg)}
  .df-pagina{padding:calc(var(--df-rw)*.06) calc(var(--df-rw)*.06) calc(var(--df-rw)*.045) calc(var(--df-rw)*.08)}
  .df-pg-cabeco{margin-bottom:3.4cqw;letter-spacing:.12em}
  .df-pg-olho{letter-spacing:.12em}
  .df-pg-olho-longo{display:none}
  .df-pg-titulo{font-size:max(5.4cqw,1.15rem);margin-bottom:4cqw}
  .df-fala--grande{margin-bottom:3.4cqw;padding-bottom:3.4cqw}
  .df-fala--grande blockquote{font-size:max(9.4cqw,1.6rem)}
  .df-fala figcaption{letter-spacing:.06em;margin-top:1cqw}
  .df-falas-par{grid-template-columns:1fr;gap:3cqw}
  .df-falas-par .df-fala+.df-fala{border-left:0;padding-left:0}
  .df-falas-par figcaption b,.df-falas-par figcaption span{display:inline}
  .df-falas-par figcaption b::after{content:" ·"}
  .df-pg-botao{display:none}
  .df-pg-pe{justify-content:flex-end}
  .df-prova a{grid-template-columns:4rem 1fr}
  .df-verso-ass{letter-spacing:.08em}
  .df-continua a{gap:.8rem;flex-wrap:wrap;justify-content:flex-end}
  .df-continua span{flex:1 1 100%;text-align:right;margin-bottom:-.6rem;padding-top:.9rem}
}

@media (prefers-reduced-motion:reduce){
  .df-faiscas,.df-pg-lustro{display:none}
  .df-m,.df-palco::before,.df-pagina::before{animation:none}
  .df-titulo-mao{animation:none;background-position:30% 0}
  .df-verso-foto{transform:none}
}

/* telas estreitas: a página aberta precisa caber inteira */
@media (max-width:420px){
  .df-fala-selo{display:none}
  .df-pg-cabeco{margin-bottom:3cqw}
  .df-pg-olho{margin-bottom:1cqw}
  .df-pg-titulo{margin-bottom:3cqw;line-height:1}
  .df-fala--grande{margin-bottom:2.6cqw;padding-bottom:2.6cqw}
  .df-fala--grande blockquote{font-size:max(8.6cqw,1.45rem)}
  .df-fala blockquote{line-height:1.16}
  .df-falas-par{gap:2.4cqw}
}