/* ==========================================================================
   Sites e software (/sites-e-software/) · componentes C-40 a C-44 e as
   sobrescritas desta página (C-16 em aço). Usa os tokens de base.css e as
   classes de secoes.css e componentes-ia.css, sem editar esses arquivos.
   Cor da frente: aço (sistemas e software). Azul continua sendo integração e
   CTA; âmbar, aprovação; verde-azulado, IA; vermelho, espera e problema.
   Estado sem JavaScript = estado final de cada cena. O JS (sites-e-software.js)
   liga as classes de animação só no desktop, com movimento e sem pausa.
   ========================================================================== */

.pagina-ss {
  --aco-claro: #b9c2d0;
  --aco-linha: rgba(142, 153, 171, .42);
  --aco-fraco: rgba(142, 153, 171, .16);
  --planta-fundo: #080a0e;
  --peca: #0b0e13;
  --teal-claro: #5fd9cd;
}
.pagina-ss [id] { scroll-margin-top: calc(var(--topo-min) + 16px); }

/* fundo quadriculado de planta, em aço */
.ss-planta-fundo,
.pp-palco, .ac-palco {
  background:
    linear-gradient(rgba(142, 153, 171, .07) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(142, 153, 171, .07) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--planta-fundo);
}

/* ==========================================================================
   SS-01 · Hero com a planta do projeto (C-40)
   ========================================================================== */

.ss-hero .ia-hero-fundo {
  background-image: linear-gradient(rgba(142, 153, 171, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(142, 153, 171, .1) 1px, transparent 1px);
}
.ss-hero { padding-top: calc(var(--topo-h) + 36px); }
.ss-hero-in { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; }
.ss-h1 { font-size: clamp(2.2rem, 1.15rem + 2.6vw, 3.5rem); max-width: 12ch; }

/* cota do H1: linha de planta que se desenha uma vez */
.ss-cota { display: block; width: min(100%, 400px); height: 14px; margin-top: 18px; overflow: visible; transform-origin: 0 50%; }
.ss-cota-l { fill: none; stroke: var(--aco); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ss-cota-txt { margin-top: 4px; font-size: .56rem; color: var(--aco-claro); }
html.js:not(.movimento-reduzido):not([data-pausa="1"]) .ss-cota { animation: ss-cota calc(1.1s * var(--motion)) var(--ease-out) .2s both; }
html.js:not(.movimento-reduzido):not([data-pausa="1"]) .ss-cota-txt { animation: ss-aparece calc(.6s * var(--motion)) var(--ease-out) .7s both; }
@keyframes ss-cota { from { transform: scaleX(0); } }
@keyframes ss-aparece { from { opacity: 0; transform: translateY(4px); } }
html.captura .ss-cota, html.captura .ss-cota-txt { animation: none !important; }
.ss-hero .hero-sub { margin-top: 22px; }
.ss-hero .hero-micro a { color: var(--txt-2); text-underline-offset: 3px; }
.ss-hero .hero-micro a:hover { color: var(--txt); }

.pp {
  position: relative; margin: 0;
  border: 1px solid var(--linha-2); border-radius: 18px;
  background: linear-gradient(180deg, var(--ink-1), rgba(10, 12, 16, .7));
  padding: 18px 18px 14px; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.pp-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-rot { color: var(--txt-3); }

/* palco: navegador, sistemas à direita e monitoramento embaixo */
.pp-palco {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-areas: "nav sis" "mon mon";
  column-gap: 30px; row-gap: 12px;
  padding: 16px 14px 12px; border-radius: 12px; border: 1px solid rgba(142, 153, 171, .2);
}

/* navegador */
.pp-nav {
  grid-area: nav; position: relative; z-index: 1;
  border-radius: 9px; border: 1px solid rgba(142, 153, 171, .6); background: var(--peca);
  transition: border-color calc(var(--dur-base) * var(--motion)) var(--ease-state), box-shadow calc(var(--dur-base) * var(--motion));
}
.pp-barra { position: relative; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-bottom: 1px solid rgba(142, 153, 171, .3); border-radius: 9px 9px 0 0; }
.pp-pontos { display: inline-flex; gap: 4px; }
.pp-pontos i { width: 6px; height: 6px; border-radius: 50%; background: rgba(142, 153, 171, .45); }
.pp-url {
  position: relative; flex: 1; height: 16px; border-radius: 5px; overflow: hidden;
  background: rgba(142, 153, 171, .09); font: 500 .5rem/16px var(--f-mono); letter-spacing: .02em; color: var(--txt-2);
}
.pp-url-a, .pp-url-b { position: absolute; left: 8px; top: 0; white-space: nowrap; transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out); }
.pp-url-a { opacity: 0; transform: translateY(-6px); }
.pp--anima:not(.pp-noar) .pp-url-a { opacity: 1; transform: none; }
.pp--anima:not(.pp-noar) .pp-url-b { opacity: 0; transform: translateY(6px); }
.pp-estado {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px;
  font: 500 .46rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 999px; border: 1px solid rgba(232, 80, 2, .5); color: var(--azul-claro);
  transition: border-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion));
}
.pp-estado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--azul-claro); }
.pp--anima:not(.pp-noar) .pp-estado { border-color: rgba(142, 153, 171, .5); color: var(--aco-claro); }
.pp--anima:not(.pp-noar) .pp-estado::before { background: var(--aco); }
.pp-espera .pp-estado, .pp-aprovado:not(.pp-noar) .pp-estado { border-color: rgba(255, 181, 71, .7) !important; color: var(--ambar) !important; }
.pp-espera .pp-estado::before, .pp-aprovado:not(.pp-noar) .pp-estado::before { background: var(--ambar) !important; }
.pp-espera .pp-estado::before { animation: pp-pisca calc(1s * var(--motion)) ease-in-out infinite; }
@keyframes pp-pisca { 50% { opacity: .25; } }
.pp-espera .pp-nav { border-color: rgba(255, 181, 71, .75); box-shadow: 0 0 0 4px rgba(255, 181, 71, .12), 0 0 34px rgba(255, 181, 71, .18); }
.pp-aprovado:not(.pp-noar) .pp-nav { border-color: rgba(255, 181, 71, .75); }

