/* ============================================================
   MF 2026 — servicos.css
   Página /servicos/ — grade visual dos serviços.
   ============================================================ */

body.mf-servicos{
  --sv-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  background:var(--dark);color:var(--ink);
}
body.mf-servicos #stage-bg{background:var(--dark)}
body.mf-servicos main{display:block}
body.mf-servicos #nav{
  background:rgba(6,17,30,.94);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line-d);padding:14px 0;
}

.sv-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sv-overline{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2)}
.sv-rule{display:block;width:54px;height:1.5px;background:var(--gold2);opacity:.6;margin:18px 0 26px}

/* hero */
.sv-hero{
  padding:172px 0 64px;position:relative;
  background:
    radial-gradient(1100px 460px at 78% -8%, rgba(31,58,92,.55) 0%, transparent 62%),
    var(--navy);
  border-bottom:1px solid var(--line-d);
}
.sv-hero h1{
  font-family:var(--sv-serif);font-weight:400;
  font-size:clamp(44px,6vw,80px);line-height:1;letter-spacing:-.015em;color:var(--white);
}
.sv-lead{margin-top:22px;max-width:62ch;font-size:16.5px;line-height:1.78;color:var(--ink2)}

.sv-list{padding:64px 0 104px}

/* destaque */
.sv-feature{
  display:grid;grid-template-columns:1.15fr .85fr;
  border:1px solid var(--line-d);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(31,58,92,.28),rgba(6,17,30,.6));
  margin-bottom:34px;color:inherit;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.sv-feature:hover{transform:translateY(-4px);border-color:rgba(232,235,240,.34);box-shadow:0 34px 70px -40px rgba(0,0,0,.85)}
.sv-feature-media{position:relative;min-height:400px;overflow:hidden}
.sv-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sv-feature:hover .sv-feature-media img{transform:scale(1.04)}
.sv-feature-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,17,30,.35) 0%,rgba(6,17,30,.1) 45%,rgba(6,17,30,.92) 100%);
}
.sv-feature-body{padding:52px 52px 50px;display:flex;flex-direction:column;justify-content:center}
.sv-feature-body h2{
  font-family:var(--sv-serif);font-weight:400;font-size:clamp(28px,3vw,42px);
  line-height:1.12;color:var(--white);margin-top:8px;
}
.sv-excerpt{margin-top:16px;font-size:15px;line-height:1.75;color:var(--ink2)}

/* grade */
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sv-card{
  position:relative;display:flex;flex-direction:column;min-height:330px;
  border:1px solid var(--line-d);border-radius:15px;overflow:hidden;color:inherit;
  background:var(--navy2);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.sv-card:hover{transform:translateY(-5px);border-color:rgba(232,235,240,.36);box-shadow:0 30px 60px -38px rgba(0,0,0,.9)}
.sv-card-media{position:absolute;inset:0;z-index:0}
.sv-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.sv-card:hover .sv-card-media img{transform:scale(1.05)}
.sv-card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,17,30,.38) 0%,rgba(6,17,30,.82) 52%,rgba(6,17,30,.96) 100%);
}
.sv-card-body{position:relative;z-index:1;margin-top:auto;padding:26px 26px 28px}
.sv-num{
  display:block;font-family:var(--sv-serif);font-size:26px;line-height:1;
  color:var(--gold2);opacity:.65;margin-bottom:10px;
}
.sv-card-body h3{
  font-family:var(--sv-serif);font-weight:500;font-size:23px;line-height:1.22;color:var(--white);
}
.sv-card-body p{margin-top:10px;font-size:14px;line-height:1.65;color:var(--ink2)}
.sv-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:13px;font-weight:600;color:var(--gold-lt);
}
.sv-link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.sv-card:hover .sv-link svg,.sv-feature:hover .sv-link svg{transform:translateX(4px)}

/* cta */
.sv-cta{
  grid-column:span 2;align-self:stretch;
  padding:44px 46px;border-radius:15px;
  background:linear-gradient(135deg,rgba(31,58,92,.5),rgba(6,17,30,.9));
  border:1px solid var(--line-d);
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.sv-cta h2{font-family:var(--sv-serif);font-weight:400;font-size:clamp(26px,2.8vw,38px);color:var(--white)}
.sv-cta p{margin-top:12px;font-size:15px;color:var(--ink2);max-width:54ch}

@media (max-width:1024px){
  .sv-grid{grid-template-columns:repeat(2,1fr)}
  .sv-cta{grid-column:span 2}
  .sv-feature{grid-template-columns:1fr}
  .sv-feature-media{min-height:300px}
  .sv-feature-media::after{background:linear-gradient(180deg,rgba(6,17,30,.25),rgba(6,17,30,.9))}
  .sv-feature-body{padding:36px 32px 38px}
}
@media (max-width:720px){
  .sv-hero{padding:140px 0 52px}
  .sv-list{padding:44px 0 72px}
  .sv-grid{grid-template-columns:1fr;gap:20px}
  .sv-card{min-height:280px}
  .sv-cta{grid-column:span 1}
  .sv-cta{padding:36px 28px;flex-direction:column;align-items:flex-start}
}