/* PÁGINAS DE SERVIÇO (Google Meu Negócio e criação de sites) — só o que
   /styles.css e /agentes-de-ia-para-empresas/agentes.css não têm.
   Abertura, régua, termo, lados, processo, dúvidas e chamada final vêm de lá.

   LINGUAGEM: a mesma do resto do site. Papel, fio fino, tipografia grande,
   marca-texto ciano. Cada página ganha uma peça própria na abertura:
   · Google: a ficha do perfil, conferida item por item
   · Sites: o celular com uma prévia real rolando devagar
   Tudo termina e para. Sem JS aparece tudo pronto. Com "reduzir movimento",
   nada se mexe e tudo fica no estado final. */

/* cada seção pinta o próprio campo, como na página de agentes */
.pg-servico [data-campo="ink"] { --campo-fundo: var(--ink); --campo-texto: var(--paper); --campo-texto-2: #b5c4c9; --campo-fio: var(--line); --campo-realce: var(--cyan); --campo-indice: var(--cyan); }
.pg-servico main [data-campo] { background: var(--campo-fundo); color: var(--campo-texto); }

.ab-titulo-servico { font-size: clamp(2.4rem, 5.2vw, 5.9rem); }

/* ----------------------------------------------- Google · a ficha do perfil */

.perfil {
  margin: 0; justify-self: end; width: min(100%, 520px);
  border: 1px solid var(--campo-fio); border-top: 2px solid var(--campo-texto);
  background: color-mix(in srgb, var(--campo-fundo) 94%, var(--campo-texto));
}
.perfil ol { list-style: none; margin: 0; padding: 4px 20px; }
.perfil li { display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px dashed var(--campo-fio); font: 500 clamp(.98rem, 1.2vw, 1.08rem)/1.3 var(--display); letter-spacing: -.02em; }
.perfil li:last-child { border-bottom: 0; }
.perfil li small { display: block; margin-top: 2px; font: 400 .82rem var(--body); letter-spacing: 0; color: var(--campo-texto-2); }
.perfil svg { width: 22px; height: 22px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.perfil svg rect { stroke: var(--campo-texto); stroke-width: 1.5; }
.perfil svg path { stroke: var(--campo-realce); stroke-width: 2.6; }
.perfil figcaption { padding: 14px 20px 16px; border-top: 1px solid var(--campo-fio); font-size: .82rem; color: var(--campo-texto-2); }

@media (prefers-reduced-motion: no-preference) {
  .js .perfil svg path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: confere .5s var(--curva-entrada) both; animation-delay: calc(900ms + var(--k) * 180ms); }
  .js .perfil li { animation: perfil-linha .6s var(--curva-entrada) both; animation-delay: calc(700ms + var(--k) * 180ms); }
}
@keyframes confere { to { stroke-dashoffset: 0; } }
@keyframes perfil-linha { from { opacity: .35; } to { opacity: 1; } }

/* os números do Google, com a fonte ao lado */
.numeros-servico { margin-top: clamp(44px, 5vw, 72px); }
.google-fonte a { border-bottom: 1px solid var(--campo-fio); }
@media (hover: hover) and (pointer: fine) { .google-fonte a:hover { color: var(--campo-realce); border-color: var(--campo-realce); } }

/* ------------------------------------------------- Sites · o celular */

.aparelho { margin: 0; justify-self: end; display: grid; justify-items: center; gap: 16px; }
.aparelho-tela {
  position: relative; overflow: hidden;
  width: clamp(220px, 22vw, 290px); aspect-ratio: 9 / 18.5;
  border: 9px solid var(--ink); border-radius: 38px;
  background: var(--ink); box-shadow: 0 30px 60px rgba(26, 44, 53, .22);
}
.aparelho-tela img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; }
.aparelho figcaption { max-width: 300px; text-align: center; font-size: .82rem; line-height: 1.45; color: var(--campo-texto-2); }
.aparelho figcaption a { border-bottom: 1px solid var(--campo-fio); color: var(--campo-texto); }
@media (prefers-reduced-motion: no-preference) {
  .js .aparelho-tela img { animation: tela-desce 16s var(--curva) 1.4s both; }
}
/* a tela desce uma vez até o meio da página e para ali */
@keyframes tela-desce { to { translate: 0 -38%; } }

