/* Seção 05 · Bancada — perguntas (prefixo pe-) · versão 3
   A seção é uma elevação da parede da bancada: a foto real de um lado e, na mesma altura do tampo dela,
   um segundo móvel feito de página, cujas gavetas são as perguntas. */
.pe-secao{--pe-frente:#f1ece1;--pe-frente-luz:#fbf8f1;--pe-vao:#cfc6b4;--pe-fundo:#e7dfd0;
  padding-block:clamp(64px,10vw,96px) var(--respiro);
  background:
    radial-gradient(ellipse 70% 46% at 22% 34% in oklab,#f1ecdf 0%,rgb(241 236 223 / 0) 100%),
    linear-gradient(180deg in oklab,rgb(67 40 26 / .2) 0,rgb(67 40 26 / .05) 26px,rgb(67 40 26 / 0) 110px),
    linear-gradient(180deg in oklab,#efe9dc 0,var(--gelo-luz) 190px,var(--gelo-luz) 100%)}
.pe-secao::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:var(--respiro);pointer-events:none;display:none;
  background:linear-gradient(180deg in oklab,rgb(90 58 38 / .16) 0,rgb(90 58 38 / .16) 1px,#e7dfcf 1px,#eee8da 46%,#f1ecdf 100%)}

.pe-grade{position:relative;z-index:1}
.pe-cabeca{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.pe-titulo{max-width:9.5em}

/* foto: no celular, a faixa do armário espelhado até o tampo; as gavetas da página continuam as dela */
.pe-foto{position:relative;z-index:0;margin:18px calc(-1*var(--margem)) 0;aspect-ratio:1080/770;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%,#000 100%)}
.pe-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;filter:brightness(1.03) saturate(.94)}

/* o móvel */
.pe-movel{position:relative;z-index:1;margin-top:-16px;background:var(--pe-vao);padding:0 0 0;border-radius:0 0 2px 2px;
  box-shadow:0 26px 30px -26px rgb(90 58 38 / .5),0 2px 0 -1px rgb(90 58 38 / .1)}
.pe-tampo{display:block;position:relative;z-index:3;height:15px;margin-inline:-10px;border-radius:2px;
  background:linear-gradient(180deg,#fffefb 0,#f6f2e8 62%,#e2dacb 100%);
  box-shadow:0 1px 0 rgb(255 255 255 / .9) inset,0 10px 16px -8px rgb(90 58 38 / .38),0 1px 1px rgb(90 58 38 / .25)}
.pe-rodape{display:block;height:13px;border-top:3px solid var(--pe-vao);box-sizing:content-box;background:linear-gradient(180deg,#a79c88 0,#c4baa7 100%);box-shadow:inset 14px 0 0 var(--gelo-luz),inset -14px 0 0 var(--gelo-luz)}

.pe-gaveta{position:relative;border-top:3px solid var(--pe-vao)}
.pe-gaveta:first-of-type{border-top-width:2px}
.pe-frente{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:19px 16px 19px 16px;min-height:76px;cursor:pointer;list-style:none;
  background:linear-gradient(180deg,var(--pe-frente-luz) 0,var(--pe-frente) 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgb(90 58 38 / .08);
  transition:background-color .4s,box-shadow .5s var(--ease),transform .5s var(--ease);-webkit-tap-highlight-color:transparent}
.pe-frente::-webkit-details-marker{display:none}
.pe-frente:focus-visible{outline:2px solid var(--latao-tinta);outline-offset:-5px}
.pe-num{font-family:var(--f-titulo);font-weight:400;font-size:15px;letter-spacing:.08em;color:var(--tinta-2);align-self:start;padding-top:.42em}
.pe-pergunta{font-family:var(--f-titulo);font-weight:400;font-size:clamp(20px,1.9vw,26px);line-height:1.22;letter-spacing:.005em;color:var(--tinta);text-wrap:balance}

/* puxador de concha, em latão, como os da bancada */
.pe-puxador{display:grid;place-items:center;width:48px;height:44px;margin:-10px -6px -10px 0}
.pe-puxador i{display:block;position:relative;overflow:hidden;width:42px;height:15px;border-radius:3px 3px 15px 15px / 3px 3px 12px 12px;
  background:
    radial-gradient(ellipse 46% 60% at 30% 46%,rgb(255 246 214 / .85) 0,rgb(255 246 214 / 0) 100%),
    linear-gradient(180deg,#fff3cf 0,#ecd6a6 3px,#a8803f 3.6px,#b48c4a 4.6px,#dcbb7b 6px,var(--latao) 62%,var(--latao-fundo) 100%);
  box-shadow:0 2px 2px rgb(90 58 38 / .3),0 6px 7px -2px rgb(90 58 38 / .32);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pe-puxador i::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgb(255 255 255 / 0) 38%,rgb(255 255 255 / .9) 50%,rgb(255 255 255 / 0) 62%) 130% 0/300% 100% no-repeat}
/* o gesto da seção: quando o móvel chega, a luz corre pelos puxadores, um a um */
.wf-js .pe-movel.wf-visto .pe-puxador i::after{animation:pe-brilho 1.5s var(--ease) both;animation-delay:calc(.7s + var(--pe-n,0)*.13s)}
@keyframes pe-brilho{from{background-position:130% 0}to{background-position:-40% 0}}
@media (hover:hover){
  .pe-frente:hover .pe-puxador i{transform:translateY(2px)}
  .pe-frente:hover{background:linear-gradient(180deg,#fffdf8 0,#f5f1e7 100%)}
}

/* aberta: a frente vem para fora e mostra o fundo da gaveta */
.pe-gaveta[open]:not(.pe-fechando) > .pe-frente{box-shadow:inset 0 1px 0 #fff,0 12px 18px -10px rgb(90 58 38 / .42);background:linear-gradient(180deg,#fffdf8 0,#f7f3ea 100%)}
.pe-gaveta[open]:not(.pe-fechando) .pe-puxador i{transform:translateY(3px);box-shadow:0 3px 3px rgb(90 58 38 / .32),0 11px 10px -3px rgb(90 58 38 / .36)}
.pe-dentro{position:relative;z-index:1;overflow:hidden;
  background:
    linear-gradient(90deg in oklab,rgb(90 58 38 / .13) 0,rgb(90 58 38 / 0) 14px,rgb(90 58 38 / 0) calc(100% - 14px),rgb(90 58 38 / .13) 100%),
    linear-gradient(180deg in oklab,#d6ccb9 0,#e9e2d4 26px,#f0eadd 100%)}
.pe-miolo{padding:26px 18px 28px 18px;display:flex;flex-direction:column;gap:12px}
.pe-apoio{font-size:16.5px;line-height:1.62;font-weight:400;color:var(--tinta-2);max-width:35em}
.pe-fala{font-family:var(--f-titulo);font-style:italic;font-weight:300;font-size:clamp(24px,2.3vw,32px);line-height:1.22;color:var(--tinta);max-width:21em;text-wrap:pretty;padding-left:18px;margin-block:4px 6px;
  background:linear-gradient(var(--latao),var(--latao-fundo)) 0 .2em/1.5px calc(100% - .4em) no-repeat}
.pe-dito{font-weight:500;color:var(--tinta)}
.pe-elo{display:inline-block;font-weight:500;font-size:15.5px;background-image:linear-gradient(var(--latao-tinta),var(--latao-tinta))}

/* fecho */
.pe-fecho{position:relative;z-index:1;margin-top:56px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.pe-fecho::before{content:"";width:64px;height:1px;background:var(--latao-fundo)}
.pe-fecho-frase{font-family:var(--f-titulo);font-style:italic;font-weight:300;font-size:clamp(34px,4.1vw,60px);line-height:1.04;letter-spacing:.005em;color:var(--tinta);max-width:6.6em}

@media (min-width:1000px){
  .pe-secao{--pe-w:clamp(410px,42vw,620px);--pe-hh:360px;--pe-p:96px;padding-top:var(--pe-p)}
  .pe-secao::after{display:block}
  .pe-grade{display:grid;grid-template-columns:calc(var(--pe-w) - var(--margem) + clamp(34px,4.4vw,64px)) minmax(0,1fr);grid-template-rows:var(--pe-hh) auto;position:static}
  .pe-cabeca{grid-column:2;grid-row:1;justify-content:flex-end;gap:24px;padding-bottom:54px;position:relative;z-index:1}
  /* a foto encosta na borda esquerda e o tampo dela fica na altura do tampo do móvel */
  .pe-foto{position:absolute;left:max(0px,calc(50vw - 760px));top:calc(var(--pe-p) + var(--pe-hh) - 1.098*var(--pe-w));width:var(--pe-w);margin:0;aspect-ratio:1080/1838;overflow:visible;
    -webkit-mask-image:linear-gradient(to bottom,transparent 17%,#000 33%,#000 76%,transparent 97%),linear-gradient(to right,rgb(0 0 0 / .6) 0,#000 10%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 17%,#000 33%,#000 76%,transparent 97%),linear-gradient(to right,rgb(0 0 0 / .6) 0,#000 10%,#000 78%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .pe-foto img{object-fit:fill}
  .pe-movel{grid-column:2;grid-row:2;margin-top:0}
  .pe-tampo{height:18px;margin-inline:-16px}
  .pe-frente{padding:18px 24px 18px 26px;gap:18px;min-height:76px}
  .pe-miolo{padding:28px 40px 34px 60px;gap:12px}
  .pe-fecho{grid-column:1;grid-row:2;align-self:end;margin:0;padding-bottom:30px}
}
/* tablet em pé: a faixa da foto fica mais baixa, ainda terminando no tampo */
@media (min-width:600px) and (max-width:999px){
  .pe-foto{aspect-ratio:1080/560;margin-top:8px}
  .pe-foto img{object-position:50% 54.7%}
  .pe-fecho{flex-direction:row;align-items:center;flex-wrap:wrap;gap:20px 36px}
  .pe-fecho::before{display:none}
  .pe-fecho-frase{max-width:none}
}
/* telas muito largas: a foto já não toca a borda, então dissolve também à esquerda */
@media (min-width:1560px){
  .pe-foto{-webkit-mask-image:linear-gradient(to bottom,transparent 17%,#000 33%,#000 76%,transparent 97%),linear-gradient(to right,transparent 0,#000 16%,#000 78%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 17%,#000 33%,#000 76%,transparent 97%),linear-gradient(to right,transparent 0,#000 16%,#000 78%,transparent 100%)}
}