/* Página de serviço: Integração de sistemas (/integracao-de-sistemas/)
   Só o que é desta página. Cores sempre pelas variáveis de superfície do previa.css,
   para funcionar nas direções A (clara com roxo) e B (roxo Olivas). */

/* ---------- variáveis extras por superfície (claras por padrão, escuras abaixo) ---------- */
[data-surf]{--tab-bg:#FFFFFF;--tab-th:var(--papel);--tab-hover:var(--oliva-suave);--caixa-bg:#FFFFFF;--ok:var(--teal);--ok-txt:#FFFFFF;--x:var(--roxo);--acento-txt:#FFFFFF}
html[data-dir="a"] [data-surf="roxo"],html[data-dir="a"] [data-surf="fundo"]{--tab-bg:rgba(255,255,255,.04);--tab-th:rgba(255,255,255,.07);--tab-hover:rgba(255,255,255,.06);--caixa-bg:rgba(255,255,255,.05);--ok:#6FD3BE;--ok-txt:var(--roxo-900);--x:var(--oliva);--acento-txt:var(--roxo-900)}

/* textos de apoio e links dentro do texto */
.sem-quebra{white-space:nowrap}
.nota{font-size:14.5px;color:var(--fg2)}
main section:not(.contato) :is(p,dd) > a:not(.btn):not(.link-seta){color:inherit;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s ease,color .15s ease}
main section:not(.contato) :is(p,dd) > a:not(.btn):not(.link-seta):hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}

/* ---------- 1. topo ---------- */
.pg-topo .caixa{align-items:center}
/* a coluna de texto começa sempre na mesma altura, logo abaixo da trilha; só o desenho da direita fica centralizado
   (quando o desenho era mais alto que o texto, o texto descia de 11 a 13px: RD Station e Para agências) */
.pg-topo .topo-texto{align-self:start}
.pg-topo .garantia{margin-top:18px;font-size:14px;color:var(--fg2)}
.ja-integramos{margin-top:24px;padding-top:18px;border-top:1px solid var(--linha);font-size:14.5px;color:var(--fg2);max-width:62ch}
.ja-integramos > b{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg2);margin-bottom:6px}
.ja-integramos .nomes{display:block;font-weight:600;color:var(--titulo);line-height:1.5}
.ja-integramos .link-seta{display:inline-block;margin-top:10px;font-size:14.5px}

/* fluxo ilustrado ao lado do texto: 3 cartões ligados por conexões com o caminho de cada uma */
.hero-fluxo{position:relative;padding:28px 28px 20px;border-radius:var(--raio);border:1px solid var(--linha);background:radial-gradient(circle,var(--linha) 1.2px,transparent 1.7px) 0 0/20px 20px}
.hero-fluxo ol{display:grid;justify-items:center}
.hero-fluxo .ui{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:300px;font-size:13.5px}
.hero-fluxo .ui header{font-size:13.5px;padding:9px 12px}
.hero-fluxo .ui .corpo{padding:11px 13px 13px;gap:7px}
.hero-fluxo .ui:nth-child(1){transform:translateX(-14%)}
.hero-fluxo .ui:nth-child(5){transform:translateX(14%)}
.hero-fluxo .elo{position:relative;width:100%;height:70px;display:flex;align-items:center;justify-content:center}
.hero-fluxo .elo::before{content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:0;border-left:2px dashed var(--acento);opacity:.75}
/* a bolinha do elo desce três vezes e para (antes rodava sem parar só nesta página; nas outras da família já parava) */
.hero-fluxo .elo::after{content:"";position:absolute;left:calc(50% - 4px);top:-4px;width:8px;height:8px;border-radius:50%;background:var(--acento);animation:elo-desce 1.9s linear 3}
.hero-fluxo .elo:nth-child(4)::after{animation-delay:.95s}
@keyframes elo-desce{from{top:-4px}to{top:calc(100% - 4px)}}
.hero-fluxo .rot{position:relative;z-index:1;display:inline-flex;align-items:baseline;gap:6px;padding:4px 12px;border-radius:999px;background:var(--card);color:var(--roxo-900);border:1px solid var(--linha);font-family:var(--fonte);font-size:12.5px;font-weight:600;letter-spacing:0;box-shadow:0 6px 14px -10px rgba(42,8,40,.5)}
.hero-fluxo .rot i{font-style:normal;font-size:11px;color:var(--tinta-2)}
.hero-fluxo figcaption{margin-top:16px;text-align:center;font-size:13px;color:var(--fg2)}

