/* Páginas de serviço (servicos/ e en/services/). */

body.page-service{
  --paper:#061631; --paper-2:rgba(255,255,255,0.04);
  --ink:#F4F6FB; --muted:#AEBBD6; --line:rgba(255,255,255,0.12);
  --navy-600:#8DB0F5; --gold-700:#D9A94D;
  background:
    radial-gradient(55% 45% at 88% 8%, rgba(76,141,255,.2), rgba(76,141,255,0) 70%),
    radial-gradient(45% 40% at 6% 92%, rgba(27,77,166,.32), rgba(27,77,166,0) 70%),
    radial-gradient(rgba(141,176,245,.14) 1px, transparent 1.2px) 0 0 / 26px 26px,
    linear-gradient(165deg, #071739 0%, #050F28 55%, #030A1C 100%);
  background-attachment:fixed;
}
/* Serviços de SEO: fundo próprio, em camada fixa (background-attachment:fixed falha no iOS). */
body.fundo-seo{background:#030A1C;}
body.fundo-seo::before{content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(3,10,28,.68), rgba(3,10,28,.68)), url("../assets/images/fundo-seo.webp") center / cover no-repeat;}
.page-service .page-hero h1{max-width:820px; color:#FFFFFF;}
.trilha{display:flex; flex-wrap:wrap; gap:6px 8px; color:var(--muted); font-size:.84rem;}
.trilha a{color:var(--navy-600);}
.trilha a:hover{text-decoration:underline; text-underline-offset:3px;}
.page-service .page-hero .wrap{max-width:calc(860px + 56px); margin-left:max(0px, calc((100vw - var(--wrap)) / 2));}
.page-service .page-hero h1{margin-top:18px;}
.page-service .lede{max-width:none; font-size:1.08rem; line-height:1.7;}
.page-service .serv-intro{margin-top:14px;}
.page-hero .serv-cta{display:inline-block; margin-top:26px; background:var(--gold-600); border-color:var(--gold-600); color:#1B1200;}
.page-hero .serv-cta:hover{background:var(--gold-400);}

.serv-corpo{padding:16px 0 40px;}
.serv-corpo .wrap{max-width:calc(860px + 56px); margin-left:max(0px, calc((100vw - var(--wrap)) / 2));}
.serv-bloco{margin-bottom:48px; scroll-margin-top:24px;}
.serv-bloco h2{font-size:clamp(1.4rem, 2.6vw, 1.85rem); color:#FFFFFF; max-width:none;}
.serv-bloco p, .serv-bloco li{color:#C9D4EA; font-size:1.05rem; line-height:1.75;}
.serv-bloco p{margin:14px 0 0;}
.serv-bloco ul{margin:14px 0 0; padding-left:22px;}
.serv-bloco li{margin-bottom:8px;}
.serv-bloco li strong{color:var(--ink);}
.serv-bloco a{color:var(--navy-600); text-decoration:underline; text-underline-offset:3px;}
.serv-lista{list-style:none; counter-reset:serv; margin:20px 0 0; padding:0; display:grid; gap:12px;}
.serv-lista li{
  counter-increment:serv; position:relative; margin:0; padding:18px 20px 18px 66px;
  border:1px solid var(--line); border-radius:12px; background:var(--paper-2);
}
.serv-lista li::before{
  content:counter(serv); position:absolute; left:20px; top:18px; width:30px; height:30px; display:grid; place-items:center;
  border-radius:50%; background:rgba(217,169,77,.16); color:var(--gold-700); font-family:'Doppio One', system-ui, sans-serif; font-size:.95rem;
}
.serv-lista strong{display:block; margin-bottom:4px; color:#FFFFFF;}
.serv-destaque{
  margin-top:22px !important; padding:18px 22px; border-left:3px solid var(--gold-600); border-radius:0 12px 12px 0;
  background:var(--paper-2); color:#FFFFFF !important; font-family:'Doppio One', system-ui, sans-serif; font-size:1.15rem !important; line-height:1.45 !important;
}

.serv-figura{margin:22px 0 26px;}
.serv-figura picture{display:block;}
.serv-figura img{display:block; width:100%; height:auto; border-radius:14px; border:1px solid var(--line);}
.serv-figura figcaption{margin-top:10px; color:var(--muted); font-size:.88rem; line-height:1.5;}

.serv-fim{padding:8px 0 100px;}
.serv-fim .final h2{max-width:720px;}
.serv-outros-titulo{margin-top:64px; font-size:clamp(1.35rem, 2.4vw, 1.7rem); color:#FFFFFF;}
.serv-grade{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:20px;}
.serv-card{display:flex; flex-direction:column; gap:10px; padding:24px 22px; border-radius:var(--radius); border:1px solid var(--line); background:var(--paper-2); transition:border-color .2s ease, transform .2s ease;}
.serv-card:hover{border-color:var(--navy-600); transform:translateY(-2px);}
.serv-card strong{color:#FFFFFF; font-size:1.08rem;}
.serv-card span{color:var(--muted); font-size:.94rem; line-height:1.55;}
.serv-card em{margin-top:auto; color:var(--gold-700); font-style:normal; font-weight:700; font-size:.88rem;}
@media (max-width:760px){
  .serv-lista li{padding:16px 16px 16px 58px;}
  .serv-lista li::before{left:16px; top:16px;}
}
@media (prefers-reduced-motion: reduce){ .serv-card, .serv-card:hover{transition:none; transform:none;} }