/* o caminho do cliente: Google, site, conversa */
.caminho { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(44px, 5vw, 72px) 0 0; padding: 0; border-top: 2px solid var(--campo-texto); counter-reset: passo; }
.caminho li { position: relative; padding: 24px clamp(18px, 2.4vw, 34px) 8px 0; }
.caminho li + li { padding-left: clamp(18px, 2.4vw, 34px); border-left: 1px solid var(--campo-fio); }
.caminho li + li::before { content: "→"; position: absolute; left: -.55em; top: 22px; padding: 0 2px; background: var(--campo-fundo); font: 500 1rem var(--display); color: var(--campo-realce); }
.caminho small { display: block; font: 500 .75rem ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--campo-indice); }
.caminho h3 { margin: 10px 0 10px; font: 600 clamp(1.5rem, 2.6vw, 2.4rem)/1 var(--display); letter-spacing: -.065em; }
.caminho p { margin: 0; max-width: 22rem; font-size: 1rem; line-height: 1.5; color: var(--campo-texto-2); }
.nota-servico { margin: clamp(32px, 4vw, 48px) 0 0; max-width: 40rem; font-size: 1.02rem; line-height: 1.55; color: var(--campo-texto-2); }
.nota-servico a { color: var(--campo-texto); border-bottom: 1px solid var(--campo-realce); }
@media (hover: hover) and (pointer: fine) { .nota-servico a:hover { color: var(--campo-realce); } }

/* as prévias do portfólio, como índice */

/* ------------------------------------------------------- telas menores */

