/* ====== Quem Somos — MM Solution (página específica) ====== */
/* Usa tokens do seu style.css (já carregado no head.php) */
:root{
  --brand-grad: linear-gradient(90deg,var(--brand),#6ee7ff);
}

/* Seção base */
.qs-section{ padding:52px 0; }

/* HERO */
.qs-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(110,231,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.75));
}
.qs-hero .container{ padding-top:72px; padding-bottom:40px; }

.qs-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 10px; border:1px solid #ffffff1f; border-radius:999px;
  color:var(--brand-2); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:.85rem;
  backdrop-filter: blur(6px);
}
.qs-dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-grad); box-shadow:0 0 14px rgba(110,231,255,.35); }

.qs-title{ font-weight:800; font-size:clamp(28px,4.8vw,60px); line-height:1.05; margin:16px 0 12px; }
.qs-sub{ font-size:clamp(16px,1.5vw,19px); color:var(--muted); max-width:820px; }

.qs-ctas{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.qs-btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none;
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease; border:1px solid transparent;
}
.qs-btn:active{ transform:translateY(1px); opacity:.96; }
.qs-btn--primary{ background:linear-gradient(135deg,var(--brand),#5c028c); color:#111; box-shadow:0 10px 28px rgba(230,224,236,.25); }
.qs-btn--ghost{ border:1px solid #ffffff2b; color:var(--ink); background:transparent; }
.qs-btn--ghost:hover{ background:#ffffff12; }

.qs-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.qs-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  font-weight:700; color:#dbeafe; background:rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.35);
}
.qs-badge.ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#d1fae5; }
.qs-badge.w{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); color:#ffedd5; }

.qs-banner{
  margin-top:18px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(90deg, rgba(124,58,237,.2), rgba(110,231,255,.12));
  border:1px solid #ffffff26; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.qs-banner b{ font-size:1.02rem; }

/* GRID / CARDS */
.qs-grid{ display:grid; gap:22px; }
.qs-cols-3{ grid-template-columns:repeat(3,1fr); }
.qs-cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width: 960px){
  .qs-cols-3, .qs-cols-2{ grid-template-columns:1fr; }
}

.qs-card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid #ffffff14; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
}
.qs-card h3{ margin:2px 0 8px; }

.qs-muted{ color:var(--muted); }

.qs-list{ display:grid; gap:10px; margin-top:10px; }
.qs-li{ display:flex; gap:12px; }
.qs-ico{
  width:22px; height:22px; flex:0 0 22px; border-radius:8px;
  background:var(--brand-grad); filter:saturate(1.1); box-shadow:0 0 0 2px rgba(124,58,237,.2);
}

/* STATS */
.qs-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  margin-top:22px;
}
.qs-stat{
  padding:16px; border-radius:14px; border:1px solid #ffffff14;
  background:rgba(255,255,255,.02); text-align:center;
}
.qs-num{ font-weight:900; font-size:1.6rem; }
.qs-lbl{ color:var(--muted); font-size:.92rem; }

@media (max-width: 960px){
  .qs-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .qs-stats{ grid-template-columns:1fr; }
}

/* TRUST */
.qs-trust{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.qs-trust small{ color:var(--muted); }
.qs-logos{ display:flex; gap:14px; align-items:center; opacity:.9; }
.qs-logos img{ height:28px; filter:grayscale(100%) brightness(1.3); opacity:.9; }

/* PROCESSO */
.qs-h2{ margin:0 0 12px; font-size:clamp(1.3rem,3.6vw,2rem); }
.qs-steps{ counter-reset: step; }
.qs-step{
  display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid #ffffff14; border-radius:14px; padding:16px;
  position:relative;
}
.qs-step::before{
  counter-increment: step; content: counter(step);
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:999px; background:var(--brand-grad);
  color:#0b1022; font-weight:900; margin-right:4px;
}

/* FAQ */
.qs-faq{
  border:1px solid #ffffff14; border-radius:12px;
  padding:14px 16px; background:rgba(255,255,255,.02); margin-bottom:12px;
}
.qs-faq summary{ cursor:pointer; font-weight:800; }
.qs-faq p{ margin:8px 0 0; color:var(--ink); opacity:.9; }

/* ================= CTA FINAL — CENTRALIZADA ================= */

/* Faz o ÚLTIMO bloco .qs-section ocupar a viewport e centralizar o conteúdo */
.page--quem-somos .qs-section:last-of-type{
  padding:0;                     /* remove padding vertical do padrão */
  min-height:20vh;               /* ocupa boa parte da tela */
  display:grid;                  /* habilita centralização */
  place-items:center;            /* centraliza vertical e horizontal */
}

/* O container interno pode manter o limite de largura */
.page--quem-somos .qs-section:last-of-type > .container{
  width:100%;
}

/* O card em si */
.qs-foot-cta{
  margin:0 auto;                 /* centraliza dentro do container */
  text-align:center;
  padding:clamp(20px,4vw,36px);
  background:linear-gradient(180deg, rgba(110,231,255,.08), rgba(124,58,237,.08));
  border:1px solid #ffffff26;
  border-radius:18px;
  max-width:980px;               /* largura bonita para desktop */
  box-shadow:var(--shadow);
}
.qs-foot-cta h2{ margin:0 0 8px; font-size:clamp(1.4rem,4vw,2.2rem); font-weight:800; }
.qs-foot-cta p{ color:var(--muted); margin:0 0 16px; }
.qs-foot-cta .qs-btn{ margin-top:8px; }

/* Pequenos ajustes responsivos extras */
@media (max-width: 960px){
  .qs-hero .container{ padding-top:56px; padding-bottom:32px; }
  .qs-foot-cta{ max-width: 100%; }
}
/* ===== Rotator de clientes — quadro a quadro ===== */
.qs-rotator{
  position: relative;
  overflow: hidden;
  min-height: 86px;                 /* altura mínima do bloco */
  margin-top: 10px;
  /* fade nas bordas (aparecer/sumir suave) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.qs-r-card{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%) translateX(28px);   /* entra da direita */
  opacity: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #0f1a33, #0d172c);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  transition:
    opacity var(--qs-fade, 450ms) ease,
    transform var(--qs-fade, 450ms) ease;
}

.qs-r-card img{
  height: 22px; width: auto;
  filter: grayscale(1) brightness(1.25);
  opacity: .95;
}
.qs-r-card span{ font-weight: 700; font-size: .95rem; color: var(--ink); opacity: .9; }

/* Estados */
.qs-r-card.is-in{
  opacity: 1;
  transform: translate(-50%,-50%) translateX(0);
}
.qs-r-card.is-out{
  opacity: 0;
  transform: translate(-50%,-50%) translateX(-28px);  /* sai para a esquerda */
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .qs-r-card{ position: static; transform: none !important; opacity: 1 !important; }
  .qs-rotator{ -webkit-mask-image: none; mask-image: none; min-height: auto; }
}
/* Suavidade e performance do rotator */
.qs-r-card{ will-change: transform, opacity; }

/* Se quiser garantir que não há máscara escondendo nada, comente esta linha: */
/* .qs-rotator{ -webkit-mask-image:none; mask-image:none; } */
/* ===== Suavização + velocidade mais lenta do rotator ===== */
.qs-rotator{
  /* valores padrão caso o JS não setar via data-* */
  --qs-fade: 900ms;                         /* duração da transição */
  --qs-ease: cubic-bezier(.22,.61,.36,1);   /* ease-out suave (expo-like) */
  --qs-shift: 18px;                         /* distância de entrada/saída */
}

.qs-r-card{
  transition:
    opacity var(--qs-fade) var(--qs-ease),
    transform var(--qs-fade) var(--qs-ease);
  /* entra da direita com deslocamento menor (mais suave) */
  transform: translate(-50%,-50%) translateX(var(--qs-shift));
  will-change: transform, opacity;
}

.qs-r-card.is-in{
  opacity: 1; visibility: visible;
  transform: translate(-50%,-50%) translateX(0);
}

.qs-r-card.is-out{
  opacity: 0; visibility: hidden;
  transform: translate(-50%,-50%) translateX(calc(var(--qs-shift) * -1));
}

/* opcional: ainda mais “buttery” (curva S) */
/* .qs-rotator{ --qs-ease: cubic-bezier(.37,0,.63,1); } */