/* =========================================================
   SERVIÇOS — "O que ofereço?"
   Bloco com fundo próprio e 4 cards com ilustração animada.
   ========================================================= */

#services { background: var(--services-bg); border: 1px solid var(--border); border-radius: 2rem; margin: 0 2rem; padding: 5rem; }
.services-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4rem; }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* 4 cards em 2×2 */
.service-card {
  background: var(--mid); border: 1px solid var(--border);
  border-radius: 1.5rem; padding: 2rem;
  transition: border-color .2s ease, transform .2s var(--ease-out);
}
.service-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.service-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.75rem; }
.service-card p { font-size: 0.85rem; color: var(--gray); line-height: 1.7; margin-bottom: 1.5rem; }

@media (max-width: 900px) {
  #services { margin: 0; border-radius: 0; padding: 4rem 2rem; }
  .services-grid { grid-template-columns: 1fr; }
  .services-header { flex-direction: column; align-items: flex-start; gap: 2rem; }
}

/* ---------- rack 3D interativo (js/servicos-3d.js) ---------- */
.rack3d {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 1.5rem;
  margin-bottom: 1.5rem; padding: 1rem 2rem 1rem 1rem; border-radius: 1.8rem;
  background: var(--glass-tint); border: 1px solid var(--glass-line); box-shadow: var(--glass-shine), var(--glass-shadow);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
}
.rack3d.sem-3d { display: none; }
.rack3d-palco { position: relative; height: 460px; }
.rack3d-palco canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y;
  opacity: 0; transition: opacity .25s var(--ease-out);
}
.rack3d-palco canvas.is-pronto { opacity: 1; }
.rack3d-palco canvas.sobre-gaveta { cursor: pointer; }
.rack3d-palco canvas.arrastando { cursor: grabbing; }
.rack3d-dica { color: var(--gray); font-size: 1rem; line-height: 1.45; letter-spacing: -.01em; margin-bottom: 1.1rem; }
.rack3d-dica-toque { display: none; }
.rack3d-lista { list-style: none; display: grid; gap: .3rem; }
.rack3d-lista button {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1.2rem; align-items: center; gap: .5rem; width: 100%; padding: .75rem .8rem;
  color: var(--cream); font: inherit; font-size: .98rem; font-weight: 500; letter-spacing: -.012em; text-align: left;
  background: none; border: 0; border-radius: .9rem; cursor: pointer;
  transition: background-color .15s ease, scale 160ms var(--ease-out);
}
.rack3d-num { color: var(--gray); font-family: var(--mono); font-size: .78rem; font-weight: 400; }
.rack3d-seta { color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s var(--ease-out); }
.rack3d-lista button.is-ativo { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.rack3d-lista button.is-ativo .rack3d-num { color: var(--accent); }
.rack3d-lista button.is-ativo .rack3d-seta { opacity: 1; transform: none; }
.rack3d-lista button:active { scale: .97; }
.rack3d-lista button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.perf-low .rack3d { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
@media (max-width: 760px), (pointer: coarse) {
  .rack3d { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
  .rack3d-dica-mouse { display: none; }
  .rack3d-dica-toque { display: block; }
}
@media (max-width: 900px) {
  .rack3d { grid-template-columns: 1fr; padding: .5rem 1.25rem 1.25rem; gap: .5rem; }
  .rack3d-palco { height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  .rack3d-lista button, .rack3d-seta { transition: none; }
  .rack3d-seta { transform: none; }
  .rack3d-lista button:active { scale: none; }
}