/* ══ Páginas de serviço (compartilhado pelas 9) ══
   Hero centrado com imagem escura + cone de luz, cartões de vidro com imagem,
   lista numerada, logos de clientes, processo e CTA. Sem efeitos novos: os botões
   usam o .btn padrão do site. */
:root { --sv-ease: cubic-bezier(.22, 1, .36, 1); --sv-pop: cubic-bezier(.34, 1.56, .64, 1); }

.glass { position: relative; isolation: isolate; border-radius: 22px;
  background: linear-gradient(140deg, rgba(255,255,255,.1), rgba(255,255,255,.03) 55%, rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 56px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }

/* ── Hero centrado ────────────────────────────────────────────────────────── */
.sv-hero { position: relative; overflow: hidden; background: #07080a; text-align: center;
  padding-block: clamp(7rem, 15vh, 10rem) clamp(3.5rem, 8vh, 5.5rem); }
.sv-hero__bg { position: absolute; inset: 0; }
.sv-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; display: block; opacity: .85; }
.sv-hero__scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 70% at 50% 46%, rgba(7,8,10,.82), rgba(7,8,10,.35) 70%, rgba(7,8,10,.1)),
              linear-gradient(to bottom, rgba(7,8,10,.55), transparent 28%, transparent 70%, #07080a); }
.sv-cone { position: absolute; left: 50%; top: 0; width: min(900px, 90vw); height: 58%; margin-left: calc(min(900px, 90vw) / -2); pointer-events: none; filter: blur(28px);
  background: linear-gradient(to bottom, rgba(255,255,255,.1), rgba(255,255,255,0) 90%); clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%); }
.sv-hero__in { position: relative; z-index: 2; max-width: 940px; }
.sv-hero h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.06; margin-top: .9rem; text-wrap: balance; }
.sv-hero h1 em { font-style: normal; color: var(--red-lit); }
.sv-lead { margin: 1.1rem auto 0; max-width: 74ch; color: #cdd1d6; font-size: clamp(.98rem, 1.4vw, 1.1rem); text-wrap: balance; }
.sv-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.8rem; }
.sv-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.sv-facts li { padding: .42rem .95rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #d3d7dc; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }

/* ── Seções ──────────────────────────────────────────────────────────────── */
.sv-center { text-align: center; margin-inline: auto; }
.sv-center p { margin-inline: auto; }
.sv-center h2 { text-wrap: balance; }
.sv-gap { margin-top: clamp(2.8rem, 6vw, 4.5rem); }

/* cartões de tipo: imagem no topo, grelha 2 × 2 alinhada */
.sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1rem; }
.sv-card { overflow: hidden; display: flex; flex-direction: column; transition: border-color .35s ease, transform .6s var(--sv-ease); }
.sv-card:hover { border-color: rgba(255,255,255,.3); transform: translateY(-4px); }
.sv-card__img { aspect-ratio: 3 / 2; overflow: hidden; background: #0d0f12; }
.sv-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--sv-ease); }
.sv-card:hover .sv-card__img img { transform: scale(1.05); }
.sv-card__b { padding: 1.3rem 1.4rem 1.5rem; }
.sv-card__b span { font: 700 .72rem var(--f-display); letter-spacing: .14em; color: var(--red-lit); }
.sv-card__b h3 { margin-top: .45rem; font-size: 1.25rem; }
.sv-card__b p { margin-top: .5rem; font-size: .9rem; color: #b6bbc2; }

/* benefícios: lista numerada em duas colunas, sobre fundo claro */
.sv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); counter-reset: b; }
.sv-list li { counter-increment: b; display: flex; gap: 1.1rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--paper-line); font-size: 1rem; color: #17191c; }
.sv-list li::before { content: counter(b, decimal-leading-zero); flex: none; font: 700 .8rem var(--f-display); letter-spacing: .08em; color: var(--red); }

/* processo em 4 colunas */
.sv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: s; }
.sv-steps article { counter-increment: s; padding: 1.4rem 1.3rem 1.5rem; }
.sv-steps article::before { content: counter(s, decimal-leading-zero); display: block; font: 700 .8rem var(--f-display); letter-spacing: .1em; color: var(--red-lit); margin-bottom: .7rem; }
.sv-steps h3 { font-size: 1.05rem; }
.sv-steps p { margin-top: .45rem; font-size: .88rem; color: #aab0b8; }
.sv-steps a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.sv-logos { max-width: 980px; margin-inline: auto; }
.sv-related { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.4rem; }
.sv-related a { padding: .6rem 1.1rem; border-radius: 999px; font-size: .84rem; font-weight: 600; color: #fff; text-decoration: none; transition: border-color .3s ease, background .3s ease; }
.sv-related a:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); }
.sv-faqmore { display: flex; justify-content: center; margin-top: 2rem; }

@media (max-width: 900px) {
  .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .sv-grid, .sv-list { grid-template-columns: 1fr; }
  .sv-steps { grid-template-columns: 1fr; }
  .sv-hero__bg img { object-position: 86% center; }
  .sv-cone { opacity: .5; width: 140vw; margin-left: -70vw; }
}
@media (prefers-reduced-motion: reduce) { .sv-card, .sv-card__img img { transition: none; } }

/* héroes de exposição média/clara: véu mais leve, a foto continua legível */
.sv-hero--bright .sv-hero__bg img { opacity: 1; }
.sv-hero--bright .sv-hero__scrim {
  background: radial-gradient(ellipse 60% 66% at 50% 46%, rgba(7,8,10,.74), rgba(7,8,10,.44) 70%, rgba(7,8,10,.16)),
              linear-gradient(to bottom, rgba(7,8,10,.5), transparent 26%, transparent 74%, #07080a); }
.sv-hero--bright .sv-cone { opacity: .35; }
.sv-hero--bright .sv-facts li { background: rgba(7,8,10,.62); border-color: rgba(255,255,255,.22); color: #eef0f2; }