/* CASA CASINHA — base
   Tokens e fundamentos vindos do guia de identidade (edição 01).
   SEMPRE: papel com textura · objeto recortado sem moldura · rotações
   pequenas (±3°) · microcópia datilografada · cantos retos.
   NUNCA: card com sombra · grid de e-commerce · gradiente · badge ·
   ícone de sistema · animação de SaaS · emoji. */

:root{
  --cc-paper:      #F6F0E5;
  --cc-paper-hi:   #FFFDF7;
  --cc-tape:       #E8D9B8;
  --cc-ink:        #171717;
  --cc-red:        #E53935;
  --cc-blue:       #2878D8;
  --cc-yellow:     #F5C400;
  --cc-pink:       #E94B91;
  --cc-green:      #4F7435;
  --cc-orange:     #F27A21;
  --cc-purple:     #5C43A8;

  --cc-ink-60: rgba(23,23,23,.6);
  --cc-ink-40: rgba(23,23,23,.4);
  --cc-ink-18: rgba(23,23,23,.18);

  --cc-font-display:"Shantell Sans", "Comic Sans MS", cursive;
  --cc-font-body:"Instrument Sans", system-ui, -apple-system, sans-serif;
  --cc-font-mono:"Courier Prime", "Courier New", monospace;

  /* escala tipográfica — mobile primeiro, cresce com a tela */
  --cc-step-1:  13px;
  --cc-step-0:  16px;
  --cc-step-1b: 20px;
  --cc-step-2:  clamp(26px, 8vw, 34px);
  --cc-step-3:  clamp(32px, 11vw, 46px);
  --cc-step-4:  clamp(46px, 17vw, 76px);

  /* escala de espaço 8 / 14 / 22 / 36 / 56 / 96 */
  --cc-s1:8px; --cc-s2:14px; --cc-s3:22px; --cc-s4:36px; --cc-s5:56px; --cc-s6:96px;

  --cc-radius:0;
  --cc-line:1.5px solid var(--cc-ink-18);
  --cc-ease:cubic-bezier(.62,.05,.36,1);
  --cc-breathe:7s;
  --cc-shuffle:2.4s;

  --cc-margem:22px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* classes com display próprio ganham do [hidden] do navegador — aqui não */
[hidden]{ display:none !important; }
html{ background:var(--cc-paper); -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cc-paper);
  color:var(--cc-ink);
  font-family:var(--cc-font-body);
  font-size:var(--cc-step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--cc-yellow); color:var(--cc-ink); }

img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:var(--cc-blue); text-decoration:none; }

:focus-visible{ outline:2.5px solid var(--cc-red); outline-offset:3px; }

.so-leitor{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.defs-giz{ position:absolute; width:0; height:0; overflow:hidden; }

/* textura de papel — uma camada só, na página inteira */
.papel-textura{
  position:fixed; inset:0; width:100%; height:100%;
  opacity:.07; mix-blend-mode:multiply;
  pointer-events:none; z-index:60;
}

/* ------------------------------------------------------------- motion
   "nada fica completamente parado": respiro de ±3° em ciclos longos,
   fora de fase. Nunca movimento de interface tecnológica. */

@keyframes wob1{ 0%,100%{ transform:rotate(-2.4deg) translateY(0) } 50%{ transform:rotate(.6deg) translateY(-5px) } }
@keyframes wob2{ 0%,100%{ transform:rotate(2.1deg) translateY(-3px) } 50%{ transform:rotate(-1.4deg) translateY(3px) } }
@keyframes wob3{ 0%,100%{ transform:rotate(-.8deg) translateY(2px) } 50%{ transform:rotate(3deg) translateY(-4px) } }
@keyframes wob4{ 0%,100%{ transform:rotate(1.2deg) translateY(0) } 50%{ transform:rotate(-2.8deg) translateY(-6px) } }
@keyframes letterdance{ 0%,100%{ transform:translateY(0) rotate(var(--r)) } 50%{ transform:translateY(-3px) rotate(calc(var(--r) * -.4)) } }
@keyframes nudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(5px) } }
@keyframes papelEntrando{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:translateY(0) } }

.entra{ animation:papelEntrando .6s var(--cc-ease) both; }

/* ---------------------------------------------------------- desenhos */

