/* GERADO por _build/build_plugin.py a partir de prototipo/index.html. NÃO EDITAR À MÃO: a próxima geração desfaz.
   Todo seletor leva o prefixo ":root" para o tema não ganhar do bloco
   (ver PREFIXO_WP no gerador). 224 regras. */
/* =========================================================================
   SICOLOS · SERVIÇOS v3 — CSS
   Todos os seletores partem de #slc-servicos. Nada vaza para o tema.
   ========================================================================= */
:root #slc-servicos{
  /* --- tokens da marca (lidos do site atual) --- */
  --navy:#242844;
  --navy-deep:#12162B;
  --teal:#0B7E80;
  --teal-lit:#0FA3A0;
  --teal-dark:#124F4A;
  --green:#63AE2C;
  --muted:#677294;
  --line:#E3EAEA;
  --soft:#F5F9F9;
  --radius:16px;
  --shadow-md:0 16px 44px -22px rgba(18,79,74,.5);

  font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Base explícita: sem ela o bloco herda o font-size do <body> do tema (15px no
     Saasland), e tudo que é medido em em encolhe junto com as alturas de linha. */
  font-size:16px;
  color:var(--navy);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
:root #slc-servicos *,:root #slc-servicos *::before,:root #slc-servicos *::after{box-sizing:border-box}
/* ⚠️ Este reset usa #id (especificidade 1-0-1) de propósito: é ele que impede o tema
   Saasland de vazar margens nos parágrafos e listas do bloco. A consequência é que
   QUALQUER regra .slc-* que defina margin/padding em p, h1-h3, ul, dl, dd, fieldset ou
   legend precisa vir prefixada com #slc-servicos — senão perde por especificidade e é
   silenciosamente ignorada. As regras afetadas estão marcadas ao longo do arquivo. */
:root #slc-servicos p,:root #slc-servicos h1,:root #slc-servicos h2,:root #slc-servicos h3,:root #slc-servicos ul,
:root #slc-servicos dl,:root #slc-servicos dd,:root #slc-servicos fieldset,:root #slc-servicos legend{margin:0;padding:0}
:root #slc-servicos ul{list-style:none}
:root #slc-servicos fieldset{border:0}
/* O tema Saasland pinta todo h1-h6 com var(--secondary-color), que no site é #242844.
   Os títulos do bloco não declaram cor: herdam do contêiner (branco no hero, no card D5
   e na faixa CTA). Sem esta regra, dentro do WordPress o h1 do hero sai #242844 sobre
   #12162B, praticamente invisível. Só color, font-family e text-transform: nenhuma regra
   .slc-* de título define essas três, então o ID aqui não atropela nada. line-height e
   letter-spacing ficam de fora de propósito, porque as classes de título os definem. */
:root #slc-servicos h1,:root #slc-servicos h2,:root #slc-servicos h3{color:inherit;font-family:inherit;
  text-transform:none}
:root #slc-servicos button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
/* O CSS responsivo do tema esconde <br> no celular. Aqui o <br> é conteúdo: sem ele,
   "tecnologias-base:<br>RPA" vira "tecnologias-base:RPA" no card do hero. */
:root #slc-servicos br{display:inline}
/* precisa vir depois: vários elementos abaixo definem display, o que anula o [hidden] do UA */
:root #slc-servicos [hidden]{display:none!important}

:root .slc-sprite{position:absolute;width:0;height:0;overflow:hidden}
:root #slc-servicos svg symbol{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
:root .slc-ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

:root .slc-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* =========================================================================
   HERO
   ========================================================================= */
:root .slc-hero{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;
  padding:90px 0 96px}
:root .slc-hero-bg{position:absolute;inset:0;pointer-events:none}
:root .slc-hero-grid{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 30% 20%,#000 25%,transparent 75%);
  mask-image:radial-gradient(120% 90% at 30% 20%,#000 25%,transparent 75%)}
:root .slc-hero-glow{position:absolute;border-radius:50%;filter:blur(20px)}
:root .slc-hero-glow-a{width:640px;height:640px;top:-260px;right:-140px;
  background:radial-gradient(closest-side,rgba(15,163,160,.34),transparent 70%)}
:root .slc-hero-glow-b{width:520px;height:520px;bottom:-300px;left:-120px;
  background:radial-gradient(closest-side,rgba(99,174,44,.20),transparent 70%)}

:root .slc-hero-in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,396px);
  grid-template-areas:"copy form" "cards form";
  column-gap:48px;row-gap:0;align-items:start}