/* página desenhada */
.pp-pagina {
  position: relative; display: grid; gap: 7px; padding: 17px 9px 9px;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  grid-template-areas: "cab cab" "dest form" "cart cart" "faq faq";
}
.pp-r {
  position: relative; border-radius: 6px; border: 1px solid rgba(142, 153, 171, .24); background: rgba(142, 153, 171, .05);
  transition: background-color calc(var(--dur-base) * var(--motion)) var(--ease-state), border-color calc(var(--dur-base) * var(--motion)) var(--ease-state), box-shadow calc(var(--dur-micro) * var(--motion));
}
.pp-r > :not(.pp-n) { transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out); }
.pp-r::after {
  content: attr(data-esq); position: absolute; left: 8px; bottom: 6px;
  font: 500 .44rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(185, 194, 208, .75);
  opacity: 0; transition: opacity calc(var(--dur-micro) * var(--motion));
}
/* esquema: só com a montagem ligada e enquanto a etapa não chega */
.pp--anima .pp-r:not(.feito) { background: transparent; border-style: dashed; border-color: rgba(142, 153, 171, .55); }
.pp--anima .pp-r:not(.feito) > :not(.pp-n):not(.pp-cota-menu) { opacity: 0; transform: translateY(4px); }
.pp--anima .pp-r:not(.feito)::after { opacity: 1; }

.pp-cab { grid-area: cab; display: flex; align-items: center; gap: 10px; padding: 7px 8px; min-height: 30px; }
.pp-logo { font: 500 .54rem/1 var(--f-txt); color: var(--txt-2); white-space: nowrap; }
.pp-logo b { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--aco-claro); }
.pp-menu { display: flex; gap: 9px; margin-left: auto; font-size: .48rem; color: var(--txt-2); white-space: nowrap; }
.pp-area {
  position: relative; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; min-height: 19px;
  font: 600 .48rem/1 var(--f-txt); padding: 4px 7px; border-radius: 5px; border: 1px solid rgba(142, 153, 171, .45); color: var(--txt);
  transition: border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.pp-area svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pp-area.feito { border-color: var(--aco-claro); }
.pp--anima .pp-area:not(.feito) svg { display: none; }
.pp-cota-menu {
  position: absolute; left: 8px; right: 8px; top: -14px; text-align: center;
  font-size: .4rem; letter-spacing: .1em; color: var(--aco-claro);
}
.pp-cota-menu::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border: 1px solid rgba(185, 194, 208, .55); border-bottom: 0; }
.pp-cota-menu { opacity: .55; }
.pp--anima .pp-cab:not(.feito) .pp-cota-menu { opacity: 1; }

.pp-dest { grid-area: dest; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 9px 10px; min-height: 84px; }
.pp-h { font: 700 .8rem/1.18 var(--f-txt); letter-spacing: -.02em; color: var(--txt); max-width: 17ch; }
.pp-traco { display: grid; gap: 4px; }
.pp-traco i { display: block; height: 4px; border-radius: 2px; background: rgba(142, 153, 171, .3); }
.pp-traco i:first-child { width: 92%; }
.pp-traco i:last-child { width: 60%; }
.pp-botao { align-self: flex-start; font: 600 .48rem/1 var(--f-txt); padding: 5px 9px; border-radius: 5px; background: var(--azul); color: var(--azul-ink); }

.pp-form { grid-area: form; display: grid; gap: 4px; align-content: start; padding: 8px; }
.pp-form-tit { font: 600 .54rem/1.2 var(--f-txt); color: var(--txt); margin-bottom: 1px; }
.pp-campo { font-size: .44rem; color: var(--txt-3); border: 1px solid rgba(142, 153, 171, .3); border-radius: 4px; padding: 4px 6px; }
.pp-enviar {
  justify-self: end; font: 600 .46rem/1 var(--f-txt); padding: 4px 8px; border-radius: 4px;
  background: rgba(232, 80, 2, .16); color: var(--azul-claro); border: 1px solid rgba(232, 80, 2, .5);
}

.pp-cartoes { grid-area: cart; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 6px; padding: 7px 8px; }
.pp-sec { grid-column: 1 / -1; display: flex; align-items: center; min-height: 13px; font: 600 .52rem/1 var(--f-txt); color: var(--txt); }
.pp-cartao {
  position: relative; font: 600 .48rem/1.25 var(--f-txt); color: var(--txt-2);
  padding: 16px 7px 6px; border-radius: 5px; background: rgba(142, 153, 171, .08); border: 1px solid rgba(142, 153, 171, .2);
}
.pp-cartao::before { content: ""; position: absolute; left: 7px; top: 6px; width: 8px; height: 8px; border-radius: 2px; border: 1px solid var(--aco); }

.pp-faq { grid-area: faq; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 7px 8px; }
.pp-faq .pp-sec { grid-column: 1; }
.pp-q { grid-column: 1; font-size: .48rem; color: var(--txt-2); padding-left: 7px; border-left: 2px solid rgba(142, 153, 171, .3); transition: border-color calc(var(--dur-base) * var(--motion)); }
.pp-dados {
  grid-column: 2; grid-row: 1 / span 3; align-self: center;
  font-size: .42rem; padding: 6px 8px; border-radius: 5px; border: 1px solid rgba(23, 191, 176, .6); color: var(--teal-claro); background: rgba(23, 191, 176, .07);
}
.pp-tag-h {
  display: inline-block; margin-right: 5px; padding: 2px 3px; border-radius: 3px; vertical-align: 2px;
  font-size: .38rem; font-style: normal; letter-spacing: .04em; border: 1px solid rgba(23, 191, 176, .6); color: var(--teal-claro);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) cubic-bezier(.34, 1.56, .64, 1);
}
.pp-seo .pp-q, .pp:not(.pp--anima) .pp-q { border-left-color: var(--teal); }
.pp--anima:not(.pp-seo) .pp-tag-h { display: none; }
.pp--anima.pp-seo .pp-tag-h { animation: pp-tag calc(.45s * var(--motion)) cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes pp-tag { from { opacity: 0; transform: scale(.4); } }

/* números da planta (pares com a lista) */
.pp-n {
  position: absolute; z-index: 3; left: -8px; top: -8px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: .4rem; letter-spacing: 0; line-height: 1;
  background: var(--peca); color: var(--aco-claro); border: 1px solid rgba(142, 153, 171, .65);
  transition: background-color calc(var(--dur-base) * var(--motion)), color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion));
}
.pp-barra .pp-n { left: -9px; top: -9px; }
.pp-area .pp-n { left: auto; right: -9px; top: -10px; }
.feito > .pp-n, .pp:not(.pp--anima) .pp-n { background: var(--aco); color: var(--peca); border-color: var(--aco); }
[data-reg="3"].feito > .pp-n, .pp:not(.pp--anima) [data-reg="3"] > .pp-n { background: var(--azul); border-color: var(--azul); }
[data-reg="5"].feito > .pp-n, .pp:not(.pp--anima) [data-reg="5"] > .pp-n { background: var(--ambar); border-color: var(--ambar); }
[data-reg="6"].feito > .pp-n, .pp:not(.pp--anima) [data-reg="6"] > .pp-n { background: var(--teal); border-color: var(--teal); }

