/* Tecela AI v4 · páginas de serviço (/servicos/*) e seus visuais. Carregado em todas as páginas, depois de v4.css. */

.svcp-hero {padding:72px 0 88px;border-bottom:1px solid var(--border);background:radial-gradient(ellipse 50% 70% at 80% 40%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),var(--bg);overflow:hidden}
.svcp-hero-grid {display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.svcp-crumb {display:inline-flex;gap:8px;align-items:center;font:600 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.svcp-crumb a {color:var(--muted)}
.svcp-crumb a:hover {color:var(--accent)}
.svcp-hero h1 {font-size:clamp(40px,4.6vw,64px);margin:14px 0 20px}
.svcp-hero .lead {font-size:17px;color:var(--fg-2);max-width:48ch}
.svcp-hero .actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.svcp-visual {position:relative;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--bg-2) 88%,transparent);padding:22px;box-shadow:0 30px 70px #02081455;min-width:0}
.svcp-visual-head {display:flex;align-items:center;gap:10px;font:600 10.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--border)}
.svcp-visual-head em {margin-left:auto;font-style:normal;color:var(--accent-2)}
.svcp-live {width:7px;height:7px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 20%,transparent)}
@media(prefers-reduced-motion:no-preference) {.svcp-live {animation:svcp-blink 1.6s ease-in-out infinite}}
@keyframes svcp-blink {50% {opacity:.35}}
.svcp-sec-head {display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px}
.svcp-sec-head h2 {margin:0}
.svcp-sec-head .section-intro {max-width:46ch;margin:0;color:var(--fg-2)}
.svcp-cards {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svcp-cards.c3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.svcp-card {border:1px solid var(--border);border-radius:14px;background:var(--bg-2);padding:24px 22px;display:flex;flex-direction:column}
.svcp-card .svcp-k {font:600 10.5px var(--font-mono);letter-spacing:.08em;color:var(--muted);margin-bottom:16px}
.svcp-card h3 {font-size:20px;margin-bottom:10px}
.svcp-card p {font-size:14.5px;color:var(--fg-2);margin:0}
.svcp-card .proof-link {margin-top:auto;padding-top:16px;font-size:13px;font-weight:650}
a.svcp-card {color:var(--fg);transition:border-color .2s,translate .2s}
a.svcp-card:hover {text-decoration:none;border-color:color-mix(in srgb,var(--accent) 45%,var(--border));translate:0 -2px}
.svcp-principles {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--border)}
.svcp-principles article {padding:28px 28px 30px 0;border-bottom:1px solid var(--border)}
.svcp-principles article:not(:nth-child(3n+1)) {padding-left:28px;border-left:1px solid var(--border)}
.svcp-principles h3 {font-size:19px;margin-bottom:8px}
.svcp-principles p {font-size:14.5px;color:var(--fg-2);margin:0}
.svcp-steps {list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svcp-steps li {margin:0;padding:22px 20px 24px;border-top:2px solid var(--accent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%)}
.svcp-steps b {display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;margin:10px 0 8px}
.svcp-steps span {font:600 10.5px var(--font-mono);letter-spacing:.08em;color:var(--accent)}
.svcp-steps p {font-size:14px;color:var(--fg-2);margin:0}
.svcp-faq {max-width:860px}
.svcp-faq details {border-bottom:1px solid var(--border)}
.svcp-faq summary {list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.svcp-faq summary::-webkit-details-marker {display:none}
.svcp-faq summary::after {content:"+";font:400 24px/1 var(--font-sans);color:var(--accent);transition:rotate .2s}
.svcp-faq details[open] summary::after {rotate:45deg}
.svcp-faq details p {color:var(--fg-2);font-size:15.5px;margin:0 0 22px;max-width:70ch}
.svcp-related {display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.svcp-related a {padding:9px 14px;border:1px solid var(--border);border-radius:99px;font-size:13px;font-weight:600;color:var(--fg)}
.svcp-related a:hover {border-color:var(--accent);text-decoration:none}
@media(max-width:1100px) {.svcp-cards {grid-template-columns:repeat(2,minmax(0,1fr))}.svcp-steps {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px) {
  .svcp-hero {padding:48px 0 64px}
  .svcp-hero-grid {grid-template-columns:1fr;gap:40px}
  .svcp-sec-head {display:block}.svcp-sec-head .section-intro {margin-top:14px}
  .svcp-principles {grid-template-columns:1fr 1fr}
  .svcp-principles article,.svcp-principles article:not(:nth-child(3n+1)) {padding:24px 20px 24px 0;border-left:0}
  .svcp-principles article:nth-child(2n) {padding-left:20px;border-left:1px solid var(--border)}
  .svcp-cards.c3 {grid-template-columns:1fr 1fr}
}
@media(max-width:600px) {
  .svcp-cards,.svcp-cards.c3,.svcp-steps,.svcp-principles {grid-template-columns:1fr}
  .svcp-principles article:nth-child(2n) {padding-left:0;border-left:0}
  .svcp-visual {padding:16px}
  .svcp-faq summary {font-size:16px}
}

/* ---------- Visual: execução de um agente (Agentes de IA) ---------- */
.svcp-shot + .run-steps {margin-top:18px}
.run-steps {list-style:none;margin:0;padding:0;display:grid;gap:4px}
.run-steps li {display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;margin:0;padding:9px 10px;border-radius:9px;color:var(--fg-2)}
.run-steps i {width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent);background:var(--accent);position:relative}
.run-steps i::after {content:"";position:absolute;left:5px;top:2.5px;width:4px;height:8px;border-right:2px solid var(--accent-fg);border-bottom:2px solid var(--accent-fg);rotate:45deg}
.run-steps b {font-size:14px;font-weight:600;color:var(--fg)}
.run-steps small {font-size:12px;color:var(--muted);text-align:right}
.run-steps li.run-human {margin-top:6px;border:1px dashed color-mix(in srgb,var(--accent-2) 55%,transparent)}
.run-out {margin-top:14px;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,var(--bg));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.run-out span {font:600 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.run-out p {margin:6px 0 10px;font-size:16px;font-weight:600;letter-spacing:-.015em}
.run-src {display:flex;gap:6px;flex-wrap:wrap}
.run-src em {font-style:normal;font-size:11px;padding:3px 9px;border-radius:99px;border:1px solid var(--border);color:var(--fg-2)}
/* Sem movimento: tudo concluído. Com movimento: os passos acendem em sequência, num ciclo de 9 s. */
@media(prefers-reduced-motion:no-preference) {
  .run-steps li {animation:run-row 9s infinite;animation-delay:calc(var(--i) * .7s)}
  .run-steps li i {animation:run-dot 9s infinite;animation-delay:calc(var(--i) * .7s)}
  .run-steps li i::after {animation:run-check 9s infinite;animation-delay:calc(var(--i) * .7s)}
  .run-out {animation:run-out 9s infinite}
}
@keyframes run-row {0%,2% {background:transparent} 5%,9% {background:color-mix(in srgb,var(--accent) 12%,transparent)} 13%,100% {background:transparent}}
@keyframes run-dot {0%,6% {background:transparent;border-color:var(--border)} 9%,88% {background:var(--accent);border-color:var(--accent)} 94%,100% {background:transparent;border-color:var(--border)}}
@keyframes run-check {0%,6% {opacity:0} 9%,88% {opacity:1} 94%,100% {opacity:0}}
@keyframes run-out {0%,48% {opacity:.25;translate:0 6px} 54%,88% {opacity:1;translate:0} 94%,100% {opacity:.25;translate:0 6px}}
@media(max-width:600px) {.run-steps li {grid-template-columns:22px 1fr}.run-steps small {display:none}}

/* Página central de serviços: atalhos para as quatro páginas e link de cada bloco. */
.services-hub-grid {padding:56px 0 64px}
.service-more {margin:22px 0 0}

/* ---------- Captura real dentro de uma camada do hero (.swl-layer e equivalentes) ---------- */
.svcp-shot {display:block;border-radius:9px;overflow:hidden;background:var(--bg);border:1px solid var(--border)}
.svcp-shot img {display:block;width:100%;height:auto}
.svcp-shot.is-crop {height:172px}
.svcp-shot.is-crop img {height:100%;object-fit:cover;object-position:top}
.svcp-shot.is-db {height:210px;position:relative}
.svcp-shot.is-db img {position:absolute;left:0;top:0;width:172%;max-width:none;height:auto}
.svcp-shot-tag {display:inline-flex;align-items:center;gap:6px;font:600 10px var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-2);margin-top:9px}
.svcp-shot-tag i {width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex:none}

/* ---------- Seção única de projetos: fileiras grandes alternadas + grade compacta ---------- */
.svcp-projects {display:grid;gap:64px}
.svcp-feature {display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center}
.svcp-feature.is-reverse .svcp-feature-media {order:2}
.svcp-feature.is-reverse .svcp-feature-body {order:1}
.svcp-feature-media {display:block;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:color-mix(in srgb,var(--accent) 6%,var(--bg-2));box-shadow:0 30px 60px -30px #02081466}
.svcp-feature-media img {display:block;width:100%;height:auto}
.svcp-feature-body .svcp-k {display:block;font:600 10.5px var(--font-mono);letter-spacing:.08em;color:var(--muted);margin-bottom:14px}
.svcp-feature-body h3 {font-size:27px;margin-bottom:12px}
.svcp-feature-body p {font-size:15.5px;color:var(--fg-2);max-width:46ch}
.svcp-feature-body .proof-link {display:inline-flex;gap:10px;margin-top:18px;font-size:13.5px;font-weight:650}
.svcp-feature-note {display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:14px}
.svcp-feature-note i {width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex:none}
.svcp-feature.svcp-feature-commerce {padding:28px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:20px;background:color-mix(in srgb,var(--accent) 6%,var(--bg-2))}
.svcp-badge {display:inline-flex;align-items:center;gap:7px;font:650 11.5px var(--font-sans);color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 14%,transparent);border:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent);border-radius:99px;padding:5px 13px;margin-bottom:14px}
.svcp-compact-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.svcp-compact-grid.c3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.svcp-compact-grid .work {height:100%}
.svcp-compact-grid .work-media {min-height:170px;padding:16px}
.svcp-compact-grid .work-image {max-height:170px}
.svcp-compact-grid .work-body {padding:20px}
.svcp-compact-grid .work-body h3 {font-size:19px}
.svcp-compact-grid .work-summary {font-size:13px}
@media(max-width:1100px) {
  .svcp-feature {grid-template-columns:1fr}
  .svcp-feature.is-reverse .svcp-feature-media,.svcp-feature.is-reverse .svcp-feature-body {order:0}
  .svcp-compact-grid,.svcp-compact-grid.c3 {grid-template-columns:1fr 1fr}
}
@media(max-width:600px) {
  .svcp-projects {gap:44px}
  .svcp-compact-grid,.svcp-compact-grid.c3 {grid-template-columns:1fr}
  .svcp-feature-body h3 {font-size:23px}
}