/* A caixa da trilogia em 3D (página Sementinhas): a caixa abre aos poucos com o mouse ou num toque,
   e de dentro saem os três livros e o estojo de canetinhas. As faces são montadas em caixa.js. */
.caixa-sec{position:relative;overflow:hidden;padding-top:clamp(32px,5vw,64px)}
.caixa-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 30% 52%,rgba(235,177,94,.22),rgba(235,177,94,0) 70%)}
.caixa-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-areas:"palco cabeca" "palco lista";column-gap:clamp(24px,4vw,64px);align-content:center}
.caixa-cabeca{grid-area:cabeca;align-self:end}
.caixa-cabeca .sec-sub{margin-bottom:0}
.cx-palco-wrap{grid-area:palco;align-self:center}
.caixa-lista{grid-area:lista;align-self:start}

/* o palco: perspectiva própria; a cena é desenhada em 680 x 680 e escala com a largura (--k) */
.cx-palco-wrap{position:relative}
.cx-palco{position:relative;width:100%;max-width:min(680px,calc((100svh - 150px) * .895));margin-inline:auto;aspect-ratio:680/760;cursor:grab;outline:none;
  perspective:calc(var(--k,1) * 2100px);perspective-origin:50% 42%;-webkit-tap-highlight-color:transparent;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cx-palco.cx-girando{cursor:grabbing}
.cx-palco:focus-visible{box-shadow:0 0 0 3px var(--canvas),0 0 0 5px var(--accent);border-radius:18px}
.cx-cena{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:scale(calc(var(--k,1) * var(--cz,1))) translateY(var(--cy,0px))}
.cx-cena *{transform-style:preserve-3d}
.cx-cena .cx-face,.cx-cena .cx-face *{transform-style:flat}
.cx-mundo,.cx-tampa,.cx-aba,.cx-obj{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.cx-face{position:absolute;left:0;top:0;display:block;transform-origin:0 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-size:100% 100%;background-repeat:no-repeat;background-color:#f3e6c9;box-shadow:inset 0 0 0 999px rgba(28,18,8,var(--sombra,0))}
/* bordas do papelão e sombra na mesa */
.cx-borda{background:linear-gradient(90deg,#e6d3ad,#f1e3c4 50%,#e2cda4)}
.cx-chao{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(70,44,18,.42),rgba(70,44,18,.18) 55%,rgba(70,44,18,0))}

/* livros: capa, contracapa, lombada e o miolo de papel */
.cx-livro .cx-miolo{background:repeating-linear-gradient(90deg,#fbf6ea 0 1.5px,#e9dfc8 1.5px 2.6px);background-color:#f6efdf}
.cx-livro .cx-miolo-h{background:repeating-linear-gradient(180deg,#fbf6ea 0 1.5px,#e9dfc8 1.5px 2.6px);background-color:#f6efdf}

/* estojo de tecido preto com as tampinhas coloridas aparecendo em cima */
.cx-estojo .cx-face{background-color:#1c1b1f;background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(160deg,#2c2a30,#141317);background-size:auto}
.cx-estojo .cx-frente::before{content:"";position:absolute;inset:7% 7% 7% 7%;border:1.5px dashed rgba(255,255,255,.22);border-radius:6px}
.cx-estojo .cx-frente::after{content:"";position:absolute;left:0;right:0;top:3%;height:4%;background:repeating-linear-gradient(90deg,#8b8a90 0 3px,#4a494e 3px 6px);opacity:.8}
.cx-etiqueta{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);padding:5px 10px 4px;border-radius:5px;background:#f5ecdc;text-align:center;white-space:nowrap;
  font:700 22px/1 var(--f-display);color:#22301f;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.cx-etiqueta small{display:block;margin-top:3px;font:500 9px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#b5532d}
.cx-tampinhas{position:absolute;inset:9% 4%;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(4,1fr);gap:9% 3%}
.cx-tampinhas i{display:block;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.65),rgba(255,255,255,0) 38%),var(--c);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),0 1px 0 rgba(0,0,0,.5)}

/* o texto ao lado: o que vem dentro e o caminho escrito na tampa */
.caixa-cabeca .h2{max-width:14ch}
.cx-dica{margin:14px 0 0;text-align:center;font:500 .74rem/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);transition:opacity .5s}
.cx-dica .toque{display:none}
@media (hover:none){.cx-dica .mouse{display:none}.cx-dica .toque{display:inline}}
.cx-dica svg{display:inline-block;width:16px;height:16px;margin:-3px 6px 0 0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cx-volta{position:absolute;right:4px;bottom:44px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 11px;border:0;border-radius:999px;cursor:pointer;
  background:#fffbf3;color:var(--green);box-shadow:0 0 0 1.5px rgba(53,72,51,.18),0 6px 16px rgba(60,40,20,.12);font:600 .86rem/1 var(--f-text);transition:transform .3s var(--ease-out)}
.cx-volta[hidden]{display:none}
.cx-volta:hover{transform:translateY(-2px)}
.cx-volta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cx-volta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx-rotulo{margin:28px 0 12px;font:500 .72rem/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.cx-itens{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cx-itens li{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(245,236,220,.55);
  border:1.5px solid transparent;transition:background .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.cx-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fffbf3;border:2px dashed rgba(181,83,45,.45);
  font:500 .9rem/1 var(--f-mono);color:var(--accent);transition:background .5s,color .5s,border-color .5s}
.cx-itens small{display:block;margin-bottom:3px;font:500 .68rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cx-itens strong{display:block;font:700 1.12rem/1.2 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--green)}
.cx-itens li.saiu{background:#fffbf3;border-color:rgba(181,83,45,.28);transform:translateX(6px)}
.cx-itens li.saiu .cx-num{background:var(--accent);border-color:var(--accent);border-style:solid;color:#fffbf3}
.cx-caminho{margin-top:26px;padding:18px 20px 16px;border-radius:16px;background:#fffbf3;border:2px dashed rgba(53,72,51,.22);transition:opacity .6s,transform .6s var(--ease-out)}
.cx-caminho .cx-psiu{margin:0 0 10px;font:800 1.3rem/1.15 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--accent)}
.cx-caminho ol{margin:0;padding:0;list-style:none;counter-reset:passo;display:grid;gap:6px}
.cx-caminho li{counter-increment:passo;display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:baseline;font-size:1rem;line-height:1.35;color:var(--text-primary)}
.cx-caminho li::before{content:counter(passo);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sun);font:500 .72rem/1 var(--f-mono);color:#22301f;transform:translateY(-1px)}

@media (max-width:900px){
  .caixa-grid{grid-template-columns:1fr;grid-template-areas:"cabeca" "palco" "lista";row-gap:8px}
  .cx-palco-wrap{margin-top:clamp(40px,9vw,64px)}
  .cx-palco{max-width:min(560px,calc((100svh - 120px) * .895))}
}
@media (prefers-reduced-motion:reduce){
  .cx-itens li,.cx-caminho{transition:none}
}

/* a mesma caixa na página do Cine, que é noturna */
.caixa-noite{margin:0 0 clamp(48px,7vw,96px);padding:0;overflow:visible}
.caixa-noite::before{inset:-10% -20%;background:radial-gradient(ellipse 50% 50% at 30% 52%,rgba(240,163,127,.14),rgba(240,163,127,0) 70%)}
.caixa-noite .cx-chao{background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,.25) 55%,rgba(0,0,0,0))}
.caixa-noite .cx-dica{color:#f0a37f}
.caixa-noite .cx-rotulo{color:#bdb4a0}
.caixa-noite .cx-caminho{background:rgba(251,243,227,.05);border-color:rgba(246,201,138,.3)}
.caixa-noite .cx-caminho .cx-psiu{color:#f6c98a}
.caixa-noite .cx-caminho li{color:#e9e1cf}
.caixa-noite .cx-palco:focus-visible{box-shadow:0 0 0 3px #0a1022,0 0 0 5px #f0a37f}