.desenho{ width:100%; height:auto; overflow:visible; }

/* ------------------------------------------------------- foto do produto
   Recorte com fundo transparente, apoiado pela base — é assim que um
   objeto recortado se comporta numa colagem: ele pousa, não flutua. */

.peca-foto{
  display:block;
  width:100%; height:auto;
  object-fit:contain;
  object-position:center bottom;
}
.peca .peca-foto,
.composicao__peca .peca-foto{ width:100%; height:100%; }

/* lugar-vazio: fundo de estúdio, nunca um desenho do móvel */
.peca-foto--pendente{
  display:grid; place-items:center;
  width:100%;
  background:
    radial-gradient(120% 90% at 50% 18%, #F3EDE1 0%, #E4DCCB 58%, #D6CDB9 100%);
  border:1px solid rgba(23,23,23,.10);
}
.peca-foto__aviso{
  font-family:var(--cc-font-mono);
  font-size:11px; line-height:1.4; letter-spacing:.08em;
  text-align:center;
  color:rgba(23,23,23,.42);
}

.gesto{ overflow:visible; }
.gesto--sublinhado{ width:100%; height:7px; }
.gesto--seta{ width:26px; height:11px; }
.gesto--baixo{ width:26px; height:82px; }

/* ------------------------------------------------------------- marca */

.marca{
  font-family:var(--cc-font-display);
  font-weight:700;
  line-height:1.05;
  filter:url(#crayonSoft);
}
.marca span{ display:inline-block; }
.marca__l2{ margin-left:5px; }
.marca--tinta{ color:var(--cc-ink); }
.marca--tinta .marca__l2{ color:var(--cc-red); }

/* ---------------------------------------------------------------- topo */

.topo{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--cc-s2);
  padding:var(--cc-s2) var(--cc-margem);
  /* Opaco. Eram 92%, e os 8% que faltavam deixavam o texto passar por
     baixo da barra enquanto a página rolava — duas frases sobrepostas,
     nenhuma legível. Papel de verdade também não é translúcido. */
  background:var(--cc-paper);
  border-bottom:var(--cc-line);
}
.topo--limpo{ background:none; border-bottom:0; position:relative; }

.topo__marca{
  display:flex; align-items:center; gap:var(--cc-s1);
  text-decoration:none; color:inherit; flex:none;
}
.topo__marca .desenho{ width:22px; flex:none; }
.topo__marca .marca{ font-size:13px; line-height:1.04; }

.nav{
  display:flex; align-items:center; gap:8px;
  font-family:var(--cc-font-display);
  font-weight:600;
  font-size:14px;
  letter-spacing:.04em;
}
.nav__item{ display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:11px 0; text-decoration:none; color:var(--cc-ink); }
.nav__item .gesto--sublinhado{ height:6px; opacity:0; transition:opacity .18s var(--cc-ease); }
.nav__item[aria-current='page'] .gesto--sublinhado,
.nav__item:hover .gesto--sublinhado{ opacity:1; }
.nav__barra{ color:var(--cc-ink); opacity:.35; }

/* --------------------------------------------------------- editorial */

.faixa{ padding:0 var(--cc-margem); }

.rotulo{
  font-family:var(--cc-font-mono);
  font-size:var(--cc-step-1);
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--cc-ink);
}
.rotulo--fraco{ color:var(--cc-ink-60); }

.titulo{
  font-family:var(--cc-font-display);
  font-weight:700;
  font-size:var(--cc-step-2);
  line-height:1.15;
  margin:0;
  text-wrap:balance;
}
.titulo--grande{ font-size:var(--cc-step-3); }

.texto{
  font-size:var(--cc-step-0);
  line-height:1.65;
  margin:var(--cc-s2) 0 0;
  max-width:60ch;
  text-wrap:pretty;
}

.regua{ border:0; border-top:2px solid var(--cc-ink); margin:var(--cc-s4) 0 0; }
.regua--fina{ border-top:var(--cc-line); }

/* ------------------------------------------------- etiquetas, não botões */

