/* ==========================================================================
   Vitrine de automações: lista (/automacoes) e detalhe (/automacoes/{slug}).
   Usa os tokens e as classes de site.css; aqui só o que é destas páginas.
   Prefixo vt-. Os cards são os .card de site.css (partial card-automacao).
   ========================================================================== */

/* ---------- lista: topo ---------- */
.vt-honesto{margin:18px 0 0;max-width:40em;font-size:16px;line-height:1.55;color:var(--cinza-texto)}

/* ---------- lista: filtros e busca ---------- */
.vt-sec{padding-top:72px}
.vt-sec > .wrap > .eyebrow{margin-bottom:0}
.vt-filtros{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin-top:22px}
.vt-cats{display:flex;flex-wrap:wrap;gap:8px;min-width:0}

/* pílula de categoria, no padrão dos atalhos do simulador de preços */
.vt-cat{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;font:500 14px/1 var(--mono);color:var(--grafite);background:var(--papel);border:1px solid var(--linha);border-radius:999px;cursor:pointer;transition:background-color .15s ease, border-color .15s ease, color .15s ease}
.vt-cat::before{content:"";flex:none;width:8px;height:8px;border:2px solid var(--cinza);border-radius:2px;transform:rotate(45deg);transition:background-color .15s ease, border-color .15s ease}
.vt-cat:hover{border-color:var(--grafite)}
.vt-cat[aria-pressed="true"]{background:var(--grafite);border-color:var(--grafite);color:var(--off)}
.vt-cat[aria-pressed="true"]::before{background:var(--laranja);border-color:var(--laranja)}
.vt-cat:focus-visible{outline:3px solid var(--laranja);outline-offset:3px;border-radius:999px}