@media (min-width:621px) and (max-width:980px){
  /* tablet: a figura vai para baixo dos botões, na horizontal e compacta */
  .hero-fluxo{padding:22px 20px 16px}
  .hero-fluxo ol{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr) 84px minmax(0,1fr);align-items:center}
  .hero-fluxo .ui{max-width:none;font-size:12.5px}
  .hero-fluxo .ui header{font-size:12.5px}
  .hero-fluxo .ui header small,.hero-fluxo .ui .linha:nth-child(2){display:none}
  .hero-fluxo .ui:nth-child(1),.hero-fluxo .ui:nth-child(5){transform:none}
  .hero-fluxo .elo{height:auto;min-height:56px}
  .hero-fluxo .elo::before{left:0;right:0;top:calc(50% - 1px);bottom:auto;border-left:0;border-top:2px dashed var(--acento)}
  .hero-fluxo .elo::after{top:calc(50% - 4px);left:-4px;animation-name:elo-lado}
  .hero-fluxo .rot{flex-direction:column;align-items:center;gap:0;padding:3px 9px;font-size:11.5px;line-height:1.25;text-align:center}
  .hero-fluxo .rot i{display:none}
}
@keyframes elo-lado{from{left:-4px}to{left:calc(100% - 4px)}}
/* "reduzir movimento": a bolinha fica parada. A regra geral do previa.css só passou a alcançar ::before e ::after na revisão de 05/10/2026;
   esta fica como garantia para a família de serviço. Vem depois do bloco do tablet para valer também sobre a animação lateral. */
@media (prefers-reduced-motion:reduce){
  .hero-fluxo .elo::after{animation:none}
}
@media (max-width:620px){
  .hero-fluxo{display:none}
  .pg-topo .acoes{display:grid;grid-template-columns:1fr}
  .pg-topo .acoes .btn{justify-content:center}
}

/* celular (até 620px), só nos topos com a classe .com-fluxo (Integração de sistemas, Dados, BI e IA e RD Station):
   o desenho do topo volta em versão compacta, logo abaixo dos botões (Felipe, 06/10/2026, resposta 66: "Sim, nas três páginas").
   Só CSS, sobre a mesma marcação do desenho do computador (figure.hero-fluxo). Acima de 620px nada muda.
   As outras páginas que usam esta folha (Para agências, Soluções, Marketing e tecnologia, Perguntas frequentes) não levam a classe e ficam como estão.
   O que é só de uma página (as barras do BI, as linhas de RD Station) está em previa-dados.css e previa-rd.css. */
