/* Seções da página Quem somos (Figma: frame Quem somos 69:1457). A base comum está em css/base.css. */

.qs-colunas{margin-top:calc(60 * var(--u));display:grid;grid-template-columns:minmax(0,594fr) minmax(0,594fr);column-gap:calc(85 * var(--u))}
.qs-colunas .texto-lead + .texto-lead,.qs-faixa .texto-lead + .texto-lead{margin-top:1.64em}
.qs-numeros{margin-top:calc(101 * var(--u))}

/* ---- Faixa escura: plataforma de gestão jurídica ---- */
.qs-faixa{position:relative;margin-top:calc(93 * var(--u));min-height:calc(440 * var(--u));overflow:hidden;color:var(--branco)}
.qs-faixa-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qs-faixa::after{content:"";position:absolute;inset:0;background:var(--grafite);mix-blend-mode:multiply}
.qs-faixa-grade{
  position:relative;z-index:1;padding-top:calc(98 * var(--u));padding-bottom:calc(70 * var(--u));
  display:grid;grid-template-columns:calc(677 * var(--u)) minmax(0,594px);align-items:start;
}
.qs-faixa .qs-frase{color:var(--pessego);max-width:max(240px, calc(322 * var(--u)))}
.qs-faixa .texto-lead{color:var(--branco)}

/* ---- Duas frentes: Learn e Tech ----
   Fechada: foto + degradê na base, título embaixo.
   Aberta (hover no card): véu grafite cobre a foto, o título sobe e o texto aparece. */
