/* Serviços: exemplos de aplicação, sem painéis de resultados fictícios. */
.services-page { --svc-ink:#193d32; --svc-paper:#f3f2eb; }
.svc-hero { min-height:0; }
.svc-hero > .relative { width:100%; padding-top:156px; padding-bottom:76px; }
.svc-hero h1 { max-width:17ch; font-size:clamp(40px,5.2vw,72px); line-height:1.04; }
.svc-hero p { max-width:620px; }
.svc-index { padding:28px 24px; background:#f8f8f3; border-bottom:1px solid #dcded6; }
.svc-index-inner { max-width:1400px; margin:auto; }
.svc-index p { margin-bottom:18px; color:#636c65; font:10px/1.4 'JetBrains Mono',monospace; letter-spacing:.07em; }
.svc-index ol { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; margin:0; padding:0; }
.svc-index li { border-left:1px solid #d8ddd4; }
.svc-index li:first-child { border-left:0; }
.svc-index a { display:flex; align-items:center; gap:14px; min-height:48px; padding:10px 22px; color:#263d32; font:500 15px/1.4 Inter,sans-serif; text-decoration:none; }
.svc-index a > span:first-child { color:#6b806e; font:10px/1.4 'JetBrains Mono',monospace; }
.svc-index a > span:last-child { margin-left:auto; color:#0e67e4; font-size:18px; }
.svc-index a:hover { color:#0e67e4; background:#eaf0e7; }
.svc-service { scroll-margin-top:92px; padding-top:88px; padding-bottom:88px; }
.svc-layout { gap:clamp(36px,5vw,80px); }
.svc-layout > * { min-width:0; }
.svc-layout > div > h2 { max-width:590px; font-size:clamp(30px,3.2vw,44px); line-height:1.12; letter-spacing:-.045em; }
.svc-layout > div > p { max-width:550px; }
.svc-layout > div > ul { margin-bottom:30px; }
.svc-service .magnetic-btn { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; max-width:100%; min-height:48px; text-align:center; font-size:11px; line-height:1.5; letter-spacing:.025em; }
.svc-service .magnetic-btn > span { min-width:0; }
.svc-visual { margin:0; min-width:0; width:100%; font-family:Inter,sans-serif; }
.svc-visual h3,.svc-visual h4 { font-weight:500; }
.svc-visual figcaption { display:block; margin-top:18px; max-width:570px; color:#5c675e; font-size:12px; line-height:1.65; }
.svc-visual figcaption > span { display:block; margin-bottom:4px; font:9px/1.5 'JetBrains Mono',monospace; letter-spacing:.06em; color:#517248; }
.svc-service-dark .svc-visual figcaption { color:#a4b5b0; }
.svc-service-dark .svc-visual figcaption > span { color:#88bdba; }
.svc-label { display:block; font:10px/1.5 'JetBrains Mono',monospace; letter-spacing:.06em; }

/* Um site com oferta, identidade e caminho de contato legíveis. */
.svc-site { padding:24px; border-radius:22px; background:#e7ebdc url('../img/2.webp') center/cover; }
.svc-website { overflow:hidden; border:1px solid #e0dfd3; border-radius:12px; background:#faf8ef; color:#303b2e; box-shadow:0 16px 36px #183d3020; }
.svc-site-masthead { display:flex; gap:16px; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid #ddddcd; }
.svc-site-masthead strong { font:500 24px/1 Inter,sans-serif; letter-spacing:-.075em; white-space:nowrap; }
.svc-site-masthead strong span { color:#8b9b6d; }
.svc-site-masthead > span { max-width:110px; font-size:11px; text-align:right; }
.svc-site-hero { position:relative; display:grid; grid-template-columns:1.5fr 1fr; min-height:335px; }
.svc-site-hero > div:first-child { position:relative; z-index:1; padding:30px 0 28px 24px; }
.svc-site-hero .svc-label { max-width:150px; color:#69795b; font-size:9px; }
.svc-site-hero h3 { position:relative; z-index:1; width:120%; margin:16px 0; font:400 clamp(29px,2.8vw,40px)/1.02 Georgia,serif; letter-spacing:-.055em; }
.svc-site-hero h3 em { font-weight:400; }
.svc-site-hero p:not(.svc-label) { max-width:230px; font-size:12px; line-height:1.65; color:#66705d; }
.svc-mock-action { display:flex; align-items:center; gap:16px; width:fit-content; margin-top:24px; border-bottom:1px solid #4c5e42; padding-bottom:8px; color:#314329; font-size:12px; }
.svc-room { position:relative; align-self:stretch; margin:27px 20px 27px 0; overflow:hidden; background:#e5e8d9; border-radius:110px 110px 3px 3px; }
.svc-room::before { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(140deg,#c3ccb0,#e3e5d7); }
.svc-room-arch { position:absolute; width:70%; height:65%; right:-4%; top:10%; border:16px solid #c5cdb8; border-bottom:0; border-radius:90px 90px 0 0; }
.svc-room-plinth { position:absolute; width:70%; height:23%; left:13%; bottom:9%; background:#c7b99e; transform:skewY(-7deg); box-shadow:14px 10px 0 #978c7730; }
.svc-room-vase { position:absolute; width:36%; height:19%; left:28%; bottom:32%; border-radius:35% 35% 42% 42%; background:linear-gradient(90deg,#728766,#a3b08b); }
.svc-site-bottom { display:grid; grid-template-columns:repeat(3,1fr); padding:17px 20px; border-top:1px solid #dedfcf; gap:14px; }
.svc-site-bottom p { font-size:10px; line-height:1.5; }
.svc-site-bottom span { display:block; color:#768963; font-size:9px; margin-bottom:3px; }
.svc-site figcaption { padding:12px 14px; border-radius:6px; background:#fafbf4f2; }

/* A rotina de um pedido, com responsabilidade e histórico. */
.svc-workspace { padding:28px; border:1px solid #3b4e49; border-radius:18px; background:#13211f; color:#e9efea; box-shadow:0 20px 50px #0003; }
.svc-workspace-header { display:flex; justify-content:space-between; align-items:center; color:#a6bbb0; }
.svc-workspace-mark { color:#c7d9a6; font-size:24px; }
.svc-workspace h3 { font-size:30px; line-height:1.12; letter-spacing:-.04em; margin:24px 0 30px; }
.svc-workspace h3 > span { color:#a5b6a9; }
.svc-workspace-tabs { display:flex; gap:24px; color:#94a79b; border-bottom:1px solid #40554b; font-size:12px; }
.svc-workspace-tabs span { padding-bottom:13px; }
.svc-workspace-tabs .is-current { color:#e3edcc; border-bottom:2px solid #d3e4aa; }
.svc-order { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 0; }
.svc-order-id { color:#a3b399; display:block; font:9px/1.5 'JetBrains Mono',monospace; margin-bottom:6px; }
.svc-order strong { font-size:18px; font-weight:500; }
.svc-status { color:#e5d8a7; border:1px solid #776e44; border-radius:4px; padding:7px 9px; font-size:10px; line-height:1.4; }
.svc-order-details { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding-bottom:22px; margin:0; }
.svc-order-details dt { color:#9aac9e; font-size:11px; margin-bottom:9px; }
.svc-order-details dd { margin:0; font-size:12px; display:flex; align-items:center; gap:8px; line-height:1.5; }
.svc-avatar { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:#d9e6c2; background:#334638; font-size:9px; flex-shrink:0; }
.svc-task-row { display:flex; gap:14px; padding:15px 0; border-top:1px solid #34483e; }
.svc-task-row > span { color:#b1c987; }
.svc-task-row p { color:#e0e8dd; font-size:13px; }
.svc-task-row small { display:block; color:#96aa9c; font-size:11px; margin-top:4px; line-height:1.5; }
.svc-workspace-foot { border-top:1px solid #34483e; padding-top:16px; color:#a8b9a7; font-size:11px; line-height:1.5; }

/* Fluxo de trabalho com um contato concreto e uma intervenção humana. */
.svc-automation { padding:28px; border-radius:22px; background:#e9efdf url('../img/3.webp') center/cover; border:1px solid #d9e2cd; }
.svc-flow-intro { padding:18px; background:#f8fbf0f5; border-radius:8px; margin-bottom:24px; }
.svc-flow-intro .svc-label { color:#53714a; font-size:9px; }
.svc-flow-intro h3 { color:#244432; font-size:25px; line-height:1.14; letter-spacing:-.04em; margin-top:10px; }
.svc-flow { list-style:none; margin:0; padding:0; }
.svc-flow li { position:relative; display:flex; align-items:flex-start; gap:14px; padding-bottom:22px; }
.svc-flow li:last-child { padding-bottom:0; }
.svc-flow li:not(:last-child)::before { content:''; position:absolute; top:32px; bottom:0; left:15px; width:1px; background:#637e5a; }
.svc-flow-number { position:relative; z-index:1; display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border:1px solid #9aaa8a; border-radius:50%; background:#f5f9ed; color:#39532d; font:10px/1 'JetBrains Mono',monospace; }
.svc-flow-paper { flex:1; min-width:0; padding:17px 20px; border-radius:3px 12px 12px; background:#fdfdf7; box-shadow:0 8px 18px #31523414; }
.svc-flow-paper .svc-label { color:#62735d; font-size:9px; }
.svc-flow-paper h4 { margin-top:7px; font-size:16px; color:#203e2d; }
.svc-flow-paper p { font-size:12px; line-height:1.6; color:#687561; margin-top:7px; }
.svc-flow-paper .svc-message { padding-left:12px; border-left:2px solid #c6d9ae; font-style:italic; }
.svc-flow-paper-last { background:#153e37; }
.svc-flow-paper-last .svc-label { color:#a7c7b4; }
.svc-flow-paper-last h4 { color:#f1f4eb; }
.svc-flow-paper-last p { color:#b3c7b9; }
.svc-automation figcaption { border-radius:6px; padding:12px 14px; background:#fafbf4f2; }

/* Exemplo de anúncio, com destino e perguntas que orientam a campanha. */
.svc-advertising { padding:0 12px; }
.svc-ad-heading { margin:0 0 24px 20px; }
.svc-ad-heading .svc-label { color:#95bfc3; }
.svc-ad-heading h3 { color:#f0f1e7; font-size:34px; line-height:1.1; letter-spacing:-.035em; margin-top:12px; }
.svc-ad-heading h3 em { font-family:Georgia,serif; color:#c4d4a5; font-weight:400; }
.svc-search-query { display:flex; gap:12px; align-items:center; padding:18px 23px; background:#ecf0eb; color:#344133; font-size:13px; border-radius:28px; }
.svc-search-query svg { width:18px; height:18px; flex-shrink:0; stroke-width:1.6; }
.svc-search-ad { margin:14px 0 0 20px; padding:25px; background:#fdfdf8; color:#262b27; border-radius:8px; box-shadow:0 18px 35px #0002; }
.svc-search-ad > div > span { display:block; font-size:10px; color:#617059; margin-bottom:15px; }
.svc-search-ad strong { display:block; font-size:16px; font-weight:500; letter-spacing:-.04em; }
.svc-search-ad small { display:block; margin-top:3px; font-size:11px; color:#606959; }
.svc-search-ad h4 { margin:16px 0 10px; color:#154eb0; font-size:23px; line-height:1.16; letter-spacing:-.03em; }
.svc-search-ad > p { font-size:13px; line-height:1.65; color:#626a5d; }
.svc-ad-destination { display:flex; gap:12px; align-items:center; border-top:1px solid #dce2d7; margin-top:20px; padding-top:14px; color:#3f5940; font-size:11px; line-height:1.5; }
.svc-ad-destination span { margin-left:auto; font-size:18px; }
.svc-campaign-note { position:relative; margin:18px 30px 0 0; padding:20px 24px; color:#d2ddd0; border-left:2px solid #879968; }
.svc-campaign-note .svc-label { color:#b8c9a0; font-size:9px; }
.svc-campaign-note p { font-size:13px; line-height:1.65; margin-top:9px; }

/* Identidade em uma peça de campanha e na interface mobile. */
.svc-design-composition { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center; padding:26px; border-radius:22px; background:#eceee1 url('../img/5.webp') center/cover; }
.svc-brand-poster { position:relative; overflow:hidden; z-index:0; align-self:stretch; margin:16px -25px 18px 0; padding:26px 32px 26px 22px; min-height:350px; color:#f3efd9; background:#244c38; box-shadow:0 12px 25px #15372720; }
.svc-forma-brand { position:relative; z-index:1; font-size:29px; letter-spacing:-.07em; }
.svc-forma-brand span { display:block; font-size:9px; letter-spacing:.035em; margin-top:4px; }
.svc-brand-poster p { position:relative; z-index:1; margin:40px 0 80px; font:400 clamp(33px,3.2vw,46px)/.98 Georgia,serif; letter-spacing:-.04em; }
.svc-brand-poster p em { color:#dfecac; }
.svc-poster-line { position:absolute; width:210px; height:210px; bottom:-45px; left:15px; border:28px solid #658156; border-radius:50%; transform:rotate(-25deg) scaleY(.65); box-shadow:0 0 0 12px #3f633e; }
.svc-brand-poster > small { position:absolute; left:22px; bottom:25px; z-index:1; font-size:9px; letter-spacing:.08em; }
.svc-brand-phone { position:relative; z-index:1; width:100%; max-width:260px; justify-self:end; padding:9px; background:#202a21; border:1px solid #485244; border-radius:34px; box-shadow:0 22px 32px #18301e33; }
.svc-phone-speaker { position:absolute; top:16px; width:52px; height:6px; border-radius:9px; background:#314031; left:50%; transform:translateX(-50%); }
.svc-phone-content { overflow:hidden; padding:28px 19px 22px; border-radius:25px; background:#f4f2e6; }
.svc-phone-brand { display:flex; justify-content:space-between; color:#34543b; font-size:22px; letter-spacing:-.06em; }
.svc-phone-brand > span { font-size:18px; }
.svc-phone-art { position:relative; height:96px; margin-top:18px; overflow:hidden; background:#e1e7cb; border-radius:45px 45px 3px 3px; }
.svc-phone-art::after { content:''; position:absolute; width:96px; height:96px; border:16px solid #9bac7c; border-radius:50%; right:8px; top:10px; transform:scaleY(.65) rotate(-25deg); box-shadow:-16px 14px 0 #c3ce9e; }
.svc-phone-content h3 { margin-top:19px; color:#385238; font:400 28px/1.02 Georgia,serif; letter-spacing:-.035em; }
.svc-phone-content > p { color:#667458; font-size:11px; line-height:1.6; margin:12px 0 20px; }
.svc-phone-action { display:flex; justify-content:space-between; gap:6px; padding:11px 12px; color:#f7f6eb; background:#37563d; border-radius:4px; font-size:10px; }
.svc-brand-spec { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 16px; margin-top:20px; background:#fbfcf2ef; border-radius:5px; }
.svc-brand-spec > span { display:flex; align-items:center; gap:10px; color:#354e30; font:25px/1 Georgia,serif; }
.svc-brand-spec small { color:#6c745c; font:10px/1.4 Inter,sans-serif; }
.svc-brand-spec i { display:inline-block; width:20px; height:20px; border-radius:50%; border:1px solid #8d987f55; background:#244c38; }
.svc-brand-spec i:nth-child(2) { background:#dbe5b0; }
.svc-brand-spec i:nth-child(3) { background:#f4f2e6; }

@media (max-width:1100px) {
  .svc-layout { grid-template-columns:1fr; gap:36px; max-width:720px; margin:auto; }
  .svc-visual { order:2; }
  .svc-layout > div { order:1; }
  .svc-site-hero h3 { font-size:40px; }
  .svc-index a { padding:10px 13px; gap:10px; font-size:14px; }
  .svc-design-composition { max-width:650px; margin:auto; }
  .svc-brand-poster p { font-size:46px; }
}
@media (max-width:600px) {
  .svc-hero > .relative { padding-top:124px; padding-bottom:50px; }
  .svc-hero h1 { font-size:40px; margin-bottom:24px; }
  .svc-hero p { font-size:16px; margin-bottom:28px; }
  .svc-index { padding:22px 24px; }
  .svc-index ol { grid-template-columns:1fr 1fr; }
  .svc-index li { border:0; border-top:1px solid #d8ddd4; }
  .svc-index li:nth-child(even) { border-left:1px solid #d8ddd4; }
  .svc-index li:last-child { grid-column:1/-1; }
  .svc-index a { padding:12px 10px; }
  .svc-service { padding-top:56px; padding-bottom:56px; }
  .svc-layout > div > h2 { font-size:31px; }
  .svc-site,.svc-automation { padding:16px; }
  .svc-site-masthead { padding:18px 16px; }
  .svc-site-masthead strong { font-size:21px; }
  .svc-site-masthead > span { font-size:9px; }
  .svc-site-hero { grid-template-columns:1fr; }
  .svc-site-hero > div:first-child { padding:22px 18px; }
  .svc-site-hero h3 { width:auto; font-size:34px; }
  .svc-site-hero p:not(.svc-label) { max-width:100%; }
  .svc-room { height:110px; margin:0 18px 18px; border-radius:75px 75px 3px 3px; }
  .svc-room-arch { height:100%; width:40%; right:8%; top:8%; }
  .svc-room-plinth { width:40%; left:25%; }
  .svc-room-vase { width:20%; left:35%; }
  .svc-site-bottom { padding:14px; gap:8px; }
  .svc-workspace { padding:22px; }
  .svc-workspace h3 { font-size:27px; }
  .svc-order { align-items:flex-start; flex-direction:column; }
  .svc-order-details { grid-template-columns:1fr; gap:14px; }
  .svc-flow-intro { padding:15px; }
  .svc-flow-intro h3 { font-size:24px; }
  .svc-flow li { gap:9px; }
  .svc-flow-paper { padding:14px; }
  .svc-advertising { padding:0; }
  .svc-ad-heading { margin-left:0; }
  .svc-ad-heading h3 { font-size:32px; }
  .svc-search-query { padding:16px; font-size:12px; border-radius:16px; }
  .svc-search-ad { margin-left:10px; padding:22px; }
  .svc-campaign-note { margin-right:0; padding:16px 20px; }
  .svc-design-composition { padding:18px; grid-template-columns:.65fr 1fr; }
  .svc-brand-poster { min-height:340px; padding:20px 15px; margin-right:-60px; }
  .svc-brand-poster p { font-size:32px; margin-top:35px; }
  .svc-forma-brand { font-size:26px; }
  .svc-forma-brand span { max-width:70px; font-size:8px; }
  .svc-brand-poster > small { left:14px; max-width:65px; line-height:1.6; }
  .svc-phone-content { padding:27px 13px 18px; }
  .svc-phone-content h3 { font-size:25px; }
  .svc-phone-action { padding:10px 8px; font-size:9px; }
  .svc-phone-art { height:80px; }
  .svc-brand-spec { padding:12px; }
  .svc-brand-spec small { max-width:80px; }
}
@media (max-width:480px) {
  .svc-design-composition { grid-template-columns:1fr; gap:16px; }
  .svc-brand-poster { min-height:190px; margin:0; padding:20px; }
  .svc-forma-brand span { max-width:none; }
  .svc-brand-poster p { margin:22px 0 25px; }
  .svc-brand-poster > small { left:auto; right:18px; top:24px; bottom:auto; }
  .svc-brand-phone { justify-self:center; max-width:205px; }
  .svc-brand-spec { margin-top:0; }
}