@media (max-width:620px){
  /* 1. lugar: a coluna de texto se abre e o desenho entra entre os botões e a linha "Já fizemos conversar" / "Nesta página" */
  .com-fluxo .caixa{row-gap:0}
  .com-fluxo .migalhas{margin-bottom:clamp(28px,5vw,64px)}
  .com-fluxo .topo-texto{display:contents}
  .com-fluxo .topo-texto > h1{margin-top:0}
  .com-fluxo .ja-integramos{order:2;border-top:0;padding-top:0}

  /* 2. moldura: a mesma do desenho grande (borda fina, cantos e pontilhado), mais baixa */
  .com-fluxo .hero-fluxo{order:1;display:block;position:relative;max-width:460px;margin-top:30px;padding:22px 12px 12px;background-color:var(--branco)}

  /* 3. as três telas em linha: cabeçalho e duas linhas (o que é, como ficou) */
  .com-fluxo .hero-fluxo ol{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px;justify-items:stretch;align-items:stretch}
  .com-fluxo .hero-fluxo .ui{grid-row:1;width:auto;max-width:none;transform:none;font-size:12px;line-height:1.35;border-radius:10px;box-shadow:0 0 0 1px rgba(42,8,40,.07),0 10px 18px -14px rgba(42,8,40,.55)}
  .com-fluxo .hero-fluxo .ui:nth-child(1){grid-column:1}
  .com-fluxo .hero-fluxo .ui:nth-child(3){grid-column:2}
  .com-fluxo .hero-fluxo .ui:nth-child(5){grid-column:3}
  .com-fluxo .hero-fluxo .ui header{padding:7px 9px;font-size:12px;line-height:1.3}
  .com-fluxo .hero-fluxo .ui header small,.com-fluxo .hero-fluxo .ui .linha:nth-child(2){display:none}
  .com-fluxo .hero-fluxo .ui .corpo{padding:9px 9px 10px;gap:0}
  .com-fluxo .hero-fluxo .ui .linha{display:grid;justify-items:start;gap:5px}
  .com-fluxo .hero-fluxo .ui .linha > b{text-align:left;line-height:19px}
  .com-fluxo .hero-fluxo .ui .pill{font-size:11px;line-height:15px;padding:2px 8px}

  /* 4. as ligações: um fio tracejado que desce de cada tela e passa por baixo, com o caminho de cada conexão em pílula */
  .com-fluxo .hero-fluxo .elo{grid-row:2;width:auto;height:47px;min-height:0;align-items:flex-start}
  .com-fluxo .hero-fluxo .elo:nth-child(2){grid-column:1 / span 2}
  .com-fluxo .hero-fluxo .elo:nth-child(4){grid-column:2 / span 2}
  .com-fluxo .hero-fluxo .elo::before{left:calc((100% - 10px)/4 - 1px);right:calc((100% - 10px)/4 - 1px);top:0;bottom:auto;height:17px;border:2px dashed var(--acento);border-top:0;border-radius:0 0 10px 10px;opacity:.75}
  /* um ponto parado onde o fio encosta em cada tela */
  .com-fluxo .hero-fluxo .elo::after,.com-fluxo .hero-fluxo ol::after{content:"";position:absolute;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--acento);animation:none}
  .com-fluxo .hero-fluxo .elo::after{left:calc((100% - 10px)/4 - 4px)}
  .com-fluxo .hero-fluxo ol::after{position:relative;z-index:1;top:auto;grid-row:2;grid-column:3;justify-self:center;margin-top:-4px}
  .com-fluxo .hero-fluxo .rot{display:block;margin-top:4px;padding:3px 10px;font:600 12px/1.35 var(--fonte);box-shadow:0 6px 12px -9px rgba(42,8,40,.55)}
  /* o ritmo de cada conexão, logo abaixo da pílula */
  .com-fluxo .hero-fluxo .rot i{display:block;position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:0 5px;border-radius:4px;background:var(--branco);white-space:nowrap;font-size:11px;font-weight:500;line-height:1.3;color:var(--tinta-2)}

  /* 5. selo "ilustração": um só, discreto, sobre a borda da moldura */
  .com-fluxo .hero-fluxo figcaption{position:absolute;top:-10px;left:14px;margin:0;padding:2px 9px;border:1px solid var(--linha);border-radius:999px;background:var(--branco);font:600 11px/1.3 var(--fonte);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);text-align:left}
}
@media (max-width:374px){
  .com-fluxo .hero-fluxo{padding-inline:8px}
  .com-fluxo .hero-fluxo ol{column-gap:8px}
  .com-fluxo .hero-fluxo .ui header{padding-inline:7px;font-size:11.5px}
  .com-fluxo .hero-fluxo .ui .corpo{padding-inline:7px}
  .com-fluxo .hero-fluxo .elo::before{left:calc((100% - 8px)/4 - 1px);right:calc((100% - 8px)/4 - 1px)}
  .com-fluxo .hero-fluxo .elo::after{left:calc((100% - 8px)/4 - 4px)}
}
@media (max-width:339px){
  /* telas muito estreitas (320px): sem este ajuste o cabeçalho mais comprido ("Transportadora") saía cortado */
  .com-fluxo .hero-fluxo{padding-inline:5px}
  .com-fluxo .hero-fluxo ol{column-gap:6px}
  .com-fluxo .hero-fluxo .ui header{padding-inline:5px;font-size:11px}
  .com-fluxo .hero-fluxo .ui .corpo{padding-inline:5px}
  .com-fluxo .hero-fluxo .elo::before{left:calc((100% - 6px)/4 - 1px);right:calc((100% - 6px)/4 - 1px)}
  .com-fluxo .hero-fluxo .elo::after{left:calc((100% - 6px)/4 - 4px)}
}

/* ---------- 2. sinais ---------- */
.sinais-2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin-top:36px}
.sinais-2 li{font-size:16.5px;line-height:1.45}
.sinais-pe{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px 56px;align-items:start;margin-top:30px}
.sinais-pe .lead{margin-top:0}
.sinais-pe .nota{margin-top:14px}
.sinais-pe .link-seta{display:inline-block;margin-top:4px}

