/* fl. 03 · Qualificação (os dois) — prefixo do- */
.do-secao{--do-livro:min(800px,55vw);--do-fio:color-mix(in oklab,var(--e-tinta) 16%,transparent);position:relative;isolation:isolate;overflow:hidden;background:var(--e-noite)}

/* o dia: papel no topo, a parede de cimento do retrato, e a parede anoitece no pé */
.do-dia{position:relative;padding-top:clamp(56px,7vw,104px);
  background:
    radial-gradient(46% 30% at 4% 40% in oklab,var(--e-papel) 0%,transparent 72%),
    radial-gradient(60% 34% at 30% 56% in oklab,var(--e-nevoa) 0%,transparent 70%),
    radial-gradient(46% 34% at 96% 58% in oklab,var(--e-parede-2) 0%,transparent 72%),
    linear-gradient(180deg in oklab,var(--e-papel) 0,var(--e-nevoa) 15%,var(--e-parede) 50%,var(--e-parede-2) calc(100% - 340px),var(--e-noite) 100%)}
/* a textura é a própria parede da foto (faixa do alto, sem ninguém) */
.do-dia::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url("../img/casal-parede.webp") 0 0/auto 600% no-repeat;mix-blend-mode:multiply;opacity:.62;
  -webkit-mask-image:linear-gradient(180deg,transparent 6%,#000 26%,#000 calc(100% - 360px),transparent calc(100% - 60px));mask-image:linear-gradient(180deg,transparent 6%,#000 26%,#000 calc(100% - 360px),transparent calc(100% - 60px))}
.do-topo,.do-palco{position:relative;z-index:1}

.do-topo{padding:0 var(--e-margem);text-align:center}
.do-cab{max-width:1320px;margin:0 auto;padding-bottom:12px;border-bottom:1px solid var(--do-fio);text-align:left}
.do-titulo{font-family:var(--e-serifa);font-weight:400;font-size:clamp(38px,5.4vw,82px);line-height:1.04;letter-spacing:-.02em;margin-top:clamp(34px,5vw,68px)}
.do-abre{max-width:39em;margin:22px auto 0;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;color:var(--e-tinta-2)}

/* palco: ele entra pela esquerda, ela pela direita, o livro aberto no meio */
.do-palco{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,minmax(0,calc(var(--do-livro)/2))) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:end;margin-top:clamp(-96px,(1420px - 100vw)*1.2,40px)}
.do-parte{display:contents}
.do-fig{position:relative;z-index:2;grid-row:1/3;
  -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 13%);mask-image:linear-gradient(0deg,transparent 0,#000 13%)}
.do-fig img{width:100%;filter:drop-shadow(0 18px 22px color-mix(in oklab,var(--e-tinta) 34%,transparent))}
.do-parte--ele .do-fig{grid-column:1;justify-self:start;width:calc(100% + 62px);max-width:420px;margin-left:-7px}
.do-parte--ela .do-fig{grid-column:4;justify-self:end;width:calc((100% + 62px)*.81);max-width:340px;margin-right:-14px}
.do-leg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.do-pag{position:relative;z-index:1;grid-row:2;align-self:stretch;display:flex;flex-direction:column;margin-bottom:130px;padding:32px 34px 30px 54px;
  background:linear-gradient(178deg,var(--e-papel-claro),var(--e-papel) 60%,var(--e-papel-2));
  box-shadow:0 1px 0 color-mix(in oklab,var(--e-tinta) 8%,transparent),0 28px 50px -28px color-mix(in oklab,var(--e-tinta) 50%,transparent)}
.do-pag::before{content:"";position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--e-margem-rosa);opacity:.8}
.do-parte--ele .do-pag{grid-column:2;padding-left:78px;box-shadow:-2px 2px 0 -1px var(--e-papel-2),-4px 4px 0 -1px var(--e-papel),-6px 6px 0 -1px var(--e-papel-2)}
.do-parte--ela .do-pag{grid-column:3;padding-right:72px;box-shadow:2px 2px 0 -1px var(--e-papel-2),4px 4px 0 -1px var(--e-papel),6px 6px 0 -1px var(--e-papel-2)}
.do-parte--ele .do-pag::before{left:56px}
/* a capa do livro por baixo das folhas, com a fita */
.do-capa{grid-column:2/4;grid-row:2;align-self:stretch;position:relative;z-index:0;margin:-12px -16px 116px;border-radius:3px;background:linear-gradient(160deg,var(--e-noite-2),var(--e-noite));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--e-ouro) 55%,transparent),0 40px 60px -30px color-mix(in oklab,var(--e-tinta) 70%,transparent)}
.do-capa::after{content:"";position:absolute;left:calc(50% - 8px);top:calc(100% - 16px);width:16px;height:92px;background:linear-gradient(90deg,var(--e-ouro),var(--e-ouro-claro) 45%,var(--e-ouro));clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 9px),0 100%)}
/* a dobra do livro */
.do-pag::after{content:"";position:absolute;top:0;bottom:0;width:38px;pointer-events:none}
.do-parte--ele .do-pag::after{right:0;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--e-tinta) 13%,transparent))}
.do-parte--ela .do-pag::after{left:0;background:linear-gradient(270deg,transparent,color-mix(in oklab,var(--e-tinta) 13%,transparent))}