.etiqueta{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--cc-s1);
  min-height:44px;
  padding:11px 24px;
  font-family:var(--cc-font-display);
  font-weight:600;
  font-size:17px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border-radius:var(--cc-radius);
  transform:rotate(-1.2deg);
  transition:transform .18s var(--cc-ease), background .18s var(--cc-ease), color .18s var(--cc-ease);
}
.etiqueta--vermelha{ background:var(--cc-red); color:var(--cc-paper); }
.etiqueta--azul{ background:var(--cc-blue); color:var(--cc-paper); }
.etiqueta--contorno{ border:2px solid var(--cc-ink); padding:9px 24px; transform:rotate(.8deg); }
.etiqueta--contorno:hover{ background:var(--cc-yellow); }
.etiqueta:hover{ transform:rotate(1deg); }
.etiqueta:active{ transform:rotate(-.4deg) translateY(1px); }

/* CTA-blob: única exceção ao canto reto */
.etiqueta--blob{
  border-radius:52% 48% 55% 45% / 60% 55% 45% 40%;
  padding:16px 30px;
  transform:rotate(-1.2deg);
}

/* filtros e tags = etiquetas de arquivo */
.arquivo{
  display:inline-flex; align-items:center; min-height:38px;
  padding:6px 13px;
  font-family:var(--cc-font-mono);
  font-size:var(--cc-step-1);
  line-height:1.2;
  border:1.5px solid var(--cc-ink);
  background:none;
  color:var(--cc-ink);
  white-space:nowrap;
  border-radius:var(--cc-radius);
  transition:background .16s var(--cc-ease), color .16s var(--cc-ease);
}
.arquivo:nth-child(odd){ transform:rotate(-1deg); }
.arquivo:nth-child(even){ transform:rotate(1.1deg); }
.arquivo[aria-pressed='true']{ background:var(--cc-ink); color:var(--cc-paper); }

/* link com sublinhado desenhado */
.link-mao{ display:inline-flex; flex-direction:column; justify-content:center;
  padding:9px 0; color:var(--cc-blue); text-decoration:none; }
.link-mao .gesto--sublinhado{ height:6px; }

/* papel colado — nota adesiva */
.nota{ position:relative; background:var(--cc-paper-hi); border:var(--cc-line); padding:18px 20px 20px; }
.nota::before{
  content:''; position:absolute; top:-11px; left:22px;
  width:60px; height:22px; background:var(--cc-tape); opacity:.85;
  transform:rotate(-8deg);
}

/* -------------------------------------------------------------- ficha */

.ficha-fundo{
  position:fixed; inset:0; z-index:200;
  background:rgba(23,23,23,.3);
  opacity:0; pointer-events:none;
  transition:opacity .24s var(--cc-ease);
}
.ficha-fundo[data-aberta]{ opacity:1; pointer-events:auto; }

.ficha{
  position:fixed; left:0; right:0; bottom:0; z-index:210;
  max-height:80svh; overflow-y:auto; overscroll-behavior:contain;
  padding:0 var(--cc-margem) calc(var(--cc-s4) + env(safe-area-inset-bottom));
  background:var(--cc-paper-hi);
  border-top:2px solid var(--cc-ink);
  border-radius:var(--cc-radius);
  transform:translateY(102%);
  visibility:hidden;
  transition:transform .32s var(--cc-ease), visibility 0s linear .32s;
}
.ficha[data-aberta]{
  transform:translateY(0);
  visibility:visible;
  transition:transform .32s var(--cc-ease), visibility 0s;
}
/* FOLHA FECHADA TEM QUE SUMIR
   `translateY(102%)` desce a folha pela própria altura — o bastante quando
   ela nasce colada no rodapé. No desktop ela nasce 36px ACIMA do rodapé, e
   aí 102% deixa justamente esses 36px aparecendo: uma faixa branca no
   canto da tela, o tempo todo, sem nada dentro. Fora do fluxo e sem
   visibility, ainda dava pra tropeçar nela com o teclado.
   Fechada agora desce a própria altura MAIS o afastamento, e some de vez. */
@media (min-width:760px){
  .ficha{
    left:auto; right:var(--cc-s4); bottom:var(--cc-s4);
    width:420px; border:2px solid var(--cc-ink); max-height:76svh;
    transform:translateY(calc(100% + var(--cc-s4) + 8px));
  }
  .ficha[data-aberta]{ transform:translateY(0); }
}

/* O fechar vive numa barra grudada no topo da ficha: role o quanto rolar,
   ele continua ali. */