/* sistemas fora do navegador */
.pp-sistemas { grid-area: sis; position: relative; z-index: 1; display: flex; flex-direction: column; padding-top: 30px; }
.pp-sis {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 8px 9px; border-radius: 8px; border: 1px solid rgba(142, 153, 171, .5); background: var(--peca);
  font: 600 .6rem/1.2 var(--f-txt); color: var(--txt);
  transition: opacity calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.pp-sis-ic { display: inline-grid; flex: none; color: var(--aco-claro); }
.pp-sis-ic .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pp-sis[data-sis="crm"] { margin-top: 34px; }
.pp-sis[data-sis="crm"].feito, .pp:not(.pp--anima) .pp-sis[data-sis="crm"] { border-color: rgba(232, 80, 2, .7); }
.pp-sis[data-sis="crm"].feito .pp-sis-ic, .pp:not(.pp--anima) .pp-sis[data-sis="crm"] .pp-sis-ic { color: var(--azul-claro); }
.pp-msg { margin-top: 6px; font-size: .42rem; line-height: 1.45; letter-spacing: .04em; color: var(--txt-3); transition: opacity calc(var(--dur-base) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out); }
.pp--anima .pp-sis:not(.feito) { opacity: .35; border-style: dashed; }
.pp--anima .pp-msg:not(.chegou) { opacity: 0; transform: translateY(-4px); }

.pp-linhas { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pp-l { fill: none; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(.7s * var(--motion)) var(--ease-state), stroke calc(var(--dur-micro) * var(--motion)); }
.pp-l--crm { stroke: var(--azul); }
.pp-l--ras { stroke: var(--aco-claro); }
.pp--anima .pp-l:not(.feito) { stroke-dashoffset: 1; }
.pp-l.ativa { stroke-width: 2.4; }
.pp-pacote {
  position: absolute; left: 0; top: 0; z-index: 5; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 2px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .7); opacity: 0; pointer-events: none;
}

/* monitoramento do PixelCare */
.pp-monitor {
  grid-area: mon; position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(142, 153, 171, .45); background: var(--peca);
  transition: border-color calc(var(--dur-base) * var(--motion)), opacity calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.pp-mon-rot { font-size: .5rem; color: var(--aco-claro); }
.pp-mon-linha { display: block; width: 100%; height: 22px; overflow: visible; clip-path: inset(0 0 0 0); transition: clip-path calc(1.1s * var(--motion)) linear; }
.pp-mon-linha polyline { fill: none; stroke: var(--aco-claro); stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pp-mon-itens { display: flex; gap: 10px; font-size: .44rem; letter-spacing: .05em; color: var(--txt-2); white-space: nowrap; }
.pp-mon-itens span { transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out); }
.pp-mon-itens span:nth-child(2) { transition-delay: calc(.35s * var(--motion)); }
.pp-mon-itens span:nth-child(3) { transition-delay: calc(.7s * var(--motion)); }
.pp-mon-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--azul-claro); }
.pp-mon-ok::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--azul-claro); }
.pp--anima .pp-monitor:not(.feito) { border-style: dashed; opacity: .55; }
.pp--anima .pp-monitor:not(.feito) .pp-mon-linha { clip-path: inset(0 100% 0 0); }
.pp--anima .pp-monitor:not(.feito) .pp-mon-itens span { opacity: 0; }

/* pares: hover e foco acendem a parte inteira, mesmo antes de a montagem chegar nela */
.pp .ativo > :not(.pp-n) { opacity: 1 !important; transform: none !important; }
.pp-r.ativo, .pp-area.ativo, .pp-barra.ativo, .pp-monitor.ativo, .pp-sis.ativo {
  opacity: 1 !important; border-style: solid !important; border-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(185, 194, 208, .22) !important;
}
.pp-r.ativo { background: rgba(142, 153, 171, .1) !important; }
.pp-r.ativo::after { opacity: 0 !important; }
.pp .ativo > .pp-n { background: #fff !important; color: var(--peca) !important; border-color: #fff !important; transform: scale(1.15); }
.pp-area.ativo svg { display: block !important; }
.pp-monitor.ativo .pp-mon-linha { clip-path: inset(0 0 0 0) !important; }
.pp-monitor.ativo .pp-mon-itens span { opacity: 1 !important; }

/* lista de etapas (a cena no HTML) */
.pp-lista {
  list-style: none; margin-top: 10px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 16px;
}
.pp-item {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; align-content: start;
  padding: 6px 6px 7px; border-top: 1px solid var(--linha); border-radius: 6px; cursor: default;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), background-color calc(var(--dur-micro) * var(--motion));
}
.pp-item:focus-visible { outline-offset: -2px; }
.pp-num { grid-row: 1 / span 2; font-size: .54rem; color: var(--aco-claro); padding-top: 2px; }
.pp-fase { font-size: .48rem; color: var(--aco-claro); }
.pp-item[data-cor="azul"] .pp-num, .pp-item[data-cor="azul"] .pp-fase { color: var(--azul-claro); }
.pp-item[data-cor="ambar"] .pp-num, .pp-item[data-cor="ambar"] .pp-fase { color: var(--ambar); }
.pp-item[data-cor="teal"] .pp-num, .pp-item[data-cor="teal"] .pp-fase { color: var(--teal-claro); }
.pp-txt { margin-top: 2px; font-size: .74rem; line-height: 1.36; color: var(--txt-2); }
.pp--anima .pp-item:not(.feito) { opacity: .34; }
.pp--anima .pp-item:not(.feito) .pp-num, .pp--anima .pp-item:not(.feito) .pp-fase { color: var(--txt-3); }
.pp-item.agora { background: rgba(142, 153, 171, .07); }
.pp-item.agora .pp-txt { color: var(--txt); }
.pp-item.ativo { opacity: 1 !important; background: rgba(236, 238, 241, .05); }
.pp-item.ativo .pp-txt { color: var(--txt); }

.pp-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 6px; min-height: 30px; }
.pp-leg { font-size: .78rem; line-height: 1.5; color: var(--txt-2); max-width: 56ch; }