:root .slc-hero-copy{grid-area:copy;max-width:720px}
:root .slc-hero-form{grid-area:form}

:root .slc-h1{font-size:clamp(2.3rem,5.2vw,3.9rem);line-height:1.08;font-weight:900;
  letter-spacing:-.028em}
:root .slc-h1-hl{
  background:linear-gradient(96deg,#5FD3CE 0%,#9BE39B 62%,#63AE2C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* prefixado: ver aviso no reset */
:root #slc-servicos .slc-lede{margin-top:26px;max-width:56ch;font-size:1.08rem;
  color:rgba(255,255,255,.74)}
:root .slc-lede strong{color:#fff;font-weight:800}

:root .slc-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* ---------- Cards visuais do banner ----------
   prefixo #slc-servicos obrigatório na <ul>: o reset de ul acima usa ID. */
:root #slc-servicos .slc-hero-cards{grid-area:cards;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:48px 0 0;padding:38px 0 0;
  list-style:none;border-top:1px solid rgba(255,255,255,.11);max-width:720px}
:root .slc-hcard{display:flex;flex-direction:column;padding:15px 14px 14px;border-radius:15px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  transition:background .2s,border-color .2s,transform .2s}
:root .slc-hcard:hover{background:rgba(255,255,255,.09);border-color:rgba(95,211,206,.42);
  transform:translateY(-3px)}
:root .slc-hcard-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:linear-gradient(140deg,rgba(95,211,206,.24),rgba(99,174,44,.24));
  color:#5FD3CE;margin-bottom:11px}
:root .slc-hcard-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
:root .slc-hcard-n{font-size:1.55rem;font-weight:900;line-height:1;letter-spacing:-.035em;color:#fff}
:root .slc-hcard-l{margin-top:5px;font-size:.75rem;line-height:1.4;font-weight:600;
  color:rgba(255,255,255,.58)}

/* ---------- Formulário ao lado do banner ---------- */
:root .slc-hero-form{position:relative;background:#fff;color:var(--navy);border-radius:20px;
  padding:26px 26px 24px;overflow:hidden;
  box-shadow:0 34px 74px -34px rgba(0,0,0,.72)}
:root .slc-hero-form::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--teal-lit),var(--green))}
:root #slc-servicos .slc-form-eyebrow{display:inline-block;font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;color:var(--teal);
  background:rgba(11,126,128,.09);padding:5px 11px;border-radius:999px;margin:0 0 12px}
:root #slc-servicos .slc-form-t{font-size:1.22rem;font-weight:900;letter-spacing:-.022em;
  line-height:1.25}
:root #slc-servicos .slc-form-s{font-size:.85rem;color:var(--muted);margin:7px 0 0}
:root .slc-form-grid{display:grid;gap:11px;margin-top:19px}
:root .slc-inp{display:block}
:root #slc-servicos .slc-inp-l{display:block;font-size:.67rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 6px}
/* display e box-shadow explícitos: o tema põe sombra e display:inline em input de
   texto, e-mail e telefone. */
:root .slc-inp input,:root .slc-inp select{display:block;width:100%;height:44px;border:1px solid var(--line);
  border-radius:10px;background:var(--soft);padding:0 12px;font:inherit;font-size:.9rem;
  color:var(--navy);outline:0;box-shadow:none;
  transition:border-color .16s,box-shadow .16s,background .16s}