.vt-busca{display:grid;gap:8px;flex:1 1 240px;max-width:360px;min-width:0}
.vt-busca__rot{font:500 13px var(--mono);letter-spacing:.04em;color:var(--cinza-texto)}
.vt-busca__campo{width:100%;min-height:48px;font:400 16px/1.4 var(--texto);color:var(--grafite);background-color:var(--papel);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5' fill='none' stroke='%2366635C' stroke-width='2'/%3E%3Cpath d='M11.6 11.6 16 16' stroke='%2366635C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center;border:1px solid #CFCEC8;border-radius:12px;padding:12px 14px 12px 42px;transition:border-color .15s ease, box-shadow .15s ease;-webkit-appearance:none;appearance:none}
.vt-busca__campo::placeholder{color:var(--cinza-texto)}
.vt-busca__campo:hover{border-color:var(--cinza)}
/* foco: borda grafite e anel laranja no lugar do contorno (mesmo padrão do .form) */
.vt-busca__campo:focus{outline:none;border-color:var(--grafite);box-shadow:0 0 0 3px rgba(232,105,46,.45)}
.vt-busca__campo::-webkit-search-cancel-button{cursor:pointer}

.vt-contagem{margin:26px 0 0;font:500 13px/1.4 var(--mono);color:var(--cinza-texto)}
.vt-contagem:empty{display:none}
/* sem resultado, o aviso abaixo já diz o mesmo: a contagem sai da tela, mas
   continua no leitor de tela (aria-live) */
.vt-sec .wrap:has(> .vt-vazio:not([hidden])) > .vt-contagem{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- lista: cards ---------- */
.cards.vt-cards{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.vt-cards .card h3{overflow-wrap:break-word}
.vt-vazio{margin-top:18px;max-width:44em}
.vt-vazio .lnk{display:inline-block;margin-top:2px}
.vt-nota{margin:44px 0 0;max-width:46em}
/* a nota de risco fecha a lista: menos respiro até a chamada final */
.vt-sec{padding-bottom:24px}
.pg-automacoes .fim .h2,.pg-automacao .fim .h2{text-wrap:balance}

/* ---------- detalhe: topo ---------- */
.vt-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;align-items:center}
.vt-hero__grid--img{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.vt-hero__txt{min-width:0}
.vt-hero__t{overflow-wrap:break-word;hyphens:auto}
.vt-hero__nota{margin-top:6px}
.vt-hero__fig{margin:0;border:1px solid var(--linha);border-radius:20px;overflow:hidden;background:var(--papel);box-shadow:0 30px 60px -30px rgba(23,25,31,.25)}
.vt-hero__fig img{display:block;width:100%;height:auto}

/* ---------- detalhe: seções ---------- */
/* ritmo: as seções claras (vt-claro) se alternam com as de fundo off (passos e
   consumo). Duas claras seguidas dividem um respiro só, com uma linha fina no
   meio, em vez de somar dois respiros inteiros de seção */
.vt-claro + .vt-claro{padding-top:0}
.vt-claro:has(+ .vt-claro){padding-bottom:72px}
.vt-claro + .vt-claro > .wrap{padding-top:72px;background:linear-gradient(var(--linha),var(--linha)) no-repeat center top / calc(100% - var(--gutter) * 2) 1px}

.vt-texto{margin:0;font-size:18px;color:#3a3d45;max-width:36em}
.bloco__c > .lead + .vt-texto,.bloco__c > .vt-texto + .vt-texto{margin-top:16px}

/* passos numerados (a numeração visível sai do contador; role="list" mantém a
   lista no leitor de tela): cartões brancos sobre o fundo off, como a lista de
   segurança da home */
.vt-passos-sec{background:var(--off)}
.vt-passos{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:vt-passo}
.vt-passos li{counter-increment:vt-passo;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;padding:18px 22px;border-radius:16px;background:var(--papel);font-size:17px;line-height:1.55;color:#3a3d45}
.vt-passos li::before{content:counter(vt-passo, decimal-leading-zero);font:500 14px/1.9 var(--mono);color:var(--laranja-texto);font-variant-numeric:tabular-nums}

.vt-precisa li{font-size:17px;color:#3a3d45}
.vt-recebe p{font-size:17.5px;line-height:1.6;color:var(--grafite)}

/* consumo: a linha "N consultas por execução" num selo branco sobre o off */
.vt-consumo{background:var(--off)}
.vt-consumo__n{display:inline-flex;align-items:center;gap:14px;margin:0;padding:16px 22px;background:var(--papel);border:1px solid var(--linha);border-radius:14px;font:500 clamp(20px,2.2vw,26px)/1.25 var(--mono);letter-spacing:-.02em;color:var(--grafite)}
.vt-consumo__n::before{content:"";flex:none;width:11px;height:11px;background:var(--laranja);border-radius:2px;transform:rotate(45deg)}
.bloco__c > .vt-consumo__n + *{margin-top:24px}
.vt-consumo .nota{max-width:40em}
.bloco__c > .vt-texto + .nota{margin-top:14px}


/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .cards.vt-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .vt-sec{padding-top:56px}
  .cards.vt-cards{grid-template-columns:minmax(0,1fr)}
  .vt-hero__grid,.vt-hero__grid--img{grid-template-columns:minmax(0,1fr);gap:32px}
  .vt-busca{max-width:none;flex-basis:100%}
  .vt-passos li{grid-template-columns:32px minmax(0,1fr);padding:16px 16px;font-size:16.5px}
  .vt-claro:has(+ .vt-claro){padding-bottom:56px}
  .vt-claro + .vt-claro > .wrap{padding-top:56px}
}
@media (max-width:560px){
  /* pílulas numa fileira que rola de lado, de borda a borda: as quatro não
     cabem na largura do celular e quebrar deixava uma sozinha na segunda linha */
  .vt-filtros{gap:18px}
  .vt-cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:6px var(--gutter);scroll-padding:0 var(--gutter)}
  .vt-cats::-webkit-scrollbar{display:none}
  .vt-cat{flex:none}
  /* passo: número em cima, texto na largura toda */
  .vt-passos li{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 18px}
  .vt-passos li::before{line-height:1.4}
  .vt-consumo__n{gap:12px;padding:14px 18px;font-size:17px}
}
@media (max-width:420px){
  .vt-estatico{padding:18px}
  .vt-estatico .btn{width:100%;justify-content:center}
  .vt-cat{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){
  .vt-cat,.vt-cat::before,.vt-busca__campo{transition:none}
}