@media (max-width: 1280px) {
  .ss-hero-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; }
  .pp-palco { grid-template-columns: minmax(0, 1fr) 104px; column-gap: 22px; }
  .pp-menu span:nth-child(n+4) { display: none; }
}
@media (max-width: 1023px) {
  .ss-hero-in { grid-template-columns: 1fr; }
  .ss-h1 { max-width: 14ch; }
  .pp { padding: 14px 12px 12px; }
  .pp-palco { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "mon"; padding: 16px 10px 10px; }
  .pp-sistemas, .pp-linhas, .pp-pacote { display: none; }
  .pp-lista { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 560px) {
  .pp-menu { display: none; }
  .pp-area { margin-left: auto; }
  .pp-mon-itens span:nth-child(3) { display: none; }
  .pp-pagina { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ==========================================================================
   SS-02 · O que fazemos
   ========================================================================== */

.ss-def .ia-def-in .h2 { font-size: clamp(1.8rem, 1rem + 1.9vw, 2.7rem); max-width: 17ch; }
.ss-def-frase { border-left-color: var(--aco); }
.ss-quando { margin-top: 36px; }
.ss-quando .quando-col { padding: clamp(20px, 2vw, 30px); }
.ss-quando .quando-col h3 { font-size: 1.12rem; }
.ss-def .quando-fecho { margin-top: 24px; }

/* ==========================================================================
   SS-03 · Criar, crescer e manter (C-16 da HOME-09, em aço)
   ========================================================================== */

.ss-mapa .planta {
  background:
    linear-gradient(rgba(142, 153, 171, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(142, 153, 171, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--planta-fundo);
  border-color: rgba(142, 153, 171, .22);
}
.ss-mapa .pl-grade { stroke: rgba(142, 153, 171, .2); }
.ss-mapa .pl-cota { stroke: rgba(142, 153, 171, .6); }
.ss-mapa .pl-cota-txt { fill: rgba(185, 194, 208, .85); }
.ss-mapa .pl-contorno { stroke: var(--aco); }
.ss-mapa .pl-cruz { stroke: var(--aco-claro); }
.ss-mapa .pc { min-height: 0; padding-bottom: 22px; }
.ss-mapa .pc > p { min-height: 4.65em; }
.ss-mapa .pc ul { border-top-color: rgba(142, 153, 171, .26); }
.ss-mapa .pc a { align-items: center; padding: 11px 6px 11px 0; border-bottom-color: rgba(142, 153, 171, .2); border-radius: 2px; transition: background-color calc(var(--dur-micro) * var(--motion)); }
.ss-mapa .pc a:hover, .ss-mapa .pc a:focus-visible { color: var(--txt); background: rgba(142, 153, 171, .07); }
.pc-l { display: grid; gap: 3px; min-width: 0; }
.pc-l b { font-weight: 600; transition: color calc(var(--dur-micro) * var(--motion)); }
.pc-l small { font-size: .78rem; line-height: 1.35; font-weight: 400; color: var(--txt-3); }
.ss-mapa .pc a:hover .pc-l b, .ss-mapa .pc a:focus-visible .pc-l b { color: var(--azul-claro); }
.ss-mapa .wf-pop { border-color: rgba(142, 153, 171, .55); }
.ss-mapa-base { align-items: flex-end; }
.ss-mapa-linhas { display: grid; gap: 10px; }
.ss-mapa-linhas a { white-space: nowrap; }
.ss-urgencia.on .urgencia-ic { animation: ss-alerta calc(1.2s * var(--motion)) var(--ease-out) 1; }
@keyframes ss-alerta {
  0% { filter: drop-shadow(0 0 0 rgba(255, 107, 87, 0)); transform: scale(1); }
  35% { filter: drop-shadow(0 0 8px rgba(255, 107, 87, .9)); transform: scale(1.18); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 107, 87, 0)); transform: scale(1); }
}
@media (max-width: 1023px) {
  .ss-mapa .pc > p { min-height: 0; }
  .ss-mapa-base { align-items: flex-start; }
}

/* ==========================================================================
   SS-04 · Cases com capacidades em par (C-41)
   ========================================================================== */

.cs-legenda { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.cs-cap {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 600 .84rem/1 var(--f-txt); color: var(--txt-2); background: var(--ink-1);
  border: 1px solid var(--linha-2); border-radius: 999px; padding: 9px 9px 9px 16px;
  transition: color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.cs-cap-n { min-width: 22px; text-align: center; font-size: .56rem; color: var(--txt-3); border: 1px solid var(--linha-2); border-radius: 999px; padding: 4px 6px; transition: color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)); }
.cs-cap:hover, .cs-cap:focus-visible, .cs-cap.par, .cs-cap[aria-pressed="true"] { color: var(--txt); border-color: rgba(142, 153, 171, .75); background: rgba(142, 153, 171, .09); }
.cs-cap:hover .cs-cap-n, .cs-cap.par .cs-cap-n, .cs-cap[aria-pressed="true"] .cs-cap-n { color: var(--txt); border-color: var(--aco-claro); }
.cs-cap[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--aco-claro); }

.cs-grade { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-grade > li { display: flex; }
.cs-card {
  width: 100%; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--linha-2); border-radius: 16px; background: var(--ink-1); overflow: hidden;
  transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), border-color calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-base) * var(--motion)) var(--ease-state);
}
.cs-img { display: block; aspect-ratio: 16 / 10; background: var(--ink-3); overflow: hidden; border-bottom: 1px solid var(--linha); }
.cs-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.cs-setor { padding: 18px 20px 0; color: var(--txt-3); font-size: .58rem; }
.cs-cli { padding: 6px 20px 0; font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; }
.cs-linha { padding: 8px 20px 0; color: var(--txt-2); font-size: .9rem; line-height: 1.52; }
.cs-tags { margin-top: auto; padding: 16px 20px 20px; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tag {
  font: 500 .54rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--aco-claro);
  border: 1px solid rgba(142, 153, 171, .35); border-radius: 999px; padding: 5px 8px;
  transition: color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.cs-card:hover, .cs-card:focus-visible, .cs-card.ativo { transform: translateY(calc(-4px * var(--motion))); border-color: rgba(142, 153, 171, .65); }
.cs-card:hover .cs-img img, .cs-card:focus-visible .cs-img img { transform: scale(calc(1 + .035 * var(--motion))); }
.cs.com-foco .cs-card:not(.par) { opacity: .3; }
.cs-card.par { border-color: var(--aco-claro); }
.cs-card.par .cs-tag.par, .cs-tag.par { color: #fff; border-color: var(--aco-claro); background: rgba(142, 153, 171, .16); }
.cs-base { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.cs-base .quem-nota { margin-top: 0; }
.cs-base .link-seta { margin-top: 0; }
@media (max-width: 1180px) { .cs-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .cs-grade { grid-template-columns: 1fr; }
  .cs-cap { font-size: .78rem; padding: 8px 8px 8px 13px; }
  /* imagem mais baixa no celular: os nove cartões em uma coluna passavam de 4.000 px */
  .cs-img { aspect-ratio: 2 / 1; }
  .cs-img img { object-position: 50% 35%; }
}

/* ==========================================================================
   SS-05 · Software sob medida e integrações (C-42, área do cliente)
   ========================================================================== */

/* cabeçalho das seções com cena: título e texto em duas colunas, cena e lista embaixo */
.ss-topo .h2, #cases .ia-topo .h2 { font-size: clamp(1.9rem, 1rem + 2.05vw, 2.85rem); max-width: 21ch; }
.sw-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.sw-rot { margin-bottom: 8px; color: var(--txt-3); }
.sw-lista, .mvp-lista { list-style: none; border-bottom: 1px solid var(--linha); }
.sw-lista li, .mvp-lista li {
  position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--linha); color: var(--txt-2); line-height: 1.5;
  transition: color calc(var(--dur-micro) * var(--motion));
}
.sw-lista li::before, .mvp-lista li::before {
  content: ""; position: absolute; left: 0; top: 17px; width: 8px; height: 8px; border-radius: 2px; border: 1px solid var(--aco);
  transition: background-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.sw-lista li[data-par-ac], .mvp-lista li { cursor: default; }
.sw-lista li[data-par-ac]:hover, .sw-lista li.ativo, .sw-lista li.par,
.mvp-lista li:hover, .mvp-lista li.ativo, .mvp-lista li.par { color: var(--txt); }
.sw-lista li[data-par-ac]:hover::before, .sw-lista li.ativo::before, .sw-lista li.par::before,
.mvp-lista li:hover::before, .mvp-lista li.ativo::before, .mvp-lista li.par::before { background: var(--aco); box-shadow: 0 0 0 4px rgba(142, 153, 171, .18); }
.sw-lista li:focus-visible, .mvp-lista li:focus-visible { outline-offset: -2px; }
.sw-link { margin-top: 28px; }
.sw-ponte { margin-top: 18px; color: var(--txt-3); font-size: .92rem; line-height: 1.6; max-width: 56ch; }
.sw-ponte a { color: var(--txt-2); text-underline-offset: 3px; }
.sw-ponte a:hover { color: var(--txt); }
.ss-provas { margin-top: 30px; }

.ac { margin: 0; padding: 18px; border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1); }
.ac-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ac-rot { color: var(--txt-3); }
.ac-palco {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 128px; column-gap: 34px; align-items: start;
  padding: 14px; border-radius: 12px; border: 1px solid rgba(142, 153, 171, .2);
}
.ac-app {
  position: relative; z-index: 1; border-radius: 10px; border: 1px solid rgba(142, 153, 171, .55); background: var(--peca); overflow: hidden;
  transition: border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.ac-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid rgba(142, 153, 171, .25); }
.ac-nome { font-size: .64rem; color: var(--txt-2); }
.ac-nome b { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--aco-claro); }
.ac-login {
  display: inline-flex; align-items: center; gap: 5px; font: 500 .46rem/1 var(--f-mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--txt-2); border: 1px solid rgba(142, 153, 171, .38); border-radius: 999px; padding: 4px 8px;
  transition: border-color calc(var(--dur-micro) * var(--motion)), color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-base) * var(--motion));
}
.ac-login svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ac-corpo { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
.ac-menu { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-right: 1px solid rgba(142, 153, 171, .18); font-size: .58rem; color: var(--txt-3); }
.ac-menu span { padding: 6px 7px; border-radius: 5px; }
.ac-menu .on { color: var(--txt); background: rgba(142, 153, 171, .1); }
.ac-blocos { display: grid; gap: 10px; padding: 10px; min-width: 0; }
.ac-bloco {
  position: relative; border: 1px solid rgba(142, 153, 171, .24); border-radius: 8px; padding: 9px 10px;
  transition: border-color calc(var(--dur-base) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.ac-bloco > * { transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out); }
.ac-bloco-tit { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font: 600 .7rem/1.2 var(--f-txt); margin-bottom: 6px; }
.ac-origem { font-size: .44rem; color: var(--txt-3); font-weight: 500; }
.ac-tab { width: 100%; font-size: .62rem; }
.ac-tab th { text-align: left; font: 500 .44rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); padding: 0 6px 5px 0; }
.ac-tab td { padding: 5px 6px 5px 0; border-top: 1px solid rgba(142, 153, 171, .14); color: var(--txt-2); white-space: nowrap; }
.ac-tab td:first-child { color: var(--txt); }
.ac-tab td:last-child { text-align: right; padding-right: 0; }
.ac-linha td { transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out); }
.ac-sit {
  display: inline-block; font: 500 .46rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; padding: 3px 6px;
  border-radius: 999px; border: 1px solid rgba(142, 153, 171, .38); color: var(--aco-claro);
  transition: color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-base) * var(--motion));
}
.ac-sit--ok { border-color: rgba(232, 80, 2, .55); color: var(--azul-claro); }
.ac-sit--espera { border-color: rgba(255, 107, 87, .5); color: #ff9a8c; }
.ac-sit.muda { box-shadow: 0 0 0 4px rgba(232, 80, 2, .22), 0 0 16px rgba(232, 80, 2, .5); }
.ac-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid transparent; border-radius: 8px; padding: 2px; transition: border-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)), opacity calc(var(--dur-base) * var(--motion)); }
.ac-btn { font: 600 .58rem/1 var(--f-txt); padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(142, 153, 171, .45); color: var(--txt); }
.ac-btn:first-child { background: var(--acao); color: var(--acao-ink); border-color: var(--acao); }
.ac-acoes .ac-origem { margin-left: auto; }