/* ---------- 3. Technogym ---------- */
.tg-base{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:40px}
/* ficha da Technogym em faixa: 6 dados em 3 colunas (a linha do tempo da conta fica só no case) */
.tg-ficha .tg-dados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;row-gap:0}
.tg-ficha .tg-dados > div{border-top:1px solid #ECEAE0;padding:12px 0}
.tg-ficha .tg-dados dt,.tg-ficha .tg-dados dd{border-top:0;padding:0}
.tg-ficha .tg-dados dd{margin-top:4px}
@media (max-width:980px){.tg-ficha .tg-dados{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tg-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.tg-cab h3{margin:0}
.tg-cab img{height:26px;width:auto}
.tg-ficha dl{row-gap:0}
.tg-ficha dt,.tg-ficha dd{padding:11px 0;border-top:1px solid #ECEAE0}
.tg-ficha dt{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-2);font-weight:700;padding-right:8px}
.tg-ficha dd{font-weight:600;color:var(--tinta)}
.pratica .fecho p{max-width:62ch;font-size:15.5px;color:var(--fg2)}
.pratica .fecho p a{color:var(--titulo)}

/* ---------- 4. os 3 caminhos ---------- */
.caminho{transition:box-shadow .18s ease}
.caminho:hover{box-shadow:0 26px 48px -20px rgba(42,8,40,.45),0 2px 6px rgba(42,8,40,.08),inset 0 3px 0 var(--roxo)}
.caminho dl{grid-template-columns:6.4em 1fr}
.sub-t{margin-top:48px;font-size:1.2rem;color:var(--titulo)}
.degraus{display:grid;gap:10px;margin-top:16px;counter-reset:degrau}
.degraus li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;counter-increment:degrau}
.degraus li:nth-child(2){margin-left:36px}
.degraus li:nth-child(3){margin-left:72px}
.degraus span{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 10px;border:1px solid var(--linha);border-radius:999px;background:var(--chip);font-weight:600;font-size:15px;color:var(--titulo);line-height:1.35}
.degraus span::before{content:counter(degrau);flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12.5px/1 var(--fonte);font-variant-numeric:tabular-nums;background:var(--acento);color:var(--acento-txt)}
.degraus i{font-style:normal;font-weight:700;font-size:15px;color:var(--acento)}
.degraus i::before{content:"→ "}
.nota-degraus{margin-top:14px;font-weight:600;color:var(--titulo)}

/* tabela comparativa (caminhos e antes/depois): tabela no desktop, cartões no celular */
.comparativo{margin-top:32px;background:var(--tab-bg)}
.comparativo:focus-visible{outline-offset:4px}
.comparativo table{min-width:640px}
.comparativo caption{caption-side:top;text-align:left;padding:14px 16px 12px;font-weight:700;font-size:15px;color:var(--titulo);border-bottom:1px solid var(--linha)}
.comparativo th,.comparativo td{padding:13px 16px;line-height:1.45}
.comparativo td{color:var(--fg)}
.comparativo thead th{background:var(--tab-th)}
.comparativo thead th:not(:first-child){color:var(--titulo);font-weight:800}
.comparativo tbody th{background:var(--tab-th);font-weight:600;width:19%}
.comparativo .nivel{display:inline-flex;gap:3px;margin-right:9px;vertical-align:1px}
.comparativo .nivel i{width:8px;height:8px;border-radius:50%;background:var(--linha)}
.comparativo .nivel[data-n="1"] i:nth-child(-n+1),.comparativo .nivel[data-n="2"] i:nth-child(-n+2),.comparativo .nivel[data-n="3"] i{background:var(--acento)}
.antes-depois tbody th{width:22%}
.antes-depois tbody tr{transition:background .15s ease}
.antes-depois tbody tr:hover{background:var(--tab-hover)}
.antes-depois td[data-label="Antes"]{color:var(--fg2)}
.antes-depois td[data-label="Depois"]{color:var(--titulo);font-weight:500}
@media (min-width:621px){
  .antes-depois td{position:relative;padding-left:36px}
  .antes-depois td::before{content:"";position:absolute;left:16px;top:1.3em;width:10px;height:2px;background:var(--fg2);opacity:.7}
  .antes-depois td[data-label="Depois"]::before{top:calc(1em + 1px);width:9px;height:9px;border-radius:2px;background:var(--oliva);opacity:1;transform:rotate(45deg)}
}
.comparativo + .nota{margin-top:16px}
.caminhos-pe{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:34px}
.caminhos-pe .nota{flex:1 1 320px;max-width:62ch}

/* ---------- 5. por dentro: o fluxo real fica em previa-bloco-fluxo-real.css; aqui, só a lista "o que olhar num fluxo como este" ---------- */
.leitura-box h3{font-size:1.2rem;color:var(--titulo)}
.leitura{margin-top:14px;counter-reset:leitura;border-top:1px solid var(--linha)}
.leitura li{position:relative;padding:14px 0 14px 44px;border-bottom:1px solid var(--linha);color:var(--fg2);font-size:15.5px;line-height:1.5;counter-increment:leitura}
.leitura li::before{content:counter(leitura);position:absolute;left:0;top:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--fonte);font-variant-numeric:tabular-nums;background:var(--acento);color:var(--acento-txt)}
.leitura b{color:var(--titulo)}

/* ---------- 6. três decisões ---------- */
.decisoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.decisao{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px;align-content:start;padding:26px;border-radius:var(--raio);background:var(--card);color:var(--card-fg);border:1px solid transparent;box-shadow:var(--sombra);transition:border-color .18s ease,box-shadow .18s ease}
.decisao:hover{border-color:var(--roxo);box-shadow:0 26px 48px -20px rgba(42,8,40,.45),0 2px 6px rgba(42,8,40,.08)}
.decisao .tag{font-family:var(--fonte);font-size:13px;font-weight:600;letter-spacing:0;color:var(--roxo)}
.decisao h3{font-size:1.35rem;color:var(--roxo-900)}
.decisao p{font-size:15.5px;color:var(--tinta-2)}
.decisao .pergunta{align-self:stretch;padding:12px 14px;border-radius:10px;background:var(--oliva-suave);color:var(--roxo-900);font-size:15px;line-height:1.45}
.decisao .pergunta b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--oliva-900)}