.ficha__barra{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:var(--cc-s2);
  margin:0 calc(var(--cc-margem) * -1);
  padding:10px var(--cc-margem);
  background:var(--cc-paper-hi);
  border-bottom:var(--cc-line);
}
.ficha__barra .ficha__meta{ margin:0; }
.ficha__fechar{
  flex:none;
  display:inline-flex; align-items:center; gap:6px;
  min-height:40px; padding:0 4px;
  font-family:var(--cc-font-mono); font-size:var(--cc-step-1);
  color:var(--cc-ink);
}
.ficha__peca{ width:132px; margin:var(--cc-s3) 0 var(--cc-s2); }
.ficha__peca .desenho{ animation:none; }
.ficha__meta{ font-family:var(--cc-font-mono); font-size:var(--cc-step-1); line-height:1.7; margin:0 0 var(--cc-s1); }
.ficha__nome{
  font-family:var(--cc-font-display); font-weight:700;
  font-size:var(--cc-step-2); line-height:1.12; margin:0 0 var(--cc-s1);
}
.ficha__preco{ font-family:var(--cc-font-mono); font-size:17px; color:var(--cc-red); margin:0 0 var(--cc-s2); }
.ficha__desc{ font-size:var(--cc-step-0); line-height:1.65; margin:0 0 var(--cc-s3); max-width:46ch; }
.ficha__tags{ display:flex; flex-wrap:wrap; gap:var(--cc-s1); margin:0 0 var(--cc-s3); padding:0; list-style:none; }
.ficha__acoes{ display:flex; flex-wrap:wrap; gap:var(--cc-s2); align-items:center; }
.ficha__nota{ font-family:var(--cc-font-mono); font-size:12px; line-height:1.6; color:var(--cc-ink-60); margin:var(--cc-s3) 0 0; }

/* -------------------------------------------------------------- aviso */

.aviso{
  position:fixed; z-index:400; left:50%; bottom:28px;
  transform:translate(-50%,10px) rotate(-1.4deg);
  max-width:calc(100vw - 44px);
  padding:10px 20px;
  background:var(--cc-ink); color:var(--cc-paper);
  text-align:center;
  font-family:var(--cc-font-display); font-weight:600; font-size:17px;
  opacity:0; pointer-events:none;
  transition:opacity .18s var(--cc-ease), transform .18s var(--cc-ease);
}
.aviso[data-visivel]{ opacity:1; transform:translate(-50%,0) rotate(-1.4deg); }

/* com ficha ou cesta aberta, o aviso vai pro alto: embaixo ele cairia
   em cima da lista */
body[data-folha] .aviso{ top:74px; bottom:auto; transform:translate(-50%,-10px) rotate(-1.4deg); }
body[data-folha] .aviso[data-visivel]{ transform:translate(-50%,0) rotate(-1.4deg); }

/* ------------------------------------------------------------- rodapé */

.rodape{
  margin:var(--cc-s6) var(--cc-margem) 0;
  padding:var(--cc-s2) 0 calc(var(--cc-s4) + env(safe-area-inset-bottom));
  border-top:1px solid rgba(23,23,23,.2);
  font-family:var(--cc-font-mono);
  font-size:var(--cc-step-1);
  letter-spacing:.03em;
  line-height:1.8;
}
.rodape__nav{ display:flex; gap:var(--cc-s3); margin:0 0 var(--cc-s1); }
.rodape__nav a{ display:inline-flex; align-items:center; min-height:40px; color:var(--cc-ink); }
.rodape__marca{ color:var(--cc-pink); }

/* ----------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ------------------------------------------------ onde encontrar
   A célula tem duas coisas clicáveis com destinos diferentes: o corpo
   abre a ficha, o link vai pra loja. Por isso o link não vive dentro do
   botão — <a> dentro de <button> não é HTML válido nem navega direito.

   Vive aqui, e não em lista.css, porque a LISTA e o EXPLORAR usam o
   mesmo link. Altura de 44px: é o alvo mínimo que um dedo acerta sem
   pedir pontaria. */
.item__loja{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 2px;
  font-family:var(--cc-font-mono); font-size:12px;
  color:var(--cc-blue);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .18s var(--cc-ease);
}
.item__loja:hover,
.item__loja:focus-visible{ color:var(--cc-red); }