@media (max-width: 1100px) {
  .perfil, .aparelho { justify-self: start; }
}
@media (max-width: 800px) {
  .caminho { grid-template-columns: minmax(0, 1fr); }
  .caminho li, .caminho li + li { padding: 22px 0 18px; border-left: 0; }
  .caminho li + li { border-top: 1px solid var(--campo-fio); }
  .caminho li + li::before { content: "↓"; left: 0; top: -.75em; padding: 0 6px 0 0; }
  .aparelho { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .perfil svg path { stroke-dashoffset: 0; }
}

/* o fluxo ilustrativo da automação: quatro etapas na mesma régua */
.caminho-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.caminho-4 h3 { font-size: clamp(1.2rem, 1.9vw, 1.7rem); }
@media (max-width: 1000px) { .caminho-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .caminho-4 li:nth-child(3) { padding-left: 0; border-left: 0; } .caminho-4 li:nth-child(3)::before { content: none; } .caminho-4 li:nth-child(n+3) { border-top: 1px solid var(--campo-fio); } }
@media (max-width: 800px) { .caminho-4 { grid-template-columns: minmax(0, 1fr); } .caminho-4 li:nth-child(3)::before { content: "↓"; } }
/* ----------------------------------------------- O que fazemos · o palco dos agentes */
/* Os personagens do vídeo "Agentes de IA sob medida" (o mesmo render 3D, a
   mesma luz): cada agente é especializado numa tarefa. Sem painel: o palco
   é TRANSPARENTE e faz parte da página (pedido de 28/10/2026); um agente em
   foco, grande, com a sombra no chão; o
   nome e o que ele faz; os seis embaixo para escolher. Ocupa a coluna da
   direita como a ficha do Google (até 540px) e fica no mesmo eixo dela. */
.elenco {
  position: relative; margin: 0; justify-self: center; container-type: inline-size;
  width: min(100%, 540px, calc((100svh - var(--topo) - 150px) * 1.15)); aspect-ratio: 115 / 100;
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: clamp(8px, 2.4cqi, 14px);
  padding: clamp(14px, 4cqi, 24px); box-sizing: border-box;
  background: transparent; color: var(--campo-texto); text-align: left;
}
.elenco-palco { position: relative; min-height: 0; }
.elenco-luz { position: absolute; left: 50%; bottom: 4%; width: 70%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(114, 245, 235, .22), rgba(114, 245, 235, .06) 60%, transparent); pointer-events: none; }
.elenco-ator {
  position: absolute; inset: 0 0 12%; display: block; width: 100%; height: 88%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%;
}
/* no branco, o chão é uma sombra suave embaixo do agente (o reflexo do palco preto saiu) */
.elenco-palco::after { content: ""; position: absolute; left: 50%; bottom: 6%; width: 46%; height: 8%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(26, 44, 53, .22), transparent); pointer-events: none; }
.elenco-ator { z-index: 1; }
.elenco-legenda { margin: 0; text-align: center; display: grid; gap: 2px; }
.elenco-legenda small { font: 500 max(.75rem, 2cqi) ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; color: #156f5e; }
.elenco-legenda b { font: 600 clamp(1.2rem, 5.4cqi, 1.9rem)/1.05 var(--display); letter-spacing: -.05em; }
.elenco-legenda span { font-size: max(.8rem, 2.7cqi); line-height: 1.35; color: var(--campo-texto-2); }
.elenco-escolha { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1.6cqi, 10px); }
.elenco-escolha button {
  aspect-ratio: 1; padding: 12%; border: 1px solid var(--campo-fio); border-radius: 10px; background: transparent; cursor: pointer;
  transition: border-color var(--t-micro) var(--curva), background-color var(--t-micro) var(--curva), translate var(--t-ui) var(--curva);
}
.elenco-escolha button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.elenco-escolha button[aria-pressed="true"] { border-color: #156f5e; background: rgba(114, 245, 235, .18); box-shadow: inset 0 0 0 1px #156f5e; }
.elenco-escolha button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .elenco-escolha button:not([aria-pressed="true"]):hover { border-color: rgba(26, 44, 53, .35); translate: 0 -3px; } }
/* a troca: o agente novo pousa, amassa e assenta (como no vídeo) */
@keyframes ator-pousa { 0% { translate: 0 -18%; opacity: 0; } 45% { translate: 0 0; scale: 1.08 .9; opacity: 1; } 75% { scale: .97 1.03; } 100% { scale: 1 1; } }
@media (prefers-reduced-motion: no-preference) {
  .js .elenco-escolha button { animation: foco-leitura .5s var(--curva-entrada) both; animation-delay: calc(.7s + var(--k, 0) * 90ms); }
  .js .elenco-escolha button:nth-child(2) { --k: 1; } .js .elenco-escolha button:nth-child(3) { --k: 2; } .js .elenco-escolha button:nth-child(4) { --k: 3; }
  .js .elenco-escolha button:nth-child(5) { --k: 4; } .js .elenco-escolha button:nth-child(6) { --k: 5; }
  .js .elenco-ator { animation: ator-pousa .8s cubic-bezier(.3, 1.4, .5, 1) .45s both; }
}
@keyframes foco-leitura { from { opacity: 0; } }
@media (min-width: 1024px) {
  :root .pg-servico .ab .elenco { grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: center; }
}
/* celular: o palco usa a altura que sobra depois do texto e dos botões */
@media (max-width: 800px) {
  .elenco { width: min(100%, 440px, max(290px, calc((100svh - var(--topo) - 500px) * 1.15))); margin-top: 40px; }
}

/* ----------------------------------------------- O que fazemos · cada etapa com o seu agente */
.etapas-agentes li { display: grid; align-content: start; gap: 6px; }
.etapas-agentes img { width: clamp(64px, 6.4vw, 104px); height: auto; margin: 0 0 6px -6px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.etapas-agentes h3 { margin: 0; }
.etapas-agentes li > span { font-size: .85rem; color: var(--campo-texto-2); }
.etapas-agentes li + li::before { top: 58px; }
/* Sob medida. Sob controle. — a frase do vídeo, com as três garantias */
.controle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px clamp(20px, 3vw, 44px); margin-top: clamp(20px, 3.4svh, 36px); padding-top: clamp(14px, 2.2svh, 22px); border-top: 1px solid var(--campo-fio); }
.controle-titulo { margin: 0; font: 600 clamp(1.25rem, 1.9vw, 1.8rem)/1 var(--display); letter-spacing: -.05em; }
.controle-titulo span { color: var(--campo-realce); }
.controle-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; }
.controle-lista li { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--campo-texto); }
.controle-lista li { position: relative; }
/* o visto: um quadrado ciano com o traço em tinta, só em CSS (a CSP aceita imagem só do próprio site) */
.controle-lista li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 4px; background: var(--campo-realce); }
.controle-lista li::after { content: ""; position: absolute; left: 5.5px; top: 50%; width: 4px; height: 8px; margin-top: -5.5px; border: solid var(--ink); border-width: 0 2px 2px 0; rotate: 45deg; }