/* ---------- 8. repertório ---------- */
.repertorio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:18px;margin-top:40px;align-items:stretch}
.rep-lado{display:grid;gap:18px;align-content:start}
.rep-lado .depo-assume{margin-top:0;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:start}
.rep-lado .depo-assume img{grid-row:1 / span 2}
.rep-lado .depo-assume blockquote,.rep-lado .depo-assume figcaption{grid-column:2}
.grupo{border-radius:var(--raio);padding:28px}
.grupo h3{font-size:1.45rem}
.grupo-sub{margin-top:6px;font-size:15px}
.implantamos{display:flex;flex-direction:column;background:var(--oliva);color:var(--roxo-900)}
.implantamos h3{color:var(--roxo-900)}
.implantamos ul{margin-top:18px;border-top:1px solid rgba(42,8,40,.16)}
.implantamos li{padding:12px 0;border-bottom:1px solid rgba(42,8,40,.16);font-size:15px;line-height:1.45}
.implantamos li b{display:block;font-size:16px}
.implantamos .link-seta{align-self:flex-start;color:var(--roxo-900)}
.implantamos ul{margin-bottom:22px}
.integramos{background:var(--papel);color:var(--tinta)}
.integramos h3{color:var(--roxo-900)}
.integramos .grupo-sub{color:var(--tinta-2)}
.integramos dl{display:grid;grid-template-columns:190px 1fr;margin-top:18px;border-top:1px solid #E3E1D6}
.integramos dt,.integramos dd{padding:12px 0;border-bottom:1px solid #E3E1D6}
.integramos dt{padding-right:16px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--roxo);line-height:1.4;padding-top:14px}
.integramos dd{margin:0;font-size:15px;line-height:1.55;color:var(--tinta-2)}
.integramos dd b{font-weight:600;color:var(--tinta)}
.integramos dd a{color:var(--roxo);text-decoration-thickness:1px;text-underline-offset:3px}
.integramos dd a:hover{text-decoration-thickness:2px}
.sistemas-pe{margin-top:26px;max-width:80ch}
.sistemas-notas p + p{margin-top:10px}

/* ---------- 9. conector pronto ---------- */
.duas-listas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px}
.lista-caso{padding:26px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--caixa-bg)}
.lista-caso h3{font-size:1.2rem;color:var(--titulo);margin-bottom:10px}
.lista-caso li{position:relative;padding:11px 0 11px 32px;border-top:1px solid var(--linha);color:var(--fg);font-size:15.5px;line-height:1.45}
.lista-caso.basta li::before{content:"✓";position:absolute;left:0;top:11px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;line-height:1;background:var(--ok);color:var(--ok-txt)}
.lista-caso.nao-basta li::before{content:"";position:absolute;left:5px;top:18px;width:10px;height:10px;border-radius:2px;background:var(--x);transform:rotate(45deg)}
.conector-pe{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 48px;margin-top:28px}
.conector-pe > div{flex:1 1 420px;max-width:72ch}
.conector-pe .nota{margin-top:10px}

