.malha-spec{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:24px; align-items:start}
.spec-lista{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:15px}
.spec-lista dt{font-weight:700}
.spec-lista dd{margin:0; color:var(--grafite); font-variant-numeric:tabular-nums}
.bento{position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:72px; gap:24px; padding:24px; border-radius:24px; background-color:var(--pergaminho); background-image:linear-gradient(rgb(29 29 28/.07) 1px,transparent 1px),linear-gradient(90deg,rgb(29 29 28/.07) 1px,transparent 1px); background-size:24px 24px; background-position:23px 23px; box-shadow:var(--sombra-borda)}
.bento.ver-malha::after{content:""; position:absolute; inset:24px; z-index:6; pointer-events:none; background:repeating-linear-gradient(90deg,rgb(242 115 95/.16) 0 calc((100% - 120px) / 6),transparent calc((100% - 120px) / 6) calc((100% - 120px) / 6 + 24px))}
.mod{position:relative; border-radius:16px; padding:18px; display:grid; align-content:end; gap:4px; color:var(--tinta)}
.mod-tam{position:absolute; top:10px; right:12px; z-index:7; padding:2px 7px; border-radius:6px; background:var(--tinta); color:#FDFDFA; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; opacity:0; transition:opacity .2s var(--ease-padrao)}
.ver-malha .mod-tam{opacity:1}
.m-previa{grid-column:span 2; grid-row:span 4; background:var(--superficie); box-shadow:var(--sombra-borda); place-items:center; align-content:center}
.m-passo{grid-column:span 2; grid-row:span 2}
.m-passo .num{position:absolute; top:12px; left:18px; font-family:var(--f-display); font-variation-settings:"SOFT" 100; font-size:40px; line-height:1}
.m-passo h3{font-size:24px; line-height:1.15; letter-spacing:-.01em}
.m-passo p{font-size:14px; line-height:1.4}
.m-info{grid-column:span 3; grid-row:span 2; background:var(--superficie); box-shadow:var(--sombra-borda); grid-template-columns:auto 1fr; align-items:center; align-content:center; gap:18px}
.m-info p{font-size:15px; color:var(--grafite); line-height:1.45}
.m-previa .cola{position:absolute; right:-10px; top:26px}
@keyframes encaixa{from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1; transform:none}}
.play .mod{animation:encaixa .5s var(--ease-saida) both; animation-delay:calc(var(--i,0) * 40ms)}
.papeis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.papel{display:grid; gap:4px; align-content:start}
.papel-amostra{height:168px; border-radius:16px; margin-bottom:10px; box-shadow:var(--sombra-borda)}
.papel b{font-size:16px}
.papel p{font-size:14px; color:var(--grafite); line-height:1.45}
.quadriculado{background-color:var(--pergaminho); background-image:linear-gradient(rgb(29 29 28/.08) 1px,transparent 1px),linear-gradient(90deg,rgb(29 29 28/.08) 1px,transparent 1px); background-size:24px 24px}
.pautado{background-color:var(--superficie); background-image:linear-gradient(90deg,transparent 47px,rgb(242 115 95/.6) 47px 48.5px,transparent 48.5px),repeating-linear-gradient(180deg,transparent 0 23px,rgb(29 29 28/.09) 23px 24px)}
.liso{background:var(--superficie)}
.cartela{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:40px 24px; border-radius:24px; justify-items:center; align-items:center; background:#FFFFFF; box-shadow:var(--sombra-borda-forte)}
.ad-slot{display:inline-block}
.adesivo.circulo{width:76px; height:76px; padding:0; justify-content:center; border-radius:50%}
.adesivo.data{background:var(--damasco); font-family:var(--f-display); font-weight:500; font-size:21px; font-variation-settings:"SOFT" 100}
.adesivo.tinta-ad{background:var(--tinta); color:#FDFDFA}
.adesivo.etiqueta{background:#FFFFFF; border-radius:8px; padding:8px 14px; font-family:var(--f-display); font-weight:500; font-size:19px; font-variation-settings:"SOFT" 100}
.corte-vazio{display:grid; place-items:center; width:132px; height:38px; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--areia); font-size:12px; font-weight:700; color:var(--neblina)}

/* ==================================================================
   Coleções de adesivos (assets visuais expandidos)
   Todas as variantes reusam .cola > .adesivo: contorno branco de 2 px,
   verso de papel no hover e rotação de −8° a 8°.
   ================================================================== */

/* ---------- holográfico: iridescência dentro da faixa do céu ----------
   O ângulo do brilho é uma @property animável. Em repouso fica parado e
   sutil; no hover o brilho varre a face. A regra global de
   prefers-reduced-motion (01-base.css) já desliga a animação. */
@property --holo-ang{syntax:"<angle>"; inherits:false; initial-value:120deg}
.adesivo.holo{color:var(--tinta);
  background:
    linear-gradient(var(--holo-ang),
      rgb(255 255 255/.72) 0%,
      color-mix(in oklab,var(--mel) 82%,#fff) 16%,
      color-mix(in oklab,var(--damasco) 80%,#fff) 34%,
      color-mix(in oklab,var(--coral) 68%,#fff) 50%,
      color-mix(in oklab,var(--lavanda) 78%,#fff) 68%,
      color-mix(in oklab,var(--malva) 62%,#fff) 84%,
      rgb(255 255 255/.72) 100%),
    linear-gradient(0deg,#fff,#fff);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.75),inset 0 -2px 5px rgb(142 92 136/.28);
  transition:--holo-ang .6s var(--ease-suave)}
/* brilho especular que atravessa a face */
.adesivo.holo::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(calc(var(--holo-ang) + 78deg),transparent 38%,rgb(255 255 255/.65) 50%,transparent 62%);
  mix-blend-mode:screen; opacity:.55}
.adesivo.holo{position:relative; overflow:hidden}
@media (hover:hover){ .cola:hover > .adesivo.holo{--holo-ang:300deg} }
@keyframes holo-brilho{from{--holo-ang:60deg} to{--holo-ang:300deg}}

/* ---------- fofos (dentro da marca): tom suave, canto macio ---------- */
.adesivo.malva{background:color-mix(in oklab,var(--malva) 72%,#fff); color:var(--tinta)}
.adesivo.etiqueta-fofa{background:var(--lavanda-nevoa); border-radius:14px; padding:8px 15px;
  font-family:var(--f-display); font-weight:500; font-size:19px; font-variation-settings:"SOFT" 100; color:var(--ameixa)}
.cola:has(> .etiqueta-fofa)::after{border-radius:14px}

/* ---------- descolados (dentro da marca): gráfico, alto contraste ---------- */
.adesivo.grafite-ad{background:var(--grafite); color:#FDFDFA; box-shadow:inset 0 0 0 2px rgb(255 216 154/.9)}
.adesivo.contorno{background:var(--superficie); color:var(--tinta); box-shadow:inset 0 0 0 2px var(--tinta); font-weight:800}
.cola:has(> .contorno)::after{border-radius:999px}

/* ---------- experimentais (FORA da marca): rosa-chiclete, brilho forte ----------
   Isolados por .experimental para deixar claro que desviam do brand book. */
.experimental{position:relative}
.experimental .adesivo.chiclete{background:linear-gradient(180deg,#FF6FB5,#FF2E93); color:#fff;
  text-shadow:0 1px 1px rgb(153 0 74/.4)}
.experimental .adesivo.chiclete .cor{display:inline-block}
.experimental .adesivo.holo.forte{
  background:
    linear-gradient(var(--holo-ang),
      #ff3d7f 0%,#ff9e2c 18%,#f7ff3d 34%,#3dffb0 52%,#3d9bff 70%,#c23dff 86%,#ff3d7f 100%),
    linear-gradient(0deg,#fff,#fff);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.6),0 0 14px rgb(194 61 255/.45); color:#fff; text-shadow:0 1px 2px rgb(26 16 36/.55)}
.experimental .adesivo.holo.forte::before{opacity:.9}
@media (hover:hover){ .experimental .cola:hover > .adesivo.holo.forte{--holo-ang:320deg} }

/* ---------- vitrine das coleções ---------- */
.colecoes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.colecao{position:relative; display:grid; gap:6px; align-content:start; overflow:visible}
.colecao > b{font-size:16px; display:flex; align-items:center; gap:8px}
.colecao > .nota{margin-bottom:6px}
.colecao-slots{display:flex; flex-wrap:wrap; align-items:center; gap:20px 24px; padding:22px 8px 8px}
.tag-exp{padding:2px 8px; border-radius:999px; background:var(--coral-profundo); color:#fff; font-family:var(--f-ui); font-size:11px; font-weight:800; letter-spacing:.02em}
@media (max-width:720px){ .colecoes{grid-template-columns:1fr} }

/* ---------- figurinhas vetoriais (die-cut, estilo flat) ----------
   Peças maiores e mais acabadas que os adesivos-pílula: borda branca
   grossa, ilustração flat coral/tinta, brilhos. Continuam dentro de
   .cola, então herdam o verso de papel e o descolar no hover. */
.adesivo.fig{padding:0; background:transparent; border-radius:0;
  filter:drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff)}
.adesivo.fig svg{display:block; width:var(--fig-w,120px); height:auto}
.fig-carta svg{width:118px}
.fig-selo svg{width:132px}
.fig-badge svg{width:126px}
/* o verso de papel do .cola acompanha o recorte de cada figurinha */
.cola:has(> .fig-carta)::after{border-radius:18px; margin:2%}
.cola:has(> .fig-selo)::after{border-radius:50%; margin:2%}
.cola:has(> .fig-badge)::after{border-radius:20px; margin:2%}
.caderno-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start}
.caderno-2 .cartao{display:grid; gap:14px; align-content:start}
.caderno-2 h3{font-size:24px}
.abas-demo{display:grid; gap:14px; padding-top:6px}
.aba-linha{position:relative; height:34px}
.aba-linha::after{content:""; position:absolute; z-index:2; left:0; right:0; bottom:0; height:4px; border-radius:0 3px 3px 0; background:var(--aba); box-shadow:0 2px 4px -2px rgb(29 29 28/.32)}
.aba-linha .aba{position:absolute; bottom:4px; left:calc(12px + var(--pos) * 22%)}
.m-previa > .print-in{width:62%}
.palco-copias{display:flex; justify-content:center; align-items:center; height:216px; border-radius:12px; background:radial-gradient(130% 75% at 85% -10%,hsl(16,58%,34%),hsl(16,58%,22%) 65%)}
.palco-copias .print-in{width:100px; margin:0 -12px}
.palco-copias .print-in + .print-in{margin-top:48px}
.regras-caderno{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px}
.regras-caderno div{padding-top:14px; border-top:2px solid var(--tinta)}
.regras-caderno b{display:block; font-size:16px; margin-bottom:4px}
.regras-caderno p{font-size:14px; color:var(--grafite); line-height:1.5}
@media (max-width:960px){
  .malha-spec,.caderno-2{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento.ver-malha::after{background:repeating-linear-gradient(90deg,rgb(242 115 95/.16) 0 calc((100% - 24px) / 2),transparent calc((100% - 24px) / 2) calc((100% - 24px) / 2 + 24px))}
  .m-passo{grid-column:span 1}
  .m-info{grid-column:span 2}
  .papeis,.regras-caderno{grid-template-columns:1fr}
}
@media (max-width:560px){
  .bento{gap:12px; padding:12px}
  .m-passo{grid-column:span 2}
  .cartela{padding:28px 12px; gap:18px}
  .adesivo.circulo{width:62px; height:62px}
}