/* =========================================================
   NEO ARTE — Páginas de Cliente
   ========================================================= */

/* HERO DO CLIENTE */
.cliente-hero{
  padding:120px 0 60px;
  background:linear-gradient(160deg,var(--bg) 0%,var(--bg-3) 60%,var(--bg) 100%);
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.cliente-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 800px 400px at 80% 50%,rgba(20,184,166,.12),transparent 70%);
}
.cliente-hero-inner{
  display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;
  position:relative;z-index:1;
}
.cliente-logo-wrap{
  width:200px;height:200px;border-radius:28px;
  background:var(--surface);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  flex-shrink:0;
}
.cliente-logo-wrap img{width:170px;height:auto;object-fit:contain}
.cliente-hero-info{}
.cliente-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(20,184,166,.12);border:1px solid var(--border-strong);
  padding:6px 14px;border-radius:50px;font-family:var(--font-head);
  font-size:12px;font-weight:600;color:var(--teal-bright);letter-spacing:.5px;
  margin-bottom:14px;
}
.cliente-nome{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;letter-spacing:-.5px;margin-bottom:12px}
.cliente-desc{color:var(--text-soft);max-width:600px;margin-bottom:24px;font-size:.97rem}
.cliente-back{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-head);font-size:13px;color:var(--text-dim);
  transition:var(--transition);
}
.cliente-back:hover{color:var(--teal-bright)}
.cliente-back svg{width:16px;height:16px}

/* SERVIÇOS REALIZADOS */
.servicos-realizados{padding:50px 0}
.sr-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.sr-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 14px;text-align:center;
  transition:var(--transition);
}
.sr-card:hover{border-color:var(--border-strong);transform:translateY(-4px)}
.sr-icon{
  width:52px;height:52px;border-radius:14px;
  background:rgba(20,184,166,.12);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.sr-icon svg{width:26px;height:26px;color:var(--teal-bright)}
.sr-label{font-family:var(--font-head);font-size:13px;font-weight:600;color:var(--text)}
.sr-sublabel{font-size:11px;color:var(--text-dim);margin-top:3px}

/* PROJETOS */
.projetos-section{padding:0 0 60px}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;transition:var(--transition);
}
.proj-card:hover{border-color:var(--border-strong);transform:translateY(-5px);box-shadow:var(--shadow)}
.proj-img{aspect-ratio:4/3;overflow:hidden}
.proj-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.proj-card:hover .proj-img img{transform:scale(1.05)}
.proj-info{padding:18px}
.proj-tipo{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);font-size:11px;font-weight:600;color:var(--teal-bright);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;
}
.proj-tipo svg{width:14px;height:14px}
.proj-title{font-size:1rem;font-weight:700;margin-bottom:6px}
.proj-desc{color:var(--text-dim);font-size:13px}

/* STATS DO CLIENTE */
.cliente-stats{
  background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:40px 0;margin-bottom:50px;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-item{text-align:center}
.stat-value{font-family:var(--font-head);font-size:30px;font-weight:900;color:var(--teal-bright)}
.stat-label{font-size:13px;color:var(--text-dim);margin-top:5px}

/* CTA BOTTOM */
.cliente-cta{
  background:linear-gradient(135deg,rgba(20,184,166,.1),rgba(13,148,136,.05));
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  padding:50px;text-align:center;margin:0 0 60px;
}
.cliente-cta h3{font-size:1.6rem;margin-bottom:12px}
.cliente-cta p{color:var(--text-soft);margin-bottom:28px;max-width:500px;margin-left:auto;margin-right:auto}

/* RESPONSIVO CLIENTES */
@media(max-width:768px){
  .cliente-hero-inner{grid-template-columns:1fr;gap:28px}
  .cliente-logo-wrap{width:140px;height:140px;border-radius:20px}
  .cliente-logo-wrap img{width:120px}
  .sr-grid{grid-template-columns:repeat(3,1fr)}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .cliente-cta{padding:32px 20px}
}
@media(max-width:480px){
  .proj-grid{grid-template-columns:1fr}
  .sr-grid{grid-template-columns:repeat(2,1fr)}
}

/* Fix cliente-back link visibility */
.cliente-back {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 13px;
  color: var(--text-dim);
  transition: var(--transition);
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  margin-bottom: 20px;
}
.cliente-back:hover { color: var(--teal-bright) !important; }

/* ===== BACK LINK FIX - z-index above ::before overlay ===== */
.cliente-back {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: #2dd4bf;
  transition: all .2s ease;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  margin-bottom: 20px;
  position: relative;
  z-index: 5;
  padding: 8px 16px;
  border: 1px solid rgba(45,212,191,0.2);
  border-radius: 10px;
  background: rgba(45,212,191,0.06);
}
.cliente-back:hover {
  color: #fff !important;
  background: rgba(45,212,191,0.15);
  border-color: rgba(45,212,191,0.4);
}
.cliente-back svg { width: 16px; height: 16px; }