:root .slc-inp select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677294' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:17px}
:root .slc-inp input::placeholder{color:#9AA3BC}
:root .slc-inp input:focus,:root .slc-inp select:focus{border-color:var(--teal);background:#fff;
  box-shadow:0 0 0 3px rgba(11,126,128,.13)}
:root .slc-consent{position:relative;display:flex;align-items:flex-start;gap:9px;margin-top:15px;
  font-size:.76rem;line-height:1.45;color:var(--muted);cursor:pointer}
:root .slc-consent input{position:absolute;opacity:0;width:0;height:0}
:root .slc-consent .slc-box{margin-top:1px}
:root .slc-consent input:checked + .slc-box{background:var(--teal);border-color:var(--teal)}
:root .slc-consent input:checked + .slc-box .slc-ico{opacity:1}
:root .slc-consent input:focus-visible + .slc-box{box-shadow:0 0 0 3px rgba(11,126,128,.28)}
:root .slc-form-btn{width:100%;justify-content:center;margin-top:16px}
:root #slc-servicos .slc-form-note{font-size:.72rem;color:#9AA3BC;text-align:center;margin:11px 0 0}
:root #slc-servicos .slc-form-ok{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;
  padding:16px 18px;border-radius:12px;background:rgba(99,174,44,.1);
  border:1px solid rgba(99,174,44,.3);font-size:.86rem;font-weight:700;color:#3D7A14}
:root .slc-form-ok .slc-ico{font-size:18px;stroke-width:2.6;margin-top:2px}

/* =========================================================================
   LAYOUT catálogo
   ========================================================================= */
:root .slc-layout{padding:56px 0 0}

/* ---------- Barra de filtros (topo) ----------
   v4: o painel deixou de ser um rail lateral de 282px. Vira uma barra horizontal
   com busca larga + um dropdown por faceta; o grid ocupa a largura inteira. */
:root .slc-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:13px;border:1px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:0 14px 34px -28px rgba(18,79,74,.6);margin-bottom:24px}
:root .slc-toolbar .slc-search-lg{flex:1 1 280px;height:48px;background:#fff}
:root .slc-facets{display:flex;gap:8px;flex-wrap:wrap}

:root .slc-drop{position:relative}
/* prefixo #slc-servicos obrigatório: o reset de <button> acima usa ID (1-0-1) e
   apagaria borda e fundo destes botões. Vale para todo .slc-* usado em <button>. */
:root #slc-servicos .slc-drop-b{display:inline-flex;align-items:center;gap:9px;height:48px;
  padding:0 15px;border:1px solid var(--line);border-radius:11px;background:#fff;
  font-size:.89rem;font-weight:700;color:var(--navy);
  transition:border-color .16s,background .16s,box-shadow .16s,color .16s}
:root #slc-servicos .slc-drop-b:hover{border-color:#BFD4D4}
:root .slc-drop-caret{font-size:16px;color:var(--muted);transition:transform .2s}
:root #slc-servicos .slc-drop.is-open .slc-drop-b{border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(11,126,128,.13)}
:root .slc-drop.is-open .slc-drop-caret{transform:rotate(180deg)}
:root #slc-servicos .slc-drop.has-sel .slc-drop-b{border-color:var(--teal);
  background:rgba(11,126,128,.06);color:var(--teal-dark)}
/* prefixo #slc-servicos obrigatório: vence o reset de fieldset e a regra .slc-group abaixo */
:root #slc-servicos .slc-drop-p{position:absolute;top:calc(100% + 9px);left:0;z-index:40;
  min-width:264px;margin:0;padding:16px 18px 17px;border:1px solid var(--line);
  border-top:1px solid var(--line);border-radius:14px;background:#fff;
  box-shadow:0 26px 54px -26px rgba(18,22,43,.55)}
:root .slc-facets .slc-drop:last-child .slc-drop-p{left:auto;right:0}
/* o rótulo já está no botão do dropdown: some da caixa, mas segue no acessível */
:root #slc-servicos .slc-drop-p .slc-group-t{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0}

:root #slc-servicos .slc-clear-btn{flex:none;font-size:.84rem;font-weight:800;color:var(--teal);
  padding:0 16px;height:48px;border-radius:11px;background:rgba(11,126,128,.08)}
:root #slc-servicos .slc-clear-btn:hover{background:rgba(11,126,128,.16)}

/* o padding-top do fieldset é aplicado ABAIXO do legend — por isso o respiro do
   separador vai no margin-top do próprio legend, não no padding do grupo */
:root #slc-servicos .slc-group-t{display:block;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin:18px 0 4px}
:root .slc-search{display:flex;align-items:center;gap:9px;background:var(--soft);
  border:1px solid var(--line);border-radius:10px;padding:0 12px;height:42px;
  transition:border-color .16s,box-shadow .16s}
