/* Página /servicos: o que é um FDE (diagrama de fluxo), jeito antigo x FDE, os três serviços e o ciclo do combo. Cartões dos serviços (.svc) ficam em site.css porque a home também usa. */
.fde__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;margin-bottom:56px}
.fde__g .head{margin-bottom:0}
.fde__txt{display:grid;gap:18px;font-size:18px}
.fde__txt p{color:var(--grafite)}
.fde__txt em{font-family:var(--f-serif);font-size:1.15em}

/* Diagrama: operação → FDE → agente rodando, com o laço de ajuste */
.fx{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 64px 220px 64px minmax(0,1fr);align-items:center;background:var(--branco);border:1px solid var(--linha);border-radius:24px;padding:clamp(20px,3vw,36px)}
.fx__col{display:grid;gap:12px}
.fx__col>.mono{color:var(--cinza)}
.fx__n{border:1px solid var(--linha);border-radius:14px;padding:14px 16px;display:grid;gap:4px;background:var(--papel)}
.fx__n b{font-weight:500;font-size:17px}
.fx__n .mono{font-size:11px;color:var(--cinza)}
.fx__out .fx__n{position:relative}
.fx__out .fx__n+.fx__n::before{content:"";position:absolute;left:24px;top:-13px;height:12px;border-left:2px solid var(--cobalto)}
.fx__n.on{border-color:var(--tinta);background:var(--tinta);color:#fff}
.fx__n.on .mono{color:var(--lima);display:flex;align-items:center;gap:8px}
.fx__n.on .mono::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lima);flex:none}
.fx__seta{height:2px;background:var(--cobalto);position:relative;margin-inline:8px}
.fx__seta::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left:8px solid var(--cobalto);border-right:0}
.fx__hub{aspect-ratio:1;border-radius:50%;background:var(--cobalto);color:#fff;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;box-shadow:0 0 0 10px rgba(45,63,224,.12)}
.fx__hub svg{width:40px;height:40px}
.fx__hub b{font-family:var(--f-serif);font-weight:400;font-size:52px;line-height:1}
.fx__hub .mono{font-size:10.5px;opacity:.85}
.fx__loop{grid-column:3 / 6;justify-self:center;margin-top:20px;color:var(--cobalto);border:1px dashed var(--cobalto);border-radius:999px;padding:7px 14px}
.fx__loop span{font-size:15px}

/* Consultoria x software x FDE */
.vs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.vs__c{border:1px solid var(--linha);border-radius:20px;padding:24px;display:grid;gap:28px;align-content:space-between;min-height:200px}
.vs__c>.mono{color:var(--cinza)}
.vs__c.b-cob{border-color:var(--cobalto)}
.vs__c span.mono{font-size:11px;color:var(--cinza)}
.vs__c.b-cob .mono{color:#fff;opacity:.85}
.vs__c h3{font-weight:500;font-size:21px;line-height:1.3;margin-top:6px}

/* Jeito antigo x com FDE */
.ov{margin:0 0 40px;display:grid;gap:14px}
.ov__row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center}
.ov__row>.mono{color:#A9ABB0}
.ov__row.novo>.mono{color:var(--lima)}
.ov ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ov li{position:relative;border-radius:12px;padding:14px 16px;font-size:16px;border:1px solid #33363D;color:#A9ABB0}
.ov li+li::before{content:"→";position:absolute;left:-22px;top:50%;transform:translateY(-50%);color:#6B6E75}
.ov .velho li:last-child{text-decoration:line-through;text-decoration-color:var(--coral)}
.ov .novo li{background:var(--cobalto);border-color:var(--cobalto);color:#fff}
.ov .novo li+li::before{color:#fff}
.ov .novo li:last-child{background:var(--lima);border-color:var(--lima);color:var(--tinta)}
.lado__g4{grid-template-columns:repeat(4,1fr)}

.step .quem{color:var(--cobalto);font-size:11px}
.svc__nota{margin-top:28px;color:var(--cinza);font-size:16px;line-height:1.7}
.svc__nota a{color:var(--cobalto)}

@media (max-width:1000px){
  .fde__g{grid-template-columns:1fr}
  .fx{grid-template-columns:1fr;gap:0;justify-items:stretch}
  .fx__seta{width:2px;height:36px;margin:8px auto}
  .fx__seta::after{right:-5px;top:auto;bottom:-2px;border:6px solid transparent;border-top:8px solid var(--cobalto);border-bottom:0}
  .fx__hub{width:180px;justify-self:center}
  .fx__loop{grid-column:auto}
  .vs{grid-template-columns:1fr}
  .vs__c{min-height:0}
  .lado__g4{grid-template-columns:1fr 1fr}
  .ov__row{grid-template-columns:1fr;gap:10px}
}
@media (max-width:700px){
  .ov ol{grid-template-columns:1fr;gap:22px}
  .ov li+li::before{content:"↓";left:16px;top:-20px;transform:none}
  .lado__g4{grid-template-columns:1fr}
}
/* Por onde começar: os níveis de adoção em escada menor, cada um com a frente que leva ao próximo */
.niv--mini{padding-top:clamp(80px,11vw,140px)}
.niv--mini .niv__d--1{min-height:200px}.niv--mini .niv__d--2{min-height:240px}.niv--mini .niv__d--3{min-height:280px}.niv--mini .niv__d--4{min-height:320px}