/* ==========================================================================
   PRÉVIA · PARA QUEM É
   Adaptação do componente de cards do arquivo ZIP (padrão geométrico ao fundo,
   título centralizado, imagem flutuante, botão de largura total) para a
   identidade do site: obsidiana, grafite e champanhe, Manrope + Inter.
   Carrega depois de styles.css e modelo.css.
   ========================================================================== */

.pq__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}

/* ---------- card ---------- */
.pq-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  padding:36px 30px 30px;
  border:1px solid var(--line-2);
  border-radius:18px;
  background:var(--bg);
  transition:border-color .3s var(--ease);
}
.js .pq-card.reveal{
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .3s var(--ease);
}
.pq-card:hover{ border-color:rgba(var(--accent-rgb),.5); }

/* Padrão geométrico do componente original, tingido de champanhe. */
.pq-card__pattern{
  position:absolute;
  inset:0;
  z-index:-1;
  background:url('../img/pq-pattern.png') center / cover no-repeat;
  opacity:.5;
  filter:sepia(1) saturate(2.4) brightness(1.15);
  transition:transform .3s var(--ease);
}
.pq-card:hover .pq-card__pattern{ transform:scale(1.05); }

.pq-card__head{ text-align:center; }
.pq-card__head h3{
  margin-bottom:8px;
  font-family:var(--font-head);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--white);
}
.pq-card__head p{
  max-width:300px;
  margin-inline:auto;
  font-size:13.5px;
  line-height:1.75;
  color:var(--muted);
}

/* ---------- imagem flutuante ----------
   A flutuação usa `translate` e o zoom do hover usa `scale`: propriedades
   separadas, então uma não cancela a outra. */
.pq-card__media{
  width:min(100%, 220px);
  aspect-ratio:1;
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(var(--accent-rgb),.35);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 26px 44px -26px rgba(0,0,0,.9);
  animation:pq-float 4s ease-in-out infinite;
  transition:scale .3s var(--ease), border-color .3s var(--ease);
  /* camada própria na GPU só para a flutuação: o deslocamento reaproveita a
     imagem já rasterizada. `scale` fica de fora para o zoom do hover ser
     redesenhado nítido no tamanho final. */
  will-change:translate;
}
.pq-card:hover .pq-card__media{
  scale:1.05;
  border-color:rgba(var(--accent-rgb),.6);
}
.pq-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* só um toque de contraste e cor: o sépia e a dessaturação deixavam a foto
     opaca dentro do card escuro */
  filter:contrast(1.04) saturate(1.04);
}
.pq__grid > .pq-card:nth-child(2) .pq-card__media{ animation-delay:-1.3s; }
.pq__grid > .pq-card:nth-child(3) .pq-card__media{ animation-delay:-2.6s; }

@keyframes pq-float{
  0%, 100%{ translate:0 0; }
  50%{ translate:0 -8px; }
}

/* ---------- botão ---------- */
.pq-card__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:46px;
  padding-inline:16px;
  border:1px solid var(--line-gold);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.pq-card__cta svg{ flex:none; width:16px; height:16px; color:var(--blue-bright); }
.pq-card__cta:hover{
  border-color:rgba(var(--accent-rgb),.7);
  background:rgba(var(--accent-rgb),.12);
  color:var(--white);
}

/* ---------- entrada escalonada ---------- */
.js .pq__grid > .reveal:nth-child(2){ transition-delay:.08s; }
.js .pq__grid > .reveal:nth-child(3){ transition-delay:.16s; }

/* ---------- responsivo ---------- */
@media (max-width:1023px){
  .pq__grid{ gap:16px; }
  .pq-card{ padding:30px 22px 22px; gap:24px; }
  .pq-card__media{ width:min(100%, 180px); }
}
@media (max-width:767px){
  .pq__grid{ grid-template-columns:1fr; gap:16px; }
  .pq-card{ padding:30px 24px 24px; }
  .pq-card__media{ width:min(100%, 220px); }
}

@media (prefers-reduced-motion:reduce){
  .pq-card__media{ animation:none; }
}