:root .slc-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,126,128,.13)}
:root .slc-search>.slc-ico{font-size:17px;color:var(--muted)}
:root .slc-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;
  font-size:.9rem;color:var(--navy);padding:1px 2px;box-shadow:none}
:root .slc-search input::placeholder{color:#9AA3BC}
:root .slc-search input::-webkit-search-cancel-button{display:none}
:root #slc-servicos .slc-search-clear{display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:#DCE6E6;color:var(--navy);font-size:12px}

/* v4: todo .slc-group agora é um popover (.slc-drop-p) — o espaçamento vertical do
   rail lateral saiu junto com ele; ver a regra de .slc-drop-p acima. */
:root .slc-opts{display:grid;gap:2px}
:root .slc-opt{display:flex;align-items:center;gap:10px;padding:7px 8px;margin:0 -8px;
  border-radius:9px;cursor:pointer;transition:background .14s}
:root .slc-opt:hover{background:var(--soft)}
:root .slc-opt input{position:absolute;opacity:0;width:0;height:0}
:root .slc-box{display:grid;place-items:center;width:19px;height:19px;flex:none;border-radius:6px;
  border:1.6px solid #C6D2D2;background:#fff;color:#fff;font-size:13px;
  transition:background .15s,border-color .15s}
:root .slc-box .slc-ico{opacity:0;stroke-width:3;transition:opacity .15s}
:root .slc-opt input:checked + .slc-box{background:var(--teal);border-color:var(--teal)}
:root .slc-opt input:checked + .slc-box .slc-ico{opacity:1}
:root .slc-opt input:focus-visible + .slc-box{box-shadow:0 0 0 3px rgba(11,126,128,.28)}
:root .slc-opt-t{flex:1;font-size:.9rem;font-weight:600}
:root .slc-opt input:checked ~ .slc-opt-t{font-weight:800;color:var(--teal-dark)}
:root .slc-opt-n{font-size:.76rem;font-weight:700;color:#9AA3BC;font-variant-numeric:tabular-nums}
:root .slc-opt.is-off{opacity:.42}
:root .slc-opt.is-off:hover{background:none}

/* ---------- CTAs de meio de página ---------- */
:root .slc-inline-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-top:34px;padding:24px 28px;border-radius:var(--radius);
  background:var(--soft);border:1px solid var(--line)}
:root #slc-servicos .slc-inline-t{font-size:1.08rem;font-weight:800;letter-spacing:-.015em}
:root #slc-servicos .slc-inline-s{font-size:.88rem;color:var(--muted);margin:4px 0 0}
:root .slc-inline-btns{display:flex;gap:10px;flex-wrap:wrap}
:root .slc-inline-btns .slc-btn{padding:12px 22px;font-size:.9rem}
:root .slc-inline-btns .slc-btn-ghost{background:#fff}

:root .slc-band-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
:root .slc-band-cta .slc-btn-ghost{background:#fff}

/* ---------- Barra de resultados ---------- */
:root .slc-resultbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
:root .slc-count{font-size:.9rem;font-weight:800;color:var(--navy);flex:none}
:root .slc-pills{display:flex;flex-wrap:wrap;gap:7px}
:root .slc-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 8px 5px 12px;
  border-radius:999px;background:rgba(11,126,128,.09);color:var(--teal-dark);
  font-size:.79rem;font-weight:800}
:root #slc-servicos .slc-pill button{display:grid;place-items:center;width:17px;height:17px;
  border-radius:50%;background:rgba(11,126,128,.2);font-size:11px;color:var(--teal-dark)}
:root #slc-servicos .slc-pill button:hover{background:var(--teal);color:#fff}

/* ---------- Grid ---------- */
/* prefixado: ver aviso no reset */
:root #slc-servicos .slc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:24px 0 0}

:root .slc-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:13px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px 20px;text-align:left;width:100%;height:100%;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
:root .slc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg,var(--teal),var(--green));
  opacity:0;transition:opacity .2s}
:root .slc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CFE0E0}
:root .slc-card:hover::before{opacity:1}
:root .slc-card:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

:root .slc-card-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;
  background:linear-gradient(140deg,rgba(11,126,128,.11),rgba(99,174,44,.13));color:var(--teal);
  transition:background .2s,color .2s}