/* ----------------------------------------------- O que fazemos · o fecho com o elenco */
.elenco-fila { display: flex; align-items: flex-end; gap: clamp(8px, 1.4vw, 18px); margin-top: clamp(28px, 5svh, 56px); }
.elenco-fila img { width: clamp(42px, 4.4vw, 68px); height: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4)); }
.elenco-fila .fila-ponto { width: clamp(56px, 6vw, 92px); }
@media (prefers-reduced-motion: no-preference) {
  .js .elenco-fila img { opacity: 0; translate: 0 18px; transition: opacity .6s var(--curva-entrada), translate .7s cubic-bezier(.3, 1.4, .5, 1); }
  .js .reveal.is-visible ~ .elenco-fila img, .js .elenco-fila.is-visible img { opacity: 1; translate: 0 0; }
  .js .elenco-fila img:nth-child(2) { transition-delay: .08s; } .js .elenco-fila img:nth-child(3) { transition-delay: .16s; } .js .elenco-fila img:nth-child(4) { transition-delay: .24s; }
  .js .elenco-fila img:nth-child(5) { transition-delay: .32s; } .js .elenco-fila img:nth-child(6) { transition-delay: .4s; } .js .elenco-fila img:nth-child(7) { transition-delay: .48s; }
}
.controle-ir { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; font-size: .95rem; color: var(--campo-texto); }
.controle-ir::after { content: "→"; color: var(--campo-realce); transition: translate var(--t-micro) var(--curva); }
@media (hover: hover) and (pointer: fine) { .controle-ir:hover::after { translate: 4px 0; } }
@media (max-width: 800px) { .controle-ir { margin-left: 0; } }
/* a faixa de etapas com agentes: mais junta do texto, nomes um pouco menores */
:root .oque .etapas-agentes { margin-top: clamp(22px, 4svh, 44px); }
:root .etapas-agentes h3 { font-size: clamp(1.15rem, 1.55vw, 1.5rem); }
:root .etapas-agentes li { padding-top: 18px; }
:root .oque .controle { column-gap: clamp(18px, 2.2vw, 32px); }
:root .oque .controle-lista { gap: 8px 20px; }
:root .oque .nota-lateral { margin-top: 12px; }

/* ----------------------------------------------- O que fazemos · os agentes se mexem (como no vídeo) */
/* Cada gesto termina e para. O agente gira em volta do próprio eixo, com a
   base no chão (transform-origin embaixo), e amassa ao pousar. */
