/* CASA CASINHA — home */

.topo--limpo{ padding-top:var(--cc-s3); justify-content:center; }
.topo--limpo .nav{ justify-content:center; }

/* ------------------------------------------------------------- palco */

.palco{
  display:flex; flex-direction:column;
  min-height:640px;
  height:calc(100svh - 104px);
  max-height:900px;
  margin-top:var(--cc-s2);
}

/* onde as cadeiras e a logo vivem; a chamada fica fora, com ar só dela */
.palco__mesa{ position:relative; flex:1; overflow:hidden; }

.palco__cadeiras{ position:absolute; inset:0; }

.cadeira{
  position:absolute;
  transition:opacity .18s ease;
}
.cadeira .desenho{ width:100%; }

/* ------------------------------------------------------------ lockup */

.lockup{
  position:absolute; left:50%; top:47%;
  transform:translate(-50%,-50%);
  z-index:12;
  display:flex; flex-direction:column; align-items:center;
  width:100%;
  padding:0 var(--cc-margem);
  pointer-events:none;
}
.lockup a{ pointer-events:auto; }

.lockup__marca{ display:flex; align-items:center; gap:6px; }
.lockup__simbolo{ width:clamp(60px, 16vw, 104px); flex:none; }

.marca--home{
  font-size:clamp(34px, 11.4vw, 66px);
  line-height:1.14;
  letter-spacing:.02em;
  display:flex; flex-direction:column; gap:clamp(8px, 3vw, 18px);
}
.marca--home .marca__l1,
.marca--home .marca__l2{ display:flex; align-items:baseline; }
.marca__ponto{
  display:inline-block;
  width:.26em; height:.26em;
  border-radius:50%;
  background:var(--cc-yellow);
  margin-left:.32em;
  filter:url(#crayonSoft);
}

/* ---------------------------------------------------------------- lema */

.lema{
  margin:var(--cc-s3) 0 0;
  font-family:var(--cc-font-display);
  font-weight:400;
  font-size:clamp(17px, 5.2vw, 24px);
  line-height:1.45;
  text-align:center;
  color:var(--cc-ink);
  display:flex; flex-direction:column; align-items:center;
}
.lema__linha2{ display:flex; align-items:baseline; justify-content:center; gap:8px; }
.lema__grifo{ display:flex; flex-direction:column; }
.lema__grifo .gesto--sublinhado{ height:6px; }

/* --------------------------------------------------------------- role */

.role{
  display:flex; flex-direction:column; align-items:center;
  margin-top:var(--cc-s2);
  color:var(--cc-ink);
  text-decoration:none;
}
.role__seta{ display:block; }
.role__seta .gesto--baixo{ height:clamp(38px, 8vh, 66px); width:22px; }
.role__texto{
  margin-top:10px;
  font-family:var(--cc-font-display);
  font-weight:400;
  font-size:15px; line-height:1.35; letter-spacing:.02em;
  text-align:center;
}

/* ---------------------------------------------------- depois do palco */

/* ------------------------------------------------------------ chamada
   Sem balão, sem cor de fundo: só a frase em preto, respirando devagar,
   com quatro estrelinhas em volta. */

.chamada{
  position:relative;
  flex:none;
  align-self:center;
  margin:var(--cc-s2) 0 var(--cc-s3);
  padding:10px 34px;
  max-width:min(320px, 86vw);
  text-decoration:none;
  color:var(--cc-ink);
  text-align:center;
}
.chamada__texto{
  display:block;
  font-family:var(--cc-font-display); font-weight:600;
  font-size:clamp(16px, 4.4vw, 20px); line-height:1.35;
  animation:wob3 9s ease-in-out infinite;
}
.chamada__palavra{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:2px;
}
.chamada__palavra .gesto--seta{ animation:nudge 2.6s ease-in-out infinite; }
.chamada:hover .chamada__texto{ animation-play-state:paused; }

.chamada__estrelas{ position:absolute; inset:0; pointer-events:none; }
.estrelinha{
  position:absolute;
  animation:piscar 4.4s ease-in-out infinite;
}
.estrelinha--e1{ top:-10px; left:2px;   }
.estrelinha--e2{ top:12px;  left:-6px;  }
.estrelinha--e3{ top:12px;  right:-6px; }
.estrelinha--e4{ top:-10px; right:2px;  }

@keyframes piscar{
  0%,100%{ opacity:.35; transform:scale(.86) rotate(-6deg) }
  50%    { opacity:1;   transform:scale(1)   rotate(6deg)  }
}

/* ---------------------------------------------------------- publicação */

.publicacao{ padding-top:var(--cc-s5); }
.publicacao__cabeca{ border-top:2px solid var(--cc-ink); padding-top:var(--cc-s2); margin-bottom:var(--cc-s5); }
.publicacao__cabeca .titulo{ margin-top:var(--cc-s1); }
.texto--abertura{
  font-family:var(--cc-font-display); font-weight:400;
  font-size:clamp(17px, 4.8vw, 21px); line-height:1.4;
  max-width:24ch;
}

/* composição assimétrica: nada de grid */
.achados{ display:block; }

.achado{
  display:block;
  width:100%;
  margin-bottom:var(--cc-s5);
  text-align:left;
}
.achado:nth-child(3n){ margin-top:calc(var(--cc-s4) * -1); }
.achado:nth-child(4n){ margin-bottom:var(--cc-s6); }

.achado__peca{
  display:block;
  width:var(--larg);
  margin-left:var(--desl);
  transform:rotate(var(--giro));
  transition:transform .18s var(--cc-ease);
}
.achado:hover .achado__peca{ transform:rotate(0deg) translateY(-3px); }
.achado__peca .desenho{ width:100%; }

.achado__texto{
  display:block;
  margin-top:var(--cc-s2);
  margin-left:var(--deslT);
  width:min(31ch, calc(100% - var(--deslT)));
}
.achado__nome{
  display:block;
  font-family:var(--cc-font-display); font-weight:600;
  font-size:var(--cc-step-1b); line-height:1.2;
  margin-top:4px;
}
.achado__desc{
  display:block;
  font-size:15px; line-height:1.6;
  margin-top:6px;
  color:var(--cc-ink);
}
.achado__preco{
  display:block;
  font-family:var(--cc-font-mono); font-size:var(--cc-step-1);
  margin-top:8px; color:var(--cc-red);
}
.achado__preco--vago{ color:var(--cc-ink-40); }

.publicacao__fim{
  display:flex; flex-wrap:wrap; gap:var(--cc-s2); align-items:baseline;
  margin-top:var(--cc-s3);
  padding-top:var(--cc-s2);
  border-top:var(--cc-line);
}

/* ------------------------------------------------------ três caminhos */

.caminhos{ padding-top:var(--cc-s5); }
.caminhos .titulo{ margin-top:var(--cc-s2); }

.caminhos__lista{ list-style:none; margin:var(--cc-s4) 0 0; padding:0; }
.caminho{ border-top:var(--cc-line); }
.caminho:last-child{ border-bottom:var(--cc-line); }

.caminho__link{
  display:grid;
  grid-template-columns:44px 1fr;
  grid-template-areas:'num palavra' 'num grifo' 'num texto';
  gap:0 var(--cc-s2);
  padding:var(--cc-s3) 0;
  text-decoration:none; color:var(--cc-ink);
}
.caminho__num{ grid-area:num; color:var(--cc-ink-40); }
.caminho__palavra{
  grid-area:palavra;
  font-family:var(--cc-font-display); font-weight:700;
  font-size:var(--cc-step-2); line-height:1.1;
}
.caminho__link .gesto--sublinhado{ grid-area:grifo; height:7px; width:60%; }
.caminho__texto{ grid-area:texto; margin-top:8px; font-size:15px; line-height:1.6; max-width:38ch; }

/* --------------------------------------------------------- telas maiores */

@media (min-width:760px){
  .palco{ max-height:820px; height:calc(100svh - 120px); }
  .lockup{ top:46%; }
  .achados{ max-width:900px; margin:0 auto; }
  .caminho__link{ grid-template-columns:80px 1fr; }
}