:root .slc-card-ico svg{width:28px;height:28px;fill:none;stroke:currentColor}
:root .slc-card:hover .slc-card-ico{background:linear-gradient(140deg,var(--teal-lit),var(--teal));color:#fff}

:root .slc-card-t{font-size:1.09rem;font-weight:800;line-height:1.3;letter-spacing:-.012em}
:root .slc-card-s{font-size:.9rem;color:var(--muted);flex:1}
:root .slc-tags{display:flex;flex-wrap:wrap;gap:6px}
:root .slc-tag{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 8px;border-radius:6px;background:var(--soft);color:var(--teal-dark)}
:root .slc-tag[data-k="ia"]{background:rgba(99,174,44,.14);color:#3D7A14}
:root .slc-tag[data-k="documentos"]{background:rgba(15,163,160,.15);color:#0A6E70}
/* imersão 1Day é a única linha do portfólio com formato comercial próprio — ganha destaque */
:root .slc-tag[data-k="imersao"]{background:var(--navy);color:#fff}
:root .slc-card-more{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:800;
  color:var(--teal)}
:root .slc-card-more .slc-ico{font-size:15px;transition:transform .2s}
:root .slc-card:hover .slc-card-more .slc-ico{transform:translateX(4px)}

/* ---------- Vazio ---------- */
:root .slc-empty{text-align:center;padding:64px 20px 30px}
:root .slc-empty-t{font-size:1.2rem;font-weight:800}
/* prefixado: ver aviso no reset */
:root #slc-servicos .slc-empty-s{color:var(--muted);margin:8px 0 22px}

/* ---------- Botões ---------- */
:root .slc-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:999px;
  font-weight:800;font-size:.95rem;text-decoration:none;transition:all .18s ease}
:root .slc-btn .slc-ico{font-size:17px}
/* prefixados: estas três variantes também são usadas em <button> (form do hero,
   estado vazio, atalho de imersões) — sem o ID o reset apaga fundo e borda */
:root #slc-servicos .slc-btn-primary{background:var(--green);color:#fff;
  box-shadow:0 12px 26px -12px rgba(99,174,44,.95)}
:root #slc-servicos .slc-btn-primary:hover{background:#559725;transform:translateY(-2px)}
:root #slc-servicos .slc-btn-outline{border:1px solid rgba(255,255,255,.24);color:#fff;
  background:rgba(255,255,255,.04)}
:root #slc-servicos .slc-btn-outline:hover{border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.09)}
:root #slc-servicos .slc-btn-ghost{border:1px solid var(--line);color:var(--navy)}
:root #slc-servicos .slc-btn-ghost:hover{border-color:var(--teal);color:var(--teal)}

/* ---------- CTA ---------- */
:root .slc-cta{margin-top:76px;background:var(--teal-dark);color:#fff;padding:52px 0}
:root .slc-cta-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
/* line-height explícito aqui e em .slc-fase-t: o tema define altura de linha para h2/h3,
   e herança perde para regra direta no elemento. 1.6 é o valor que já herdavam. */
:root .slc-cta-t{font-size:1.6rem;font-weight:800;letter-spacing:-.015em;line-height:1.6}
/* prefixado: ver aviso no reset */
:root #slc-servicos .slc-cta-s{color:rgba(255,255,255,.75);margin-top:8px;max-width:52ch}

/* ---------- Drawer ---------- */
:root .slc-scrim{position:fixed;inset:0;background:rgba(18,22,43,.6);z-index:9998;
  animation:slc-fade .22s ease}
:root .slc-drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:#fff;
  z-index:9999;overflow-y:auto;padding:56px 44px 60px;
  box-shadow:-24px 0 60px -30px rgba(18,22,43,.7);animation:slc-slide .28s cubic-bezier(.22,1,.36,1)}
:root .slc-drawer:focus{outline:0}
:root #slc-servicos .slc-drawer-close{position:absolute;top:20px;right:20px;display:grid;
  place-items:center;width:40px;height:40px;border-radius:50%;background:var(--soft);
  color:var(--navy);font-size:18px}
:root #slc-servicos .slc-drawer-close:hover{background:var(--teal);color:#fff}

:root .slc-d-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;
  background:linear-gradient(140deg,var(--teal-lit),var(--teal));color:#fff;margin-bottom:22px}