/* ---------- 10. automação de processos (#automacao) ---------- */
.automacao .caixa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:start}
.automacao .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
.automacao-txt .link-seta{display:inline-block;margin-top:24px}
.auto-lista{display:grid;gap:12px}
.auto-lista li{padding:20px 22px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.auto-lista .tag{font-family:var(--fonte);font-size:13px;font-weight:600;color:var(--acento)}
.auto-lista h3{margin-top:4px;font-size:1.15rem;color:var(--titulo)}
.auto-lista p{margin-top:6px;font-size:15px;color:var(--fg2)}

/* ---------- 11. processo ---------- */
.etapas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:16px;margin-top:48px;counter-reset:etapa}
.etapas > li{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px;counter-increment:etapa}
.etapas > li::before{content:counter(etapa);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--oliva);color:var(--roxo-900);font:700 16px/1 var(--fonte);font-variant-numeric:tabular-nums}
.etapas > li:not(:last-child)::after{content:"";position:absolute;top:21px;left:56px;right:-4px;height:2px;background:repeating-linear-gradient(90deg,var(--oliva) 0 6px,transparent 6px 11px)}
.etapa{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:10px;padding:20px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--chip)}
.etapa h3{font-size:1.15rem;color:var(--titulo)}
.etapa p{font-size:14.5px;line-height:1.5;color:var(--fg2)}
.etapa .recebe{padding-top:12px;border-top:1px solid var(--linha);color:var(--fg)}
.etapa .recebe b{display:block;margin-bottom:3px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.etapas > li.destaque .etapa{border-color:var(--oliva);box-shadow:inset 0 0 0 1px var(--oliva)}
.processo-pe{margin-top:36px}

/* ---------- 13. para o time de TI (na página vem depois de "formas de trabalhar" desde 06/10/2026): escuro nas duas direções; o termo é um título pequeno em Fira Sans (sem mono e sem "›") ---------- */
html[data-dir="a"] .para-ti[data-surf]{--bg:linear-gradient(180deg,var(--roxo-900) 0%,#1C0519 100%)}
.lista-ti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin-top:40px}
.lista-ti > div{padding:18px 0;border-top:1px solid var(--linha)}
.lista-ti dt{font:700 16.5px/1.3 var(--fonte);letter-spacing:-.005em;color:var(--oliva);margin-bottom:5px}
.lista-ti dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--fg2)}
.ti-pe{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:30px}
.ti-pe .nota{flex:1 1 360px}
.ti-pe .nota a{color:var(--oliva)}

/* ---------- 12. formas de trabalhar ---------- */
.formas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.forma{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;align-content:start;padding:24px;border-radius:var(--raio);border:1px solid var(--linha);background:var(--caixa-bg);transition:border-color .15s ease}
.forma:hover{border-color:var(--roxo)}
.forma.entrada{border:2px solid var(--oliva-esc);padding:23px;background:var(--oliva-suave)}
.forma h3{font-size:1.3rem;color:var(--titulo)}
.forma p{font-size:15.5px;color:var(--fg2)}
.forma .para{padding-top:12px;border-top:1px solid var(--linha);font-size:14px}
.forma .para b{color:var(--titulo)}
.formas-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 48px;margin-top:28px}
.formas-pe > div{flex:1 1 420px;max-width:72ch}
.formas-pe .nota + p{margin-top:8px}

/* ---------- 14. perguntas frequentes ---------- */
.faq-grade{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:36px}
/* a grade já dá o respiro do título: sem a margem própria da lista (previa.css, .sec .faq), que deixava a primeira pergunta
   32px abaixo do topo do cartão roxo ao lado e dobrava o vão entre o título e a lista no celular */
.faq-grade .faq{margin-top:0}
.faq summary h3{display:inline;font-size:1.05rem;font-weight:700;line-height:1.4;color:inherit;letter-spacing:0}
.faq details > div p{max-width:70ch}
.faq details a{color:var(--titulo);text-underline-offset:3px}
.faq-nota{margin-top:18px}
.faq-lembrete{position:sticky;top:96px;padding:26px;border-radius:var(--raio);background:radial-gradient(130% 160% at 90% 0%,#9B2C95 0%,var(--roxo) 40%,var(--roxo-900) 100%);color:#fff;box-shadow:var(--sombra)}

.faq-lembrete-t{font-size:1.25rem;font-weight:800;line-height:1.2}
.faq-lembrete p:not(.faq-lembrete-t){margin-top:8px;font-size:15px;opacity:.88}
.faq-lembrete .btn{margin-top:18px;width:100%;justify-content:center}

/* ---------- 15. para continuar ---------- */
.relacionados-sec.sec{padding-block:clamp(52px,6vw,80px)}
.relacionados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 36px;margin-top:32px}
.rel-col h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--acento);margin-bottom:10px}
.rel-col ul{border-top:1px solid var(--linha)}
.rel-col a{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--linha);text-decoration:none;font-size:15.5px;font-weight:600;line-height:1.4;color:var(--titulo);transition:color .15s ease}
.rel-col a::after{content:"→";flex:none;color:var(--acento);font-weight:800;transition:transform .15s ease}
.rel-col a:hover{color:var(--acento);text-decoration:underline;text-underline-offset:3px}
.rel-col a:hover::after{transform:translateX(4px)}