.ac-sistemas { list-style: none; display: grid; gap: 10px; align-content: start; position: relative; z-index: 1; }
/* no desktop, o JS alinha cada sistema com o bloco que ele alimenta */
.ac-sistemas.alinhado { display: block; }
.ac-sistemas.alinhado .ac-sis { position: absolute; left: 0; right: 0; top: var(--y, 0); transform: translateY(-50%); }
.ac-sis {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; cursor: default;
  border: 1px solid rgba(142, 153, 171, .5); background: var(--peca); font: 600 .66rem/1.2 var(--f-txt); color: var(--txt);
  transition: opacity calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.ac-sis-ic { display: inline-grid; flex: none; color: var(--aco-claro); }
.ac-sis-ic .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ac-sis:focus-visible { outline-offset: 2px; }
.ac-linhas { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ac-l { fill: none; stroke: rgba(142, 153, 171, .6); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(.7s * var(--motion)) var(--ease-state), stroke calc(var(--dur-micro) * var(--motion)), stroke-width calc(var(--dur-micro) * var(--motion)); }
.ac-l.ativa { stroke: var(--azul-claro); stroke-width: 2; }
.ac-pacote { fill: var(--azul-claro); opacity: 0; }

/* esquema e montagem (só com .ac--anima) */
.ac--anima:not(.ac-montado) .ac-app { border-style: dashed; }
.ac--anima .ac-bloco:not(.feito), .ac--anima .ac-acoes:not(.feito) { border-style: dashed; border-color: rgba(142, 153, 171, .5); }
.ac--anima .ac-bloco:not(.feito) > *, .ac--anima .ac-acoes:not(.feito) > * { opacity: 0; }
.ac--anima .ac-linha:not(.feito) td { opacity: 0; }
.ac--anima .ac-login:not(.feito) { opacity: .3; }
.ac--anima .ac-sis:not(.feito) { opacity: .35; border-style: dashed; }
.ac--anima .ac-l:not(.feito) { stroke-dashoffset: 1; }

/* pares */
.ac .ativo { opacity: 1 !important; }
.ac-bloco.ativo, .ac-acoes.ativo { border-style: solid !important; border-color: var(--aco-claro) !important; background: rgba(142, 153, 171, .08); box-shadow: 0 0 0 3px rgba(185, 194, 208, .16); }
.ac-bloco.ativo > *, .ac-acoes.ativo > *, .ac-bloco.ativo .ac-linha td { opacity: 1 !important; }
.ac-sis.ativo, .ac-login.ativo { border-style: solid !important; border-color: #fff !important; box-shadow: 0 0 0 3px rgba(185, 194, 208, .22); }
.ac-app.ativo { border-style: solid !important; border-color: var(--aco-claro) !important; box-shadow: 0 0 0 4px rgba(185, 194, 208, .14); }
.ac-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; min-height: 30px; }
.ac-leg { font-size: .78rem; line-height: 1.5; color: var(--txt-2); max-width: 56ch; }

/* até 1500 px a tabela ficava sem folga (em 1280 cortava a situação das cargas): colunas laterais
   mais estreitas, e a rota pode quebrar em duas linhas */
@media (max-width: 1500px) {
  .ac-palco { grid-template-columns: minmax(0, 1fr) 118px; column-gap: 24px; }
  .ac-corpo { grid-template-columns: 80px minmax(0, 1fr); }
  .ac-menu { padding: 10px 6px; }
  .ac-menu span { padding: 6px 5px; }
  .ac-tab td:nth-child(2) { white-space: normal; }
}
@media (max-width: 1023px) {
  .sw-in { grid-template-columns: 1fr; }
  .ac-palco { grid-template-columns: 1fr; row-gap: 12px; padding: 10px; }
  .ac-linhas { display: none; }
  .ac-sistemas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .ac-tab { font-size: .58rem; }
  .ac-tab td { white-space: normal; }
  .ac-tab td:last-child { white-space: nowrap; }
  .ac-acoes .ac-origem { margin-left: 0; }
  .ac-corpo { grid-template-columns: 1fr; }
  .ac-menu { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid rgba(142, 153, 171, .18); }
}

/* ==========================================================================
   SS-06 · MVP Lab (C-43, ciclo de validação)
   ========================================================================== */

.mvp-in { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.mvp-rot { margin-bottom: 8px; color: var(--txt-3); }
.mvp-lista li:focus-visible { outline-offset: -2px; }
.mvp-cond { margin-top: 20px; color: var(--txt-3); font-size: .92rem; line-height: 1.55; max-width: 56ch; }
.mvp-txt > .btn { margin-top: 26px; }
.mvp-txt > .hero-ctas { margin-top: 26px; }

.ciclo { margin: 0; padding: 18px; border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1); }
/* no celular, os raios da decisão (120 px, invisíveis fora da animação) passavam da borda e alargavam a página para 395 px */
@media (max-width: 1023px) { .ciclo { overflow: clip; } }
.ciclo-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ciclo-rot { color: var(--txt-3); }
.ciclo-palco { position: relative; height: 470px; }
.ciclo-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ciclo-arco { fill: none; stroke: rgba(142, 153, 171, .5); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(1.2s * var(--motion)) var(--ease-state); }
.ciclo-ajuste { fill: none; stroke: var(--aco-claro); stroke-width: 1.6; stroke-dasharray: 5 6; transition: opacity calc(var(--dur-base) * var(--motion)); }
.ciclo-seguir { fill: none; stroke: var(--azul); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(.6s * var(--motion)) var(--ease-state); }
.ciclo-parar { fill: none; stroke: rgba(142, 153, 171, .45); stroke-width: 1.4; stroke-dasharray: 3 6; transition: opacity calc(var(--dur-base) * var(--motion)); }
.ciclo-ponta { fill: var(--azul); transition: opacity calc(var(--dur-base) * var(--motion)); }

.ciclo-etapas { list-style: none; }
.ciclo-etapa {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%); z-index: 2;
  width: 132px; display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(142, 153, 171, .5); background: var(--peca); cursor: default;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), border-color calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.ciclo-etapa:focus-visible { outline-offset: 3px; }
.ciclo-num { font-size: .5rem; color: var(--aco-claro); }
.ciclo-etapa b { font-size: .86rem; line-height: 1.2; letter-spacing: -.01em; }
.ciclo-voce { font-size: .46rem; color: var(--ambar); }
/* no desktop, o exemplo de cada etapa aparece no centro do círculo */
.ciclo-ex { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ciclo-etapa--decisao { border-color: rgba(255, 181, 71, .6); }
.ciclo-portao {
  position: absolute; right: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ambar-ink); border: 1px solid var(--ambar); color: var(--ambar);
}
.ciclo-portao svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ciclo-etapa--decisao .cad-alca { transform: translateY(-2.5px) rotate(18deg); }
.ciclo--anima .ciclo-etapa--decisao:not(.feito) .cad-alca, .ciclo-etapa--decisao.espera .cad-alca { transform: none; }
.ciclo-etapa.agora { border-color: #fff; box-shadow: 0 0 0 4px rgba(185, 194, 208, .2); }
.ciclo-etapa.espera { border-color: var(--ambar); box-shadow: 0 0 0 5px rgba(255, 181, 71, .14), 0 0 28px rgba(255, 181, 71, .25); animation: ciclo-espera calc(1.2s * var(--motion)) ease-in-out infinite; }
@keyframes ciclo-espera { 50% { box-shadow: 0 0 0 9px rgba(255, 181, 71, .06), 0 0 20px rgba(255, 181, 71, .15); } }

.ciclo-centro {
  position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); transform: translate(-50%, -50%); z-index: 1;
  width: 200px; text-align: center; display: grid; gap: 8px; pointer-events: none;
}
.ciclo-centro-n { color: var(--aco-claro); font-size: .56rem; }
.ciclo-centro-t { font-size: .9rem; line-height: 1.45; color: var(--txt); transition: opacity calc(var(--dur-micro) * var(--motion)); }
.ciclo-centro.troca .ciclo-centro-t { opacity: 0; }

.ciclo-saidas { list-style: none; }
.ciclo-saida {
  position: absolute; left: var(--x, 0); top: var(--y, 0); transform: translate(-50%, -50%); z-index: 2;
  font: 500 .54rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 9px; border-radius: 999px; border: 1px solid; background: var(--peca);
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.ciclo-saida { text-align: center; border-radius: 10px; }
.ciclo-saida b { display: block; font-weight: 500; }
.ciclo-saida--seguir { color: var(--azul-claro); border-color: rgba(232, 80, 2, .65); }
.ciclo-saida--ajustar { color: var(--aco-claro); border-color: rgba(185, 194, 208, .55); border-style: dashed; }
.ciclo-saida--parar { color: var(--txt-3); border-color: rgba(142, 153, 171, .35); border-style: dashed; }
/* o quadrado corre por baixo das etapas: some dentro de cada uma ao chegar e reaparece no arco */
.ciclo-marca {
  position: absolute; left: 0; top: 0; z-index: 1; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 2px; background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .7); opacity: 0; pointer-events: none;
}
.ciclo--anima .ciclo-etapa:not(.feito) { opacity: .32; }
.ciclo--anima .ciclo-arco:not(.feito) { stroke-dashoffset: 1; }
.ciclo--anima .ciclo-saida:not(.feito) { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
.ciclo--anima .ciclo-seguir:not(.feito) { stroke-dashoffset: 1; }
.ciclo--anima .ciclo-ajuste:not(.feito), .ciclo--anima .ciclo-parar:not(.feito), .ciclo--anima .ciclo-ponta:not(.feito) { opacity: 0; }
.ciclo-etapa.ativo, .ciclo-etapa.par { opacity: 1 !important; border-color: var(--aco-claro); background: #10141b; }
.ciclo-etapa--decisao.ativo, .ciclo-etapa--decisao.par { border-color: var(--ambar); }
.ciclo-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 10px; min-height: 30px; }
.ciclo-leg { font-size: .78rem; line-height: 1.5; color: var(--txt-2); max-width: 56ch; }

/* 1024 a 1279 px: a tabela da área do cliente (SS-05) e o círculo (SS-06) precisam de cerca de 600 px;
   em duas colunas eles ficavam com 470 px, cortando a tabela e encavalando as etapas. Texto e cena empilham. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sw-in, .mvp-in { grid-template-columns: minmax(0, 720px); }
}
@media (max-width: 1023px) {
  .mvp-in { grid-template-columns: 1fr; }
  .ciclo-palco { height: auto; }
  .ciclo-svg, .ciclo-centro, .ciclo-marca { display: none; }
  .ciclo-etapas { display: grid; gap: 10px; margin-left: 8px; padding-left: 22px; border-left: 2px solid rgba(142, 153, 171, .35); }
  .ciclo-etapa { position: relative; left: auto; top: auto; transform: none; width: auto; opacity: 1 !important; }
  .ciclo-ex { position: static; width: auto; height: auto; margin: 2px 0 0; overflow: visible; clip: auto; white-space: normal; font-size: .86rem; line-height: 1.5; color: var(--txt-2); }
  .ciclo-saidas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .ciclo-saida { position: static; transform: none; opacity: 1 !important; text-align: left; border-radius: 999px; }
  .ciclo-saida b { display: inline; }
}

/* ==========================================================================
   SS-07 · Crescer: SEO, GEO e conversão
   ========================================================================== */

.ss-cartao--aco { --c: var(--aco); --c-claro: var(--aco-claro); }
.ss-cartao--teal { --c: var(--teal); --c-claro: var(--teal-claro); }
.cro {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 900px;
  margin-top: 22px; padding: 20px 22px; border: 1px solid var(--linha-2); border-radius: 16px; background: var(--ink-1);
  transition: border-color calc(var(--dur-micro) * var(--motion));
}
.cro:hover { border-color: rgba(142, 153, 171, .6); }
.cro-ic svg { width: 32px; height: 32px; fill: none; stroke: var(--aco-claro); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cro p { color: var(--txt-2); line-height: 1.6; }
.cro b { color: var(--txt); font-weight: 600; }

/* ==========================================================================
   SS-08 · Manter: PixelCare (C-44, semana de sustentação)
   ========================================================================== */

.manter-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.sem-tipos { list-style: none; border-bottom: 1px solid var(--linha); }
.sem-tipos li {
  position: relative; display: grid; gap: 3px; padding: 12px 0 12px 22px; border-top: 1px solid var(--linha); cursor: default;
  transition: background-color calc(var(--dur-micro) * var(--motion));
}
.sem-tipos li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--c); opacity: .55; transition: opacity calc(var(--dur-micro) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)); }
.sem-tipos b { font-weight: 600; color: var(--txt); }
.sem-tipos span { color: var(--txt-2); font-size: .92rem; line-height: 1.5; }
.sem-tipos li:hover, .sem-tipos li.ativo, .sem-tipos li.par { background: rgba(142, 153, 171, .05); }
.sem-tipos li:hover::before, .sem-tipos li.ativo::before, .sem-tipos li.par::before { opacity: 1; box-shadow: 0 0 10px var(--c); }
.sem-tipos li:focus-visible { outline-offset: -2px; }
[data-tipo="preventivo"] { --c: var(--aco); --c-claro: var(--aco-claro); }
[data-tipo="corretivo"] { --c: var(--sinal); --c-claro: #ff9a8c; }
[data-tipo="evolutivo"] { --c: var(--azul); --c-claro: var(--azul-claro); }
.manter-planos { margin-top: 22px; color: var(--txt-2); line-height: 1.6; max-width: 56ch; }
.manter-txt > .btn { margin-top: 20px; }
.manter-rot { margin-top: 48px; margin-bottom: 10px; color: var(--txt-3); }
.manter-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.manter-links a {
  display: inline-flex; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--linha-2); text-decoration: none; font-size: .86rem; color: var(--txt);
  transition: border-color calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy);
}
.manter-links a:hover, .manter-links a:focus-visible { border-color: rgba(142, 153, 171, .7); transform: translateY(calc(-2px * var(--motion))); }
.manter-ponte { margin-top: 26px; color: var(--txt-2); line-height: 1.6; max-width: 76ch; }
.manter-ponte a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; margin-left: 4px; }