:root .slc-d-ico svg{width:34px;height:34px;fill:none;stroke:currentColor}
:root .slc-d-t{font-size:1.75rem;font-weight:800;line-height:1.2;letter-spacing:-.025em}
/* prefixados: ver aviso no reset */
:root #slc-servicos .slc-d-s{color:var(--teal);font-weight:700;margin-top:8px}
:root #slc-servicos .slc-d-p{color:var(--muted);margin-top:18px}
:root #slc-servicos .slc-d-h{font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.11em;color:var(--navy);margin:32px 0 0;padding:22px 0 0;
  border-top:1px solid var(--line)}
:root #slc-servicos .slc-d-list{margin-top:14px;display:grid;gap:11px}
:root .slc-d-list li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:#4A5170}
:root .slc-d-list .slc-ico{font-size:18px;color:var(--green);margin-top:3px;stroke-width:2.6}
:root .slc-d-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
:root .slc-d-cta{margin-top:34px}

@keyframes slc-fade{from{opacity:0}to{opacity:1}}
@keyframes slc-slide{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}


/* =========================================================================
   FAIXAS DE CONTEÚDO ESTÁTICO — Framework 5D e Parceiros
   Mesmos tokens do catálogo. Nada aqui depende do script.
   ========================================================================= */
:root .slc-band{padding:78px 0 0}
:root .slc-band-soft{background:var(--soft);margin-top:78px;padding:64px 0 68px}
/* a faixa soft já fecha com respiro próprio; sem isto o CTA soma outro margin-top */
:root .slc-band-soft + .slc-cta{margin-top:0}
/* prefixados: ver aviso no reset */
:root #slc-servicos .slc-eyebrow{display:inline-block;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.13em;color:var(--teal);
  background:rgba(11,126,128,.09);padding:6px 13px;border-radius:999px;margin:0 0 16px}
:root #slc-servicos .slc-band-t{font-size:clamp(1.55rem,3.2vw,2.15rem);font-weight:900;
  line-height:1.15;letter-spacing:-.028em}
:root #slc-servicos .slc-band-s{color:var(--muted);margin:12px 0 0;max-width:62ch}

/* ---------- Framework 5D ---------- */
:root #slc-servicos .slc-5d{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
  margin:34px 0 0;padding:0;list-style:none}
:root .slc-fase{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 20px 20px}
:root .slc-fase[data-d="5"]{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
:root .slc-fase-n{font-size:1.9rem;font-weight:900;line-height:1;letter-spacing:-.04em;color:#3D7A14}
:root .slc-fase[data-d="2"] .slc-fase-n{color:var(--green)}
:root .slc-fase[data-d="3"] .slc-fase-n{color:var(--teal)}
:root .slc-fase[data-d="4"] .slc-fase-n{color:var(--teal-lit)}
:root .slc-fase[data-d="5"] .slc-fase-n{color:#5FD3CE}
:root #slc-servicos .slc-fase-t{font-size:1.12rem;font-weight:800;margin:10px 0 0;letter-spacing:-.015em;
  line-height:1.6}
:root #slc-servicos .slc-fase-s{font-size:.86rem;color:var(--muted);margin:8px 0 0;flex:1}
/* prefixados: as três regras-base acima levam o ID, e uma variante D5 sem ele perde
   por especificidade (1-1-0 contra 0-3-0). Era o que deixava o prazo "Contínuo"
   #124F4A sobre #12162B, contraste de 1,9:1. Ver aviso no reset. */
:root #slc-servicos .slc-fase[data-d="5"] .slc-fase-s{color:rgba(255,255,255,.62)}
:root #slc-servicos .slc-fase-prazo{font-size:.8rem;font-weight:800;color:var(--teal-dark);margin:14px 0 0}
:root #slc-servicos .slc-fase[data-d="5"] .slc-fase-prazo{color:#5FD3CE}
:root #slc-servicos .slc-fase-h{font-size:.63rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.11em;color:#9AA3BC;margin:15px 0 0;padding:14px 0 0;
  border-top:1px solid var(--line)}
:root #slc-servicos .slc-fase[data-d="5"] .slc-fase-h{color:rgba(255,255,255,.45);
  border-top-color:rgba(255,255,255,.15)}