/* ---------- sanfona só no celular (resposta 11 do Felipe, 06/10/2026) ----------
   O <details class="recolhe"> é só o botão; o painel é o bloco que vem logo depois dele (a tabela, as linhas seguintes ou o <dd>).
   A regra que esconde o painel só existe até 620px (no fim do bloco responsivo): no computador o estado do botão não muda nada na tela.
   .rc-botao é o botão que só aparece no celular (tabela dos três caminhos e "ver as outras quatro áreas");
   dentro de um <dt>, o botão é o próprio título, que no computador continua com a cara de sempre. */
.recolhe > summary{display:block;list-style:none}
.recolhe > summary::-webkit-details-marker{display:none}
.rc-botao,.antes-depois tr.ad-mais{display:none}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  /* processo: linha do tempo vertical (a grade de 2 colunas deixava a etapa 05 sozinha e perdia a ligação) */
  .etapas{grid-template-columns:1fr;row-gap:22px;max-width:760px}
  .etapas > li{grid-row:auto;grid-template-rows:none;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
  .etapas > li:not(:last-child)::after{display:block;top:52px;bottom:-18px;left:21px;right:auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--oliva) 0 6px,transparent 6px 11px)}
  .etapa{grid-row:auto;grid-template-rows:none}
}
@media (max-width:860px){
  .formas{grid-template-columns:1fr}
  .forma{grid-row:auto;grid-template-rows:none}
  .forma p:not(.para){max-width:66ch}
}
@media (max-width:980px){
  .tg-base,.decisoes,.repertorio,.duas-listas,.automacao .caixa,.lista-ti,.faq-grade,.relacionados,.sinais-pe{grid-template-columns:1fr}
  .decisao{grid-row:auto;grid-template-rows:none}
  .faq-lembrete{display:none}
  .relacionados{gap:28px}
}
@media (max-width:760px){
  .sinais-2{grid-template-columns:1fr}
}
@media (max-width:620px){
  .degraus li:nth-child(n){margin-left:0}
  .degraus li{position:relative;padding-left:20px}
  .degraus li::before{content:"";position:absolute;left:5px;top:-10px;bottom:-10px;border-left:2px dashed var(--linha)}
  .degraus li:first-child::before{top:50%}
  .degraus li:last-child::before{bottom:50%}
  .degraus span{border-radius:14px}
  .degraus i{padding-left:6px}
  /* tabela vira cartões, um por linha */
  .comparativo{overflow:visible;border:0;border-radius:0;background:none}
  .comparativo table{display:block;min-width:0}
  .comparativo caption{display:block;padding:0 0 12px;border-bottom:0}
  .comparativo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .comparativo thead th{display:block;width:1px;height:1px;padding:0;overflow:hidden}
  .comparativo tbody{display:grid;gap:12px}
  .comparativo tr{display:block;border:1px solid var(--linha);border-radius:var(--raio-s);background:var(--tab-bg);overflow:hidden}
  .comparativo tbody th{display:block;width:auto;padding:12px 14px;border-bottom:1px solid var(--linha)!important;color:var(--titulo);font-weight:700}
  .comparativo td{display:block;position:relative;padding:10px 14px 10px calc(6.8em + 26px)}
  .comparativo td::before{content:attr(data-label);position:absolute;left:14px;top:10px;width:6.8em;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.7;color:var(--fg2)}
  .comparativo td:last-child{border-bottom:0}
  .comparativo .nivel{display:none}
  .antes-depois td{padding-left:calc(4.6em + 26px)}
  .antes-depois td::before{width:4.6em}
  .tg-ficha dl,.tg-ficha .tg-dados{grid-template-columns:1fr}
  .tg-ficha dt{padding-bottom:0}
  .tg-ficha dd{padding-top:2px;border-top:0}
  .integramos dl{grid-template-columns:1fr}
  .integramos dt{padding:14px 0 0;border-bottom:0}
  .integramos dd{padding-top:4px}
  .grupo{padding:22px}
  .etapa{padding:16px 18px}
  .lista-caso{padding:20px}
  .lista-caso li{font-size:15px}
  .ti-pe .btn,.formas-pe .btn,.caminhos-pe .btn,.processo-pe .btn{width:100%;justify-content:center}
  /* fileiras de cartões viram o carrossel da casa (regra do Felipe, 01/10/2026): os três caminhos, as três decisões e as formas de trabalhar.
     Só vale onde a marcação tem a classe "carrossel"; nas outras páginas que usam .formas ou .caminhos nada muda.
     Os cartões ficam com a mesma altura e o último bloco de cada um (ficha, pergunta, "Bom para") encosta na base. */
  .caminhos.carrossel,.decisoes.carrossel,.formas.carrossel{display:flex;gap:12px}
  .caminhos.carrossel > .caminho,.decisoes.carrossel > .decisao{grid-row:auto;grid-template-rows:auto auto 1fr auto}
  .formas.carrossel > .forma{grid-row:auto;grid-template-rows:auto 1fr auto}
}