.sem { margin: 0; padding: 18px; border: 1px solid var(--linha-2); border-radius: 18px; background: var(--ink-1); }
.sem-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sem-rot { color: var(--txt-3); }
.sem-estado { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .56rem; color: var(--txt-2); }
.sem-estado i { width: 7px; height: 7px; border-radius: 50%; background: var(--azul-claro); box-shadow: 0 0 0 0 rgba(255, 122, 51, .5); }
.sem-quadro { position: relative; }
.sem-dias { list-style: none; display: grid; gap: 8px; }
.sem-dia { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px; border: 1px solid rgba(142, 153, 171, .2); border-radius: 10px; background: var(--peca); }
.sem-dia-nome { padding-top: 9px; color: var(--txt-3); font-size: .56rem; }
.sem-evs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sem-ev {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "hora tipo" "txt txt"; gap: 5px 8px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(142, 153, 171, .26); border-left: 3px solid var(--c); background: rgba(142, 153, 171, .04);
  cursor: default;
  transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-out), transform calc(var(--dur-base) * var(--motion)) var(--ease-out), border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-base) * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion));
}
.sem-ev:focus-visible { outline-offset: 2px; }
.sem-hora { grid-area: hora; font-size: .5rem; color: var(--txt-3); }
.sem-tipo { grid-area: tipo; justify-self: end; font-size: .44rem; color: var(--c-claro); }
.sem-txt { grid-area: txt; font-size: .74rem; line-height: 1.4; color: var(--txt-2); }
.sem-alerta-t, .sem-aguarda-t { display: none; }
/* resolvido: a barra continua vermelha (tipo corretivo, como na legenda); só o rótulo e o fundo se apagam */
.sem-ev--alerta .sem-resolvido-t { color: var(--txt-2); }
.sem-ev--alerta.alerta { --c: var(--sinal); --c-claro: #ff9a8c; background: rgba(255, 107, 87, .08); border-color: rgba(255, 107, 87, .45); }
.sem-ev--alerta.alerta .sem-alerta-t { display: inline; }
.sem-ev--alerta.alerta .sem-resolvido-t { display: none; }
.sem-ev--aprov { --c: var(--ambar); --c-claro: var(--ambar); }
.sem-ev--aprov.espera { background: rgba(255, 181, 71, .08); border-color: rgba(255, 181, 71, .55); animation: sem-espera calc(1.2s * var(--motion)) ease-in-out infinite; }
.sem-ev--aprov.espera .sem-aguarda-t { display: inline; }
.sem-ev--aprov.espera .sem-aprovado-t { display: none; }
@keyframes sem-espera { 50% { box-shadow: 0 0 0 5px rgba(255, 181, 71, .1); } }
.sem-ev .raios { left: 18px; top: 50%; }
/* cursor do dia: uma barra de aço à esquerda do quadro, na altura do dia em curso */
.sem-cursor { position: absolute; left: -11px; top: 0; width: 3px; height: 40px; z-index: 3; border-radius: 2px; opacity: 0; pointer-events: none; background: var(--aco-claro); box-shadow: 0 0 12px rgba(185, 194, 208, .6); }
.sem--anima .sem-ev:not(.feito) { opacity: 0; transform: translateY(-6px); }
.sem.com-foco .sem-ev:not(.par) { opacity: .32; }
.sem-ev.ativo, .sem-ev.par { opacity: 1 !important; transform: none !important; border-color: var(--c-claro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.sem-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; min-height: 30px; }
.sem-leg { font-size: .78rem; line-height: 1.5; color: var(--txt-2); max-width: 58ch; }

@media (max-width: 1023px) {
  .manter-in { grid-template-columns: 1fr; }
  .sem-cursor { display: none; }
}
@media (max-width: 560px) {
  .sem-dia { grid-template-columns: 1fr; gap: 6px; }
  .sem-dia-nome { padding-top: 0; }
  .sem-evs { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SS-09 · Onde cada alternativa para (C-19 com etapas próprias)
   ========================================================================== */

.ss-altf .altf-legenda { gap: 12px 26px; }
.alt-fecho a { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }

/* ==========================================================================
   SS-10 · Ponte para a frente de IA
   ========================================================================== */

.ponte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 3.4vw, 52px); border-radius: 20px; border: 1px solid var(--linha-2);
  background: linear-gradient(135deg, rgba(142, 153, 171, .07), rgba(23, 191, 176, .05) 70%);
  transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-snappy), border-color calc(var(--dur-micro) * var(--motion));
}
.ponte:hover, .ponte:focus-within { transform: translateY(calc(-4px * var(--motion))); border-color: rgba(23, 191, 176, .45); }
.ponte-rot { color: var(--txt-3); margin-bottom: 14px; }
.ponte-h2 { font-size: clamp(1.8rem, 1rem + 1.9vw, 2.7rem); max-width: 19ch; }
.ponte-p { margin-top: 20px; color: var(--txt-2); font-size: 1.04rem; line-height: 1.62; max-width: 58ch; }
.ponte-links { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.ponte-mapear { color: var(--txt); font-weight: 600; text-underline-offset: 4px; }
.ponte-des { position: relative; aspect-ratio: 420 / 200; }
.ponte-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ponte-l { fill: none; stroke: rgba(142, 153, 171, .6); stroke-width: 1.5; }
.ponte-desvio { fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(1.1s * var(--motion)) var(--ease-state), stroke-width calc(var(--dur-micro) * var(--motion)), filter calc(var(--dur-micro) * var(--motion)); }
.ponte--anima:not(.on) .ponte-desvio { stroke-dashoffset: 1; }
.ponte:hover .ponte-desvio, .ponte:focus-within .ponte-desvio { stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(23, 191, 176, .7)); }
.ponte-no {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid rgba(142, 153, 171, .55); background: var(--peca); font: 600 .64rem/1.25 var(--f-txt); white-space: nowrap;
}
.ponte-no > span { display: inline-grid; color: var(--aco-claro); }
.ponte-no .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ponte-no--manual { flex-direction: column; gap: 4px; border-style: dashed; border-color: rgba(255, 107, 87, .6); color: #ffb3a8; transition: opacity calc(var(--dur-base) * var(--motion)); }
.ponte-no--manual > span { color: var(--sinal); }
.ponte-no--manual em { font-style: normal; font-size: .44rem; color: var(--sinal); border: 1px solid rgba(255, 107, 87, .5); border-radius: 4px; padding: 2px 5px; }
.ponte.on .ponte-no--manual, .ponte:not(.ponte--anima) .ponte-no--manual { opacity: .62; }
.ponte-desvio-rot { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); color: var(--teal-claro); font-size: .52rem; white-space: nowrap; transition: opacity calc(var(--dur-base) * var(--motion)) .5s; }
.ponte--anima:not(.on) .ponte-desvio-rot { opacity: 0; }
@media (max-width: 1023px) {
  .ponte { grid-template-columns: 1fr; }
  .ponte-des { max-width: 460px; }
}
@media (max-width: 560px) {
  .ponte-no { font-size: .56rem; padding: 6px 8px; }
  .ponte-desvio-rot { font-size: .46rem; }
}

/* ==========================================================================
   SS-12 · CTA final
   ========================================================================== */

.ss-final .final-h2 { max-width: 20ch; }

/* Movimento reduzido: tudo no estado final (o JS nem liga as classes de animação) */
html.movimento-reduzido .pp-pacote, html.movimento-reduzido .ciclo-marca { display: none; }