/* =========================================================
   Página SERVIÇOS , layout das demonstrações
   (usa as variáveis e classes de style.css)
   ========================================================= */

.svc-hero{ padding:clamp(110px,16vh,180px) var(--pad) 30px; text-align:center; max-width:900px; margin:0 auto; }
.svc-hero h1{ font-size:clamp(2.4rem,5.4vw,4rem); line-height:1.05; letter-spacing:-.03em; font-weight:800; margin:18px 0 0; }
.svc-hero__lead{ max-width:56ch; margin:26px auto 0; font-size:clamp(1.05rem,1.7vw,1.25rem); color:#d6d8de; }
.svc-hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

.svc-list{ max-width:var(--maxw); margin:0 auto; padding:clamp(30px,5vh,60px) var(--pad); display:flex; flex-direction:column; gap:clamp(48px,8vh,110px); }

.svc{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,72px); align-items:center; }
.svc:nth-child(even) .svc__demo{ order:2; }
/* ao chegar por link vindo dos cards da home: nao ficar sob o menu fixo e sinalizar o alvo */
.svc[id]{ scroll-margin-top:104px; }
.svc:target .svc__demo{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(157,182,214,.18), 0 24px 70px rgba(0,0,0,.5); }
.svc:target .svc__price{ color:var(--text); }

.svc__demo{ position:relative; border-radius:22px; background:#0b0e14; border:1px solid var(--line-strong);
  overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.svc__demo::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(157,182,214,.35), transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.svc__demo img{ display:block; width:100%; height:auto; aspect-ratio:300/170; }
.svc__demo--flag{ border-color:var(--accent); }
.svc__ribbon{ position:absolute; top:14px; left:14px; z-index:3; font-size:.66rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 12px; border-radius:100px; background:var(--frevo); color:#0b1220; }

.svc__body{ display:flex; flex-direction:column; align-items:flex-start; }
.svc__price{ display:inline-flex; align-items:baseline; gap:8px; font-size:1.4rem; font-weight:750; letter-spacing:-.02em;
  color:var(--accent); margin:0 0 10px; }
.svc__price small{ font-size:.85rem; font-weight:500; color:var(--muted); }
.svc__title{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0 0 14px; }
.svc__text{ color:var(--muted); font-size:1.05rem; line-height:1.6; margin:0 0 22px; max-width:48ch; }
.svc__deliver{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:0 0 26px; }
.svc__deliver li{ position:relative; padding-left:28px; color:#d6d8de; font-size:1rem; }
.svc__deliver li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; }

.svc-final{ text-align:center; padding:clamp(70px,12vh,130px) var(--pad); border-top:1px solid var(--line); max-width:760px; margin:0 auto; }
.svc-final__title{ font-size:clamp(1.8rem,4vw,2.8rem); font-weight:700; letter-spacing:-.025em; margin:0 0 14px; }
.svc-final__text{ color:var(--muted); font-size:1.1rem; margin:0 0 30px; }

@media (max-width:820px){
  .svc{ grid-template-columns:1fr; gap:28px; }
  .svc:nth-child(even) .svc__demo{ order:0; }
  .svc__demo{ max-width:520px; }
}