/* =========================================
   UTILITIES
   Pequenos ajustes pontuais, substituindo o que antes
   estava como style="" inline no HTML.
   ========================================= */
.u-no-underline { text-decoration: none; }
.u-no-underline-block { text-decoration: none; display: block; }
.u-no-underline-pointer { text-decoration: none; cursor: pointer; }
.u-mt-24 { margin-top: 24px; }
.u-mt-28 { margin-top: 28px; }
.u-w-100 { width: 100%; }

.u-delay-05 { transition-delay: 0.05s; }
.u-delay-10 { transition-delay: 0.1s; }
.u-delay-15 { transition-delay: 0.15s; }
.u-delay-20 { transition-delay: 0.2s; }
.u-delay-25 { transition-delay: 0.25s; }
.u-delay-30 { transition-delay: 0.3s; }

/* =========================================
   PLACEHOLDER DE IMAGEM DE PORTFÓLIO
   As imagens reais dos projetos ainda não existem como arquivos
   (serão geridas futuramente por um backend de portfólio).
   Este placeholder ocupa o mesmo espaço da imagem final.
   ========================================= */
.portfolio-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10; /* usado apenas quando o container pai não define uma altura própria */
  background: repeating-linear-gradient(
    45deg,
    var(--clr-bg2, #eaf2fb),
    var(--clr-bg2, #eaf2fb) 10px,
    var(--clr-border, #e2e6ec) 10px,
    var(--clr-border, #e2e6ec) 20px
  );
  border: 1px dashed var(--clr-border, #c9cfd8);
  box-sizing: border-box;
}
.portfolio-img-placeholder::after {
  content: "imagem em breve";
  font-family: var(--fonte-corpo, sans-serif);
  font-size: 12px;
  color: var(--clr-muted, #6b6b6b);
  background: rgba(255,255,255,0.85);
  padding: 4px 10px;
  border-radius: 100px;
}