.qs-frentes{padding-top:calc(87 * var(--u))}
.qs-frentes .qs-frase{max-width:calc(596 * var(--u));min-width:280px}
.frentes-grade{margin-top:calc(59 * var(--u));display:grid;grid-template-columns:repeat(2,calc(618 * var(--u)));column-gap:calc(61 * var(--u))}
.frente{
  --altura:max(320px, calc(349 * var(--u)));
  --pad:max(22px, calc(32 * var(--u)));
  position:relative;height:var(--altura);border-radius:16px;overflow:hidden;cursor:pointer;
  box-shadow:0 16px 32px -24px rgba(59,58,60,.4);color:var(--branco);outline:none;
}
.frente-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.frente-degrade{position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(0deg,#3B3A3C,rgba(59,58,60,0))}
.frente-veu{position:absolute;inset:0;background:linear-gradient(0deg,#3B3A3C,rgba(59,58,60,.76));opacity:0;transition:opacity .6s ease}
.frente-titulo{
  position:absolute;left:var(--pad);top:max(40px, calc(56 * var(--u)));
  font-family:var(--titulo-leve);font-weight:var(--peso-titulo);font-size:max(28px, calc(36 * var(--u)));line-height:47px;letter-spacing:-0.006em;
  transform:translateY(calc(var(--altura) - max(40px, calc(56 * var(--u))) - 47px - max(20px, calc(31 * var(--u)))));
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.frente-texto{
  position:absolute;left:var(--pad);right:var(--pad);bottom:max(20px, calc(31 * var(--u)));max-width:528px;
  font-size:max(15px, calc(18.5 * var(--u)));line-height:1.64;
  opacity:0;transform:translateY(24px);transition:opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.frente:hover .frente-veu,.frente:focus-visible .frente-veu,.frente.aberta .frente-veu{opacity:1}
.frente:hover .frente-titulo,.frente:focus-visible .frente-titulo,.frente.aberta .frente-titulo{transform:translateY(0)}
.frente:hover .frente-texto,.frente:focus-visible .frente-texto,.frente.aberta .frente-texto{opacity:1;transform:translateY(0);transition-delay:.12s}
.frente:hover .frente-foto,.frente.aberta .frente-foto{transform:scale(1.04)}
/* Telas de toque (sem hover) e telas estreitas: os cards já aparecem abertos,
   com altura que acompanha o texto */
@media (hover:none), (max-width:1024px){
  .frente{height:auto;min-height:var(--altura);display:flex;flex-direction:column;padding:40px var(--pad) max(20px, calc(31 * var(--u)))}
  .frente .frente-veu{opacity:1}
  .frente .frente-titulo{position:relative;left:auto;top:auto;transform:none}
  .frente .frente-texto{position:relative;left:auto;right:auto;bottom:auto;margin-top:auto;padding-top:24px;opacity:1;transform:none}
}

/* ---- Excelência + depoimentos ---- */
.qs-meio{position:relative}
.qs-meio-grafismo{position:absolute;left:calc(1108 * var(--u));top:calc(172 * var(--u));width:calc(800 * var(--u));max-width:none;height:auto;pointer-events:none}
.qs-excelencia{position:relative;padding-top:calc(164 * var(--u));display:grid;grid-template-columns:calc(579 * var(--u)) minmax(0,434px)}
.qs-excelencia .qs-frase{max-width:calc(352 * var(--u));min-width:240px}
.qs-clientes{position:relative;padding-top:calc(146 * var(--u))}
.qs-clientes-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.qs-clientes-topo .texto-lead{margin-top:calc(25 * var(--u))}
.depoimentos{margin-top:calc(45 * var(--u));overflow-x:auto;scrollbar-width:none;padding-bottom:12px}
.depoimentos::-webkit-scrollbar{display:none}
.depoimentos-trilha{display:flex;gap:calc(30 * var(--u));width:max-content}
.depoimento{position:relative;flex:none;width:max(290px, calc((min(100vw, 1920px) - var(--lateral) - var(--esq) - var(--dir) - 60 * var(--u)) / 3));aspect-ratio:404/466}
.depoimento-forma{position:absolute;left:-1%;top:0;width:102%;height:auto;max-width:none}
.depoimento-aspas{position:absolute;left:8.9%;top:13.1%;width:11.1%;height:auto}
.depoimento-texto{position:absolute;left:8.9%;right:11.6%;top:25.8%;font-size:max(15px, calc(18.5 * var(--u)));line-height:1.35;color:#000}
.depoimento-autor{position:absolute;left:8.9%;top:83.3%;display:flex;flex-direction:column;gap:2px}
.depoimento-autor strong{font-family:var(--titulo);font-weight:inherit;font-size:20px;color:#000}
.depoimento-autor span{font-family:var(--titulo-leve);font-weight:300;font-size:16px;color:#000}

/* ---- O escritório em movimento ---- */
.qs-movimento{position:relative;z-index:2;padding-top:calc(110 * var(--u))}
.qs-movimento-grafismo{position:absolute;left:calc(-359 * var(--u));top:calc(106 * var(--u));width:calc(1022 * var(--u));max-width:none;height:auto;pointer-events:none;z-index:-1}
.qs-video{
  position:relative;display:block;margin-top:calc(56 * var(--u));margin-bottom:calc(-58 * var(--u));
  aspect-ratio:1275/688;border-radius:31px;overflow:hidden;
}
.qs-video img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.qs-video::after{content:"";position:absolute;inset:0;background:rgba(59,58,60,.2)}
.qs-video-play{
  position:absolute;z-index:1;left:50%;top:50%;width:max(72px, calc(102 * var(--u)));height:max(72px, calc(102 * var(--u)));
  margin:calc(max(72px, calc(102 * var(--u))) / -2) 0 0 calc(max(72px, calc(102 * var(--u))) / -2);
  border-radius:100px;background:var(--grafite);color:var(--pessego);font-size:max(32px, calc(48 * var(--u)));
  display:flex;align-items:center;justify-content:center;padding-left:6px;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.qs-video:hover img{transform:scale(1.03)}
.qs-video:hover .qs-video-play{transform:scale(1.1)}
.qs-movimento + .rodape{padding-top:calc(58 * var(--u) + 124 * var(--u))}

/* ---- Até 1024px ---- */
@media (max-width:1024px){
  .qs-colunas,.qs-faixa-grade,.frentes-grade,.qs-excelencia{grid-template-columns:1fr;row-gap:24px}
  .qs-faixa-grade{padding-top:56px;padding-bottom:56px}
  .qs-numeros{margin-top:64px}
  .qs-faixa{margin-top:72px}
  .qs-frentes,.qs-excelencia,.qs-clientes,.qs-movimento{padding-top:80px}
  .qs-meio-grafismo,.qs-movimento-grafismo{display:none}
  .qs-clientes-topo{flex-wrap:wrap}
  .qs-video{border-radius:20px;margin-bottom:-32px}
  .qs-movimento + .rodape{padding-top:104px}
}