.do-lado{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--e-ouro-tinta)}
.do-qual{margin-top:14px;font-family:var(--e-serifa);font-size:clamp(15px,1.12vw,16.5px);line-height:1.75;color:var(--e-tinta);overflow:hidden}
.do-qual .do-nome,.do-qual p{display:inline}
.do-nome{font-weight:400;font-size:1em;text-transform:uppercase;letter-spacing:.09em}
/* traço que fecha a linha, como nas escrituras */
.do-qual p::after{content:"";display:inline-block;vertical-align:middle;width:100%;margin:0 -100% 0 10px;height:3px;border-top:1px solid var(--e-ouro-tinta);border-bottom:1px solid var(--e-ouro-tinta);opacity:.55}

.do-fala{margin-top:22px;padding-top:18px;border-top:1px solid var(--do-fio)}
.do-fala p{font-family:var(--e-serifa);font-style:italic;font-size:clamp(18px,1.55vw,22px);line-height:1.38;letter-spacing:-.01em}
.do-fala footer{margin-top:10px;font-size:13px;line-height:1.5;color:var(--e-tinta-2)}
.do-fala{margin-bottom:22px}
.do-parte--ela .do-fala p{font-size:clamp(21px,2vw,29px);line-height:1.3}
.do-test{margin-top:auto;padding-top:12px;border-top:1px solid var(--do-fio);font-size:13.5px;line-height:1.55;color:var(--e-tinta-2)}
.do-test span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--e-ouro-tinta);margin-bottom:3px}
.do-test cite{font-style:normal;white-space:nowrap;color:var(--e-tinta)}

/* as duas assinaturas, em papel sobre a noite */
.do-conforme{font-family:var(--e-serifa);font-style:italic;font-size:clamp(15px,1.2vw,17px);color:color-mix(in oklab,var(--e-papel) 80%,var(--e-noite))}
.do-assinam{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(28px,5vw,80px);max-width:1120px;margin:clamp(20px,2.6vw,36px) auto 0;text-align:left}
.do-risco{position:relative;padding:0 0 .12em .52em;white-space:nowrap;font-size:clamp(40px,5.3vw,78px);line-height:1}
.do-xis{position:absolute;left:0;bottom:.16em;font-family:var(--e-sem);font-style:normal;font-weight:300;font-size:.3em;line-height:1;color:var(--e-ouro-claro)}
.do-mao{display:inline-block;font-family:var(--e-mao);font-size:1em;line-height:1;color:var(--e-papel);padding:0 .14em 0 0}
.do-linha{position:absolute;left:0;right:0;bottom:.14em;height:1.5px;background:var(--e-papel);opacity:.6}
.do-ass-leg{margin-top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:color-mix(in oklab,var(--e-papel) 76%,var(--e-noite))}

/* o fecho, já de noite */
.do-fecho{position:relative;z-index:1;padding:8px var(--e-margem) var(--e-secao);text-align:center;color:var(--e-papel)}
.do-fecho-rot{margin-top:clamp(44px,5.5vw,76px);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--e-ouro-claro)}
.do-lema{margin-top:16px}
.do-lema p{font-family:var(--e-serifa);font-style:italic;font-size:clamp(26px,3vw,44px);line-height:1.15;letter-spacing:-.02em}
.do-fecho-txt{max-width:34em;margin:14px auto 0;font-size:clamp(15.5px,1.15vw,17.5px);color:color-mix(in oklab,var(--e-papel) 82%,var(--e-noite))}
.do-acoes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 26px;margin-top:30px}
.do-btn{background:var(--e-papel);color:var(--e-tinta);text-decoration:none;padding:16px 26px;font-weight:500;font-size:15px;letter-spacing:.02em;border-radius:2px;transition:background .3s}
.do-btn:hover{background:var(--e-ouro-claro)}
.do-ig{font-size:15px;text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--e-papel) 55%,transparent);padding-bottom:2px}
.do-ig span{color:var(--e-ouro-claro)}
.do-ig:hover{border-bottom-color:var(--e-ouro-claro)}
.do-nota{margin-top:16px;font-size:12px;color:color-mix(in oklab,var(--e-papel) 62%,var(--e-noite))}
.do-fecho :focus-visible{outline-color:var(--e-ouro-claro)}

