/* ============================================================
   UAI. — Listagem e Detalhe de Produto (MTB, Gravel, Road...).
   Reaproveita o sistema visual da landing (style.css) e os
   componentes de card da Área do Cliente (conta.css).
   ============================================================ */

.produtos-listing-hero{ padding-top:clamp(100px,14vw,140px); }

.modelo-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:24px;
}
/* EXPANSION: novos modelos de uma linha entram aqui como um .modelo-card a mais — o grid se ajusta sozinho. */

.modelo-card{
  display:flex; flex-direction:column;
  background:var(--black-2);
  border:1px solid var(--line-on-black-strong);
  border-radius:10px; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .2s ease, border-color .2s ease;
}
.modelo-card:hover{ transform:translateY(-3px); border-color:var(--on-black); }
.modelo-card img{ width:100%; height:220px; object-fit:cover; }
.modelo-card-body{ display:flex; flex-direction:column; gap:10px; padding:24px; }
.modelo-card-tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--grey-on-black);
}
.modelo-card-body h3{ font-size:26px; }
.modelo-card-body p{ color:var(--grey-on-black); font-size:14px; max-width:38ch; }

/* Placeholder para a foto do produto: quando ainda não há foto do modelo,
   este card fica vazio até alguém trocar o conteúdo por uma <img>. */
.produto-foto-vazia{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; height:320px; margin-bottom:32px;
  border:1px dashed var(--line-on-black-strong); border-radius:12px;
  color:var(--grey-on-black);
}
.produto-foto-vazia span{ font-size:32px; }
.produto-foto-vazia p{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
}

.produto-specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:640px){ .produto-specs{ grid-template-columns:1fr; } }

/* ---------- Opções configuráveis (ex.: largura interna do Gravel) ---------- */
.opcoes-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:16px; margin-top:20px;
}
.opcao-card{
  background:var(--black-2); border:1px solid var(--line-on-black-strong);
  border-radius:10px; padding:22px; display:flex; flex-direction:column; gap:8px;
}
.opcao-card h4{
  font-family:var(--font-mono); font-size:15px; letter-spacing:0.04em;
  color:var(--on-black); margin:0; text-transform:none; font-style:normal;
}
.opcao-card p{ color:var(--grey-on-black); font-size:13.5px; margin:0; }
.opcoes-nota{ margin-top:16px; font-size:13px; color:var(--grey-on-black); }

/* Variante para 5 opções lado a lado (ex.: alturas de aro) — cai para menos
   colunas em telas estreitas em vez de espremer o texto. */
.opcoes-grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:20px; }
.opcoes-grid-5 .opcao-card{ padding:16px; }
.opcoes-grid-5 .opcao-card h4{ font-size:14px; }
.opcoes-grid-5 .opcao-card p{ font-size:12.5px; }
@media (max-width:760px){ .opcoes-grid-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .opcoes-grid-5{ grid-template-columns:repeat(2,1fr); } }

/* Variante para 6 opções lado a lado (ex.: perfis de aro do Road). */
.opcoes-grid-6{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:20px; }
.opcoes-grid-6 .opcao-card{ padding:14px; }
.opcoes-grid-6 .opcao-card h4{ font-size:13.5px; }
.opcoes-grid-6 .opcao-card p{ font-size:12px; }
@media (max-width:900px){ .opcoes-grid-6{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .opcoes-grid-6{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Destaque curto de performance ---------- */
.produto-highlight{
  margin-top:40px; padding:32px; text-align:center;
  background:var(--black-2); border:1px solid var(--line-on-black-strong); border-radius:10px;
}
.produto-highlight .eyebrow{ display:block; margin-bottom:14px; }
.produto-highlight p{ font-size:16px; color:var(--on-black); max-width:52ch; margin:0 auto; }
.produto-highlight p + p{ margin-top:10px; }