:root #slc-servicos .slc-fase-art{margin:10px 0 0;display:grid;gap:5px}
:root .slc-fase-art li{position:relative;padding-left:13px;font-size:.79rem;line-height:1.42;color:#4A5170}
:root .slc-fase-art li::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;
  border-radius:50%;background:var(--green)}
:root .slc-fase[data-d="5"] .slc-fase-art li{color:rgba(255,255,255,.72)}
:root .slc-fase[data-d="5"] .slc-fase-art li::before{background:#5FD3CE}

/* ---------- Parceiros ---------- */
:root #slc-servicos .slc-parc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0 0}
:root .slc-parc li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  transition:border-color .18s,transform .18s}
:root .slc-parc li:hover{border-color:#CFE0E0;transform:translateY(-2px)}
:root .slc-parc-n{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.012em}
:root .slc-parc-s{display:block;font-size:.82rem;color:var(--muted);margin-top:4px}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media(max-width:1120px){
  /* prefixo obrigatório: sem ele esta regra perde para #slc-servicos .slc-grid e o
     grid nunca sai de 4 colunas. Ver "armadilhas de CSS" no guia de replicação. */
  :root #slc-servicos .slc-grid{grid-template-columns:repeat(3,1fr)}
  :root #slc-servicos .slc-5d{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  /* uma coluna: o form sobe para logo abaixo da copy e os cards vão para o fim —
     no celular a captação não pode ficar depois de 4 cartões. */
  :root .slc-hero-in{grid-template-columns:1fr;grid-template-areas:"copy" "form" "cards";
    row-gap:34px}
  :root .slc-hero-copy{max-width:none}
  :root .slc-hero-form{max-width:520px}
  :root #slc-servicos .slc-hero-cards{margin-top:0;max-width:none;gap:12px}
}
@media(max-width:900px){
  :root .slc-hero{padding:64px 0 72px}
  :root .slc-h1{font-size:clamp(2.05rem,7vw,2.9rem)}
  :root #slc-servicos .slc-hero-cards{margin-top:38px;padding-top:30px;
    grid-template-columns:repeat(4,minmax(0,1fr))}
  :root #slc-servicos .slc-grid{grid-template-columns:repeat(2,1fr)}
  :root #slc-servicos .slc-parc{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
  :root .slc-layout{padding-top:40px}
  :root .slc-toolbar{gap:9px;padding:11px}
  :root .slc-search-lg{flex:1 1 100%}
  :root .slc-facets{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,1fr)}
  :root .slc-drop-b{width:100%;justify-content:space-between;padding:0 12px;font-size:.84rem}
  :root #slc-servicos .slc-drop-p{left:0;right:0;min-width:0}
  :root .slc-clear-btn{flex:1 1 100%}
  :root #slc-servicos .slc-grid{grid-template-columns:1fr;gap:14px}
  :root #slc-servicos .slc-5d{grid-template-columns:1fr}
  :root #slc-servicos .slc-parc{grid-template-columns:1fr}
  :root .slc-band{padding-top:52px}
  :root .slc-band-soft{margin-top:52px;padding:48px 0 52px}
  :root .slc-drawer{padding:56px 24px 48px}
  :root .slc-cta-in{flex-direction:column;align-items:flex-start}
  :root .slc-inline-cta{padding:22px 20px}
  :root .slc-inline-btns .slc-btn{flex:1 1 100%;justify-content:center}
}
@media(max-width:560px){
  /* 4 em linha só cabe até aqui: no celular voltam a 2×2 */
  :root #slc-servicos .slc-hero-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root .slc-facets{grid-template-columns:1fr}
  /* nesta largura o popover flutuante cobre a tela inteira: vira bloco no fluxo */
  :root #slc-servicos .slc-drop-p{position:static;box-shadow:none;margin-top:8px}
  :root .slc-hero-form{padding:22px 18px 20px}
  :root .slc-band-cta .slc-btn{flex:1 1 100%;justify-content:center}
}

:root .slc-badge{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 6px;
  border-radius:999px;background:var(--teal);color:#fff;font-size:.72rem;font-weight:800}

@media(prefers-reduced-motion:reduce){
  :root #slc-servicos *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  :root .slc-card:hover{transform:none}
}