.elenco-palco { perspective: 900px; }
@media (prefers-reduced-motion: no-preference) {
  .elenco-ator.gesto-gira    { animation: gesto-gira 1s cubic-bezier(.3, 0, .2, 1) both; }
  .elenco-ator.gesto-duplo   { animation: gesto-duplo .95s ease-in-out both; }
  .elenco-ator.gesto-balanca { animation: gesto-balanca 1.1s ease-out both; }
  .elenco-ator.gesto-treme   { animation: gesto-treme .9s ease-out both; }
  .elenco-ator.gesto-salta   { animation: gesto-salta .9s cubic-bezier(.3, 1.4, .5, 1) both; }
  .elenco-ator.gesto-pula    { animation: ator-pousa .55s cubic-bezier(.3, 1.4, .5, 1) both; }
  /* a escolha: o agente apontado sobe um pouco; o escolhido dá um pulinho */
  .elenco-escolha button img { transition: translate var(--t-ui) var(--curva), scale var(--t-ui) var(--curva); transform-origin: 50% 100%; }
  .elenco-escolha button[aria-pressed="true"] img { animation: miniatura-pula .5s cubic-bezier(.3, 1.4, .5, 1) both; }
  /* etapas e fecho: os agentes chegam pulando, um depois do outro, e param */
  .js .etapas-agentes.reveal.is-visible img { animation: chega-pulando .8s cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: 50% 100%; }
  .js .etapas-agentes.reveal.is-visible li:nth-child(2) img { animation-delay: .15s; }
  .js .etapas-agentes.reveal.is-visible li:nth-child(3) img { animation-delay: .3s; }
  .js .etapas-agentes.reveal.is-visible li:nth-child(4) img { animation-delay: .45s; }
  .js .reveal.is-visible ~ .elenco-fila img { animation: chega-pulando .8s cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: 50% 100%; }
  .js .reveal.is-visible ~ .elenco-fila img:nth-child(2) { animation-delay: .1s; } .js .reveal.is-visible ~ .elenco-fila img:nth-child(3) { animation-delay: .2s; }
  .js .reveal.is-visible ~ .elenco-fila img:nth-child(4) { animation-delay: .3s; } .js .reveal.is-visible ~ .elenco-fila img:nth-child(5) { animation-delay: .4s; }
  .js .reveal.is-visible ~ .elenco-fila img:nth-child(6) { animation-delay: .5s; } .js .reveal.is-visible ~ .elenco-fila img:nth-child(7) { animation-delay: .6s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .elenco-escolha button:not([aria-pressed="true"]):hover img { translate: 0 -6%; scale: 1.06; }
  .etapas-agentes li:hover img { animation: gesto-pulinho .55s cubic-bezier(.3, 1.4, .5, 1) both; }
  .elenco-fila img:hover { animation: gesto-pulinho .55s cubic-bezier(.3, 1.4, .5, 1) both; }
}
@keyframes gesto-gira {
  0% { translate: 0 0; scale: 1 1; rotate: y 0deg; }
  14% { scale: 1.08 .9; translate: 0 0; }
  50% { translate: 0 -22%; scale: .96 1.05; }
  80% { translate: 0 0; scale: 1.1 .88; rotate: y 360deg; }
  100% { translate: 0 0; scale: 1 1; rotate: y 360deg; }
}
@keyframes gesto-duplo {
  0%, 100% { translate: 0 0; scale: 1 1; }
  10% { scale: 1.06 .92; }
  28% { translate: 0 -16%; scale: .97 1.04; }
  46% { translate: 0 0; scale: 1.08 .9; }
  64% { translate: 0 -10%; scale: .98 1.03; }
  82% { translate: 0 0; scale: 1.05 .94; }
}
@keyframes gesto-balanca {
  0%, 100% { rotate: 0deg; } 15% { rotate: -10deg; } 32% { rotate: 8deg; } 50% { rotate: -5deg; } 68% { rotate: 3deg; } 84% { rotate: -1deg; }
}
@keyframes gesto-treme {
  0%, 100% { translate: 0 0; } 10% { translate: 0 -10%; } 22% { translate: -4% 0; } 30% { translate: 4% 0; } 38% { translate: -3% 0; }
  46% { translate: 3% 0; } 54% { translate: -2% 0; } 62% { translate: 2% 0; } 70% { translate: 0 0; }
}
@keyframes gesto-salta {
  0% { translate: 0 0; scale: 1; } 18% { scale: 1.06 .92; } 50% { translate: 0 -18%; scale: 1.08; } 78% { translate: 0 0; scale: 1.06 .94; } 100% { translate: 0 0; scale: 1; }
}
@keyframes gesto-pulinho { 0%, 100% { translate: 0 0; scale: 1 1; } 40% { translate: 0 -14%; scale: .97 1.04; } 70% { translate: 0 0; scale: 1.06 .94; } }
@keyframes miniatura-pula { 0%, 100% { translate: 0 0; } 45% { translate: 0 -12%; } }
@keyframes chega-pulando { 0% { opacity: 0; translate: 0 30%; scale: .9 1.1; } 55% { opacity: 1; translate: 0 -10%; } 78% { translate: 0 0; scale: 1.08 .92; } 100% { translate: 0 0; scale: 1 1; } }