/* sanfona só no celular: as regras ficam dentro de @supports porque o painel é escondido com :has();
   num navegador sem :has() os botões não aparecem e tudo fica aberto, como antes */
@media (max-width:620px){
  @supports selector(:has(a)){
    .recolhe > summary{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .recolhe > summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
    .recolhe[open] > summary::after{transform:translateY(-30%) rotate(-135deg)}
    /* botão em barra, com a cara de uma pergunta do FAQ */
    .rc-botao{display:block}
    .rc-botao > summary{padding:15px 48px 15px 14px;border:1px solid var(--linha);border-radius:var(--raio-s);background:var(--chip);font-size:15.5px;font-weight:700;line-height:1.4;color:var(--titulo);transition:border-color .15s ease}
    .rc-botao > summary::after{right:20px}
    .rc-botao[open] > summary{border-color:var(--acento)}
    .rc-botao > summary small{display:block;margin-top:2px;font-size:13.5px;font-weight:400;line-height:1.4;color:var(--fg2)}
    /* 4. tabela "Os três caminhos lado a lado": fechada, só o botão; aberta, os cartões (o título da tabela fica só para leitor de tela, o botão já diz) */
    #caminhos .rc-botao{margin-top:28px}
    .rc-botao:not([open]) + .comparativo{display:none}
    .rc-botao + .comparativo{margin-top:12px}
    .rc-botao + .comparativo caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    /* 7. antes e depois: três áreas à vista; a linha do botão abre as outras quatro */
    .antes-depois tr.ad-mais{display:block;border:0;border-radius:0;background:none;overflow:visible}
    .antes-depois tr.ad-mais > td{padding:0}
    .antes-depois tr.ad-mais > td::before{content:none}
    .antes-depois tbody:has(.ad-mais .recolhe:not([open])) .ad-mais ~ tr{display:none}
    /* 8. sistemas por categoria: o nome da categoria é o botão */
    .integramos dt:has(.recolhe){padding:0}
    .integramos dt .recolhe > summary{padding:15px 36px 15px 0}
    .integramos dt .recolhe[open] > summary{padding-bottom:12px}
    .integramos dt:has(.recolhe:not([open])){border-bottom:1px solid #E3E1D6}
    .integramos dt:has(.recolhe:not([open])) + dd{display:none}
    .integramos dt:has(.recolhe) + dd{padding-top:0}
    /* 13. para o time de TI: os oito títulos são os botões */
    .lista-ti > div:has(.recolhe){padding:0}
    .lista-ti > div:last-child:has(.recolhe){border-bottom:1px solid var(--linha)}
    .lista-ti dt:has(.recolhe){margin-bottom:0}
    .lista-ti dt .recolhe > summary{padding:16px 40px 16px 0}
    .lista-ti dt .recolhe[open] > summary{padding-bottom:8px}
    .lista-ti dt:has(.recolhe:not([open])) + dd{display:none}
    .lista-ti dt:has(.recolhe) + dd{padding-bottom:18px}
  }
}

/* ajustes da primeira rodada de capturas */
/* inline-block: o sublinhado pontilhado de um nome a confirmar (Omie) não se estende ao separador */
.ja-integramos .nomes > span:not(:last-child)::after{content:" ·";font-weight:400;color:var(--fg2);display:inline-block;white-space:pre}
.ja-integramos .nomes > span{white-space:nowrap}

/* ajustes da revisão independente (segunda rodada) */
.hero-fluxo .ui header small{opacity:1}
.hero-fluxo .ui-ent header{background:#A8480F}
#t-technogym{font-size:clamp(1.8rem,2.6vw,2.5rem)}
@media (max-width:359px){
  #t-fluxo-real{font-size:1.7rem}
}