/* A biblioteca de modelos (07/11/2026). O envelope vem de convite.css (.estilo-palco + .ep-*):
   aqui só a página, os filtros, o card e a visualização grande. */

.biblioteca{padding-block:clamp(40px,6vw,80px) clamp(60px,8vw,110px)}
.bib-cab h1{font-size:clamp(40px,6vw,76px); line-height:1.04; letter-spacing:-.022em; max-width:14ch; margin:0 0 18px}
.bib-cab .lead{margin:0 0 clamp(28px,4vw,44px)}

/* ---------- filtros ---------- */
.filtros{display:grid; gap:12px; padding:16px; border-radius:20px; background:var(--superficie); box-shadow:var(--sombra-borda); position:sticky; top:66px; z-index:20}
.f-linha{display:flex; align-items:center; gap:14px; min-width:0}
.f-rot{flex:none; width:56px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--pedra)}
.f-grupo{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px}
.f-grupo::-webkit-scrollbar{display:none}
.fb{flex:none; display:inline-flex; align-items:center; gap:7px; font:600 14px var(--f-ui); padding:8px 14px; border:0; border-radius:999px; cursor:pointer; background:var(--pergaminho); color:var(--grafite); box-shadow:inset 0 0 0 1px var(--linho); transition:background .25s,color .25s}
.fb:hover{color:var(--tinta)}
.fb[aria-pressed="true"]{background:var(--tinta); color:#FDFDFA; box-shadow:none}
.fb-cor i{width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 2px #fff,0 0 0 3px rgb(0 0 0/.08)}
.conta{margin:22px 0 14px; font-size:14px; color:var(--pedra)}

/* ---------- a grade ---------- */
.grade{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,26px)}
.modelo{animation:entra .6s var(--ease-saida) both; animation-delay:calc(var(--i)*50ms)}
@keyframes entra{from{opacity:0; transform:translateY(18px)}}
.modelo-btn{display:grid; gap:12px; width:100%; padding:0; border:0; background:none; text-align:left; cursor:pointer; font:inherit; color:inherit}
.modelo-info{display:grid; gap:2px; padding-inline:4px}
.modelo-info b{font-family:var(--f-display); font-weight:400; font-size:21px}
.modelo-info small{font-size:13px; color:var(--pedra)}
.vazio{text-align:center; padding:60px 0; color:var(--pedra)}

/* o envelope encolhe dentro do card: as medidas passam a ser do próprio card (cqi) */
.estilo-palco.palco-mini{container-type:inline-size; min-height:0; aspect-ratio:4/5; border-radius:22px; transition:transform .5s var(--ease-saida),box-shadow .5s}
.modelo-btn:hover .palco-mini{transform:translateY(-6px); box-shadow:0 30px 50px -30px rgb(80 50 30/.45)}
.palco-mini .ep-env{width:76%; margin-top:34%; animation:none}
.palco-mini .ep-carta{animation:none; transform:translateY(0); padding:4cqi; gap:1.4cqi}
.modelo-btn:hover .ep-carta{transform:translateY(-4%); transition:transform .6s var(--ease-saida)}
.palco-mini .ep-conv{font-size:2.2cqi; letter-spacing:.14em}
.palco-mini .ep-nomes{font-size:8.6cqi}
.palco-mini .ep-data{font-size:2.6cqi}
.palco-mini .ep-cera{--t:15cqi; font-size:4.4cqi}
.palco-mini .ep-amostras{top:4cqi; right:4cqi; gap:1cqi}
.palco-mini .ep-amostras i{width:4.4cqi; height:4.4cqi}
.palco-mini .ep-luz{animation:none}

/* fora da landing, a cena do modelo aparece sempre (lá ela depende do estilo escolhido) */
.estilo-palco:not([data-estilo-atual]) .ep-cena{opacity:1; transform:none}
.maiusc .ep-nomes,.maiusc .dt-nomes{font-weight:300; letter-spacing:-.03em; text-transform:uppercase}
.palco-mini.maiusc .ep-nomes{font-size:7cqi}

/* ---------- a visualização grande ---------- */
body.travado{overflow:hidden}
.vista{width:min(1080px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:28px; background:var(--superficie); box-shadow:0 60px 120px -40px rgb(40 20 10/.55); overflow:auto}
.vista::backdrop{background:rgb(40 26 22/.45); backdrop-filter:blur(6px)}
.vista[open]{animation:abre .5s var(--ease-saida)}
@keyframes abre{from{opacity:0; transform:translateY(24px) scale(.97)}}
.vista-caixa{position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.vista-fecha{position:absolute; z-index:5; right:14px; top:14px; width:40px; height:40px; border:0; border-radius:50%; background:rgb(255 255 255/.9); box-shadow:var(--sombra-borda); font-size:24px; line-height:1; cursor:pointer; color:var(--tinta)}
.vista-esq{padding:14px}
.vista-palco{min-height:clamp(420px,62vh,640px); height:100%; border-radius:20px}
.vista-palco .ep-amostras{right:auto; left:18px}
.vista-dir{display:flex; flex-direction:column; gap:14px; padding:clamp(22px,3vw,40px) clamp(20px,3vw,40px) clamp(22px,3vw,40px) 10px}
.vista-tag{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--rose-profundo)}
.vista-nome{font-size:clamp(32px,3.6vw,46px); line-height:1.05; margin:2px 0 0}
.vista-rot{margin:6px 0 0; font-size:13px; font-weight:700; color:var(--pedra)}
.vista-usar{align-self:flex-start; margin-top:auto}

/* o lado de dentro: a página que o convidado vê depois de abrir */
.dentro{position:relative; overflow:hidden; display:grid; gap:10px; padding:22px 20px; border-radius:18px; color:var(--tinta-c,#5B4632);
  background:radial-gradient(circle at 20% 0%,#fff,var(--papel,#FFFBF3) 55%,var(--papel2,#F2E7D6)); box-shadow:inset 0 0 0 1px rgb(0 0 0/.05),0 18px 34px -22px rgb(60 40 30/.45)}
.dt-topo{display:grid; justify-items:center; gap:4px; text-align:center; padding-bottom:12px; border-bottom:1px solid color-mix(in srgb,var(--tinta-c,#5B4632) 18%,transparent)}
.dt-topo small{font-size:10px; text-transform:uppercase; letter-spacing:.16em; opacity:.75}
.dt-nomes{display:grid; font-family:var(--f-nome); font-size:clamp(30px,3.4vw,40px); line-height:1.05}
.dt-nomes em{font-family:var(--f-display); font-style:italic; font-size:.5em}
.dt-data{font-size:13px}
.dt-bloco{display:grid; grid-template-columns:84px 1fr; align-items:center; column-gap:10px; font-size:14px}
.dt-bloco b{font-family:var(--f-display); font-weight:400; font-style:italic; font-size:16px}
.dt-paleta{grid-column:2; display:flex; gap:5px; margin-top:4px}
.dt-paleta i{width:18px; height:18px; border-radius:50%; box-shadow:0 0 0 2px #fff,0 3px 6px -2px rgb(0 0 0/.25)}
.dt-paleta i:nth-child(1){background:var(--am1)} .dt-paleta i:nth-child(2){background:var(--am2)} .dt-paleta i:nth-child(3){background:var(--am3)} .dt-paleta i:nth-child(4){background:var(--am4)}
.dt-vou{margin-top:6px; height:46px; border:0; border-radius:12px; cursor:pointer; font:700 15px var(--f-ui); color:var(--papel,#fff); background:var(--cera3,#8F6E44); box-shadow:0 8px 16px -8px var(--cera3,#8F6E44); transition:transform .15s}
.dt-vou:active{transform:scale(.98)}
.dt-vou:disabled{opacity:.85; cursor:default}
.dt-ramo{display:var(--ramo,none); justify-self:center; width:50%; height:14px; background:radial-gradient(ellipse 8px 4px at 20% 50%,#9DB687 98%,transparent),radial-gradient(ellipse 8px 4px at 40% 40%,#B9CDA4 98%,transparent),radial-gradient(circle 4px at 50% 50%,#E7B9B4 98%,transparent),radial-gradient(ellipse 8px 4px at 60% 40%,#B9CDA4 98%,transparent),radial-gradient(ellipse 8px 4px at 80% 50%,#9DB687 98%,transparent)}

@media (max-width:900px){
  .grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vista-caixa{grid-template-columns:minmax(0,1fr)}
  .vista-palco{min-height:380px}
  .vista-dir{padding:4px 18px 22px}
}
@media (max-width:560px){
  .grade{grid-template-columns:minmax(0,1fr)}
  .filtros{position:static; padding:12px}
  .f-rot{width:auto}
  .f-linha{flex-direction:column; align-items:flex-start; gap:6px}
  .f-grupo{max-width:100%}
  .vista{width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; border-radius:0}
  .vista-palco{min-height:340px}
}
@media (prefers-reduced-motion:reduce){
  .modelo,.vista[open]{animation:none}
}

/* ---------- modelos com matéria (07/11): papel com relevo, lacre de verdade, flores ---------- */
/* o papel é a foto da textura; a cor do envelope entra por cima só como sombra e luz das dobras */
.tem-textura .ep-costas{background:linear-gradient(180deg,rgb(0 0 0/.18),rgb(0 0 0/.06)),var(--textura) center/140%}
.tem-textura .ep-bolso{background:linear-gradient(180deg,rgb(255 255 255/.06),rgb(0 0 0/.08)),var(--textura) 30% 60%/140%}
.tem-textura .ep-aba{background:linear-gradient(0deg,rgb(0 0 0/.12),transparent),var(--textura) 70% 20%/140%}
.ep-lacre{position:absolute; left:50%; top:64%; z-index:3; width:24%; transform:translate(-50%,-50%) rotate(-4deg); filter:drop-shadow(0 6px 8px rgb(60 40 20/.35))}
.ep-flores{position:absolute; z-index:4; pointer-events:none; filter:drop-shadow(0 14px 16px rgb(40 30 20/.3))}
.ep-flores[data-f="calla"]{width:62%; left:-24%; top:-30%; transform:rotate(-8deg)}
.ep-flores[data-f="tulipa"]{width:44%; right:-14%; bottom:-24%; transform:rotate(12deg) scaleX(-1)}