/* tablet: cada um com a sua folha ao lado */
@media (max-width:1179px){
  .do-palco{display:block;margin-top:clamp(30px,5vw,60px)}
  .do-capa{display:none}
  .do-parte .do-pag{box-shadow:0 1px 0 color-mix(in oklab,var(--e-tinta) 8%,transparent),0 28px 50px -28px color-mix(in oklab,var(--e-tinta) 50%,transparent)}
  .do-parte--ele .do-pag{padding-left:52px}
  .do-parte--ele .do-pag::before{left:30px}
  .do-parte{display:grid;align-items:end;position:relative}
  .do-parte--ele{grid-template-columns:minmax(0,38%) minmax(0,1fr);padding-right:var(--e-margem)}
  .do-parte--ela{grid-template-columns:minmax(0,1fr) minmax(0,31%);padding-left:var(--e-margem);margin-top:-40px}
  .do-fig,.do-pag{grid-row:1}
  .do-parte--ele .do-fig{grid-column:1;width:calc(100% + 30px);max-width:380px;margin-left:-8px}
  .do-parte--ele .do-pag{grid-column:2;transform:rotate(.5deg)}
  .do-parte--ela .do-pag{grid-column:1;transform:rotate(-.5deg);padding-right:52px}
  .do-parte--ela .do-fig{grid-column:2;justify-self:end;width:calc(100% + 30px);max-width:308px;margin:0 -14px 0 -30px}
  .do-pag{align-self:end;margin-bottom:90px}
  .do-test{margin-top:0}
  .do-fala{margin-bottom:18px}
  .do-pag::after{display:none}
}

/* celular: a pessoa entra pela borda da tela e a folha pousa sobre ela */
@media (max-width:599px){
  .do-topo{text-align:left}
  .do-titulo{font-size:clamp(38px,11.4vw,54px);margin-top:28px}
  .do-abre{margin-left:0}
  .do-parte,.do-parte--ele,.do-parte--ela{display:block;padding:0;margin-top:0}
  .do-parte--ela{margin-top:34px}
  .do-parte--ele .do-fig{width:64%;margin:0 0 0 -2%}
  .do-parte--ela .do-fig{width:52%;margin:0 -4% 0 auto}
  .do-fig{-webkit-mask-image:none;mask-image:none}
  .do-parte .do-fala{position:absolute;bottom:calc(100% + 22px);margin:0;padding:12px 0 0;border-top:1px solid var(--e-ouro-tinta)}
  .do-fala footer{font-size:12px;color:var(--e-tinta)}
  .do-parte--ele .do-fala{left:64%;right:2px}
  .do-parte--ela .do-fala{left:2px;right:54%}
  .do-parte--ele .do-fala p{font-size:17px;line-height:1.34}
  .do-parte--ela .do-fala p{font-size:20px;line-height:1.3}
  .do-parte .do-pag{margin:-42% 12px 0;padding:22px 18px 20px 36px;z-index:3;transform:rotate(.5deg)}
  .do-test{margin-top:20px}
  .do-parte--ela .do-pag{transform:rotate(-.5deg);padding-right:18px}
  .do-parte .do-pag::before{left:22px}
  .do-qual{font-size:15px;line-height:1.7}
  .do-assinam{grid-template-columns:minmax(0,1fr);gap:26px}
  .do-risco{font-size:clamp(40px,12.4vw,54px)}
  .do-fecho{text-align:left;padding-top:30px}
  .do-fecho-txt{margin-left:0}
  .do-acoes{justify-content:flex-start}
  .do-lema p{font-size:clamp(25px,7.4vw,32px)}
}

/* o gesto da seção: as duas assinaturas são escritas quando entram na tela */
@media (prefers-reduced-motion:no-preference){
  .do-js .do-mao{clip-path:inset(-30% 100% -30% 0);transition:clip-path 1.3s var(--e-curva) .5s}
  .do-js .do-linha{transform:scaleX(0);transform-origin:left;transition:transform .9s ease}
  .do-js .do-xis{opacity:0;transition:opacity .5s ease}
  .do-js .do-ass-leg{opacity:0;transition:opacity .8s ease 1.5s}
  .do-js .do-escrita .do-mao{clip-path:inset(-30% -5% -30% 0)}
  .do-js .do-escrita .do-linha{transform:none}
  .do-js .do-escrita .do-xis,.do-js .do-escrita .do-ass-leg{opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .do-js .do-ass--ela .do-mao{transition-delay:1.5s}
  .do-js .do-ass--ela .do-linha,.do-js .do-ass--ela .do-xis{transition-delay:1s}
  .do-js .do-ass--ela .do-ass-leg{transition-delay:2.5s}
}