/* ===========================================================================
   AGENTES DE IA — secção 07 (2026-10-11)
   ---------------------------------------------------------------------------
   Pedido: "falta secção para vendermos agentes de IA — personalizados, à
   medida, ChatGPT ou outros modelos, online e local (no hardware do cliente);
   não tão técnico mas sem perder a técnica, mais comercial."

   Fica entre `#demo` e `#imobiliario`. A demo acaba em
   `color-mix(--calor-c 46%, --ink)` e o imobiliário começa exactamente aí
   (cauda.css, ponto 2) — por isso esta secção vive nessa MESMA cor, de ponta
   a ponta, e as duas costuras continuam a não existir.

   A prova é uma conversa encenada (não um widget a fingir que funciona): o
   HTML traz-a inteira, o agentes.js revela-a quando entra no ecrã. Sem JS e
   em movimento reduzido vê-se tudo, parado.
   ======================================================================== */

#agentes{
  /* os mesmos tokens da cauda (ponto 7.1): superfície escura, texto de papel */
  --paper-faint: rgba(238, 241, 247, .55);
  --bone: var(--paper);
  --bone-dim: var(--paper-dim);
  --bone-faint: var(--paper-faint);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --accent: var(--aqua);
  --focus: var(--volt);
  --ag-fundo: color-mix(in srgb, var(--calor-c) 46%, var(--ink));

  position: relative;
  color: var(--paper);
  border-top: 0;
  background:
    radial-gradient(60% 46% at 74% 52%, rgba(25, 229, 206, .07), transparent 72%),
    var(--ag-fundo);
}
#agentes > .wrap{ position: relative; z-index: 1; }
#agentes .section-tag{ color: var(--paper-faint); }
#agentes .eyebrow{ color: var(--aqua); }
#agentes .display{ color: var(--paper); }

/* ---- cabeçalho: título à esquerda, promessa à direita ------------------ */
.ag-cabeca{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.ag-cabeca .display{ font-size: clamp(34px, 4.4vw, 62px); line-height: 1; margin: 12px 0 0; }
.ag-cabeca .lede{ margin: 0; max-width: 46ch; color: var(--paper-dim); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; }

/* ---- mesa: conversa à esquerda, argumentos à direita ------------------- */
.ag-mesa{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* a conversa: um ecrã de mensagens sóbrio, sem imitar marca nenhuma */
.ag-conversa{
  margin: 0;
  border-radius: 22px;
  background: linear-gradient(170deg, rgba(22, 26, 39, .92), rgba(11, 13, 20, .96));
  box-shadow: 0 0 0 1px rgba(238, 241, 247, .10), 0 40px 80px -30px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.ag-barra{
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(238, 241, 247, .08);
}
.ag-avatar{
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: var(--volt); color: var(--void);
  font: 800 12px/1 var(--ff-ui); letter-spacing: .02em;
}
.ag-quem{ display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ag-quem b{ font: 700 14px/1.2 var(--ff-ui); }
.ag-quem small{ font: 500 11px/1.3 var(--ff-mono); letter-spacing: .04em; color: var(--paper-faint); }
.ag-estado{
  flex: none;
  font: 500 10px/1 var(--ff-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--aqua);
}
.ag-estado::before{
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
  border-radius: 50%; background: var(--aqua); vertical-align: 1px;
}

.ag-fio{
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px 18px;
  min-height: 25rem;
}
.ag-msg{
  margin: 0;
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 16px;
  font: 400 14.5px/1.5 var(--ff-ui);
}
.ag-msg--cliente{
  align-self: flex-end;
  background: rgba(238, 241, 247, .10);
  border-bottom-right-radius: 5px;
}
.ag-msg--agente{
  align-self: flex-start;
  background: rgba(25, 229, 206, .10);
  box-shadow: inset 0 0 0 1px rgba(25, 229, 206, .22);
  border-bottom-left-radius: 5px;
}
/* os passos são a parte técnica, dita em voz baixa: o que o agente FEZ */
.ag-passos{
  list-style: none; margin: 2px 0; padding: 0 0 0 4px;
  display: flex; flex-direction: column; gap: 5px;
}
.ag-passo{ font: 500 11.5px/1.4 var(--ff-mono); letter-spacing: .02em; color: var(--paper-faint); }
.ag-nota{
  padding: 0 20px 16px;
  font: 500 10px/1 var(--ff-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-faint);
}

/* revelação: só quando o agentes.js arma a conversa (`.is-armada`) */
.ag-conversa.is-armada .ag-msg,
.ag-conversa.is-armada .ag-passo{
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.ag-conversa.is-armada .is-visto{ opacity: 1; transform: none; }
/* "a escrever…" enquanto a próxima resposta do agente não chega */
.ag-escreve{
  align-self: flex-start;
  display: inline-flex; gap: 4px;
  padding: 12px 14px; border-radius: 16px;
  background: rgba(25, 229, 206, .08);
  /* Ocupa o lugar da resposta que vem a seguir (ainda invisível) em vez de
     acrescentar 40px à conversa: no telemóvel, sem a altura mínima do
     desktop, a secção crescia e encolhia a cada resposta e tudo o que
     estava por baixo saltava (CLS, auditoria de 2026-10-21).
     30px de altura (12 + 6 + 12) mais os 10px do `gap` do `.ag-fio`. */
  margin-bottom: -40px;
}
.ag-escreve i{
  width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); opacity: .4;
  animation: ag-ponto 1s infinite ease-in-out;
}
.ag-escreve i:nth-child(2){ animation-delay: .15s; }
.ag-escreve i:nth-child(3){ animation-delay: .3s; }
@keyframes ag-ponto{ 0%, 100%{ opacity: .3; transform: none; } 50%{ opacity: 1; transform: translateY(-2px); } }

/* ---- lado: onde corre + três argumentos -------------------------------- */
.ag-lado{ display: flex; flex-direction: column; gap: 22px; }
.ag-modos{
  display: inline-flex; align-self: flex-start;
  padding: 4px; gap: 4px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(238, 241, 247, .16);
}
.ag-modo{
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 18px; border-radius: 999px;
  background: transparent; color: var(--paper-dim);
  font: 700 13px/1 var(--ff-ui);
  transition: background-color .25s, color .25s;
}
.ag-modo:hover{ color: var(--paper); }
.ag-modo[aria-pressed="true"]{ background: var(--paper); color: var(--void); }
.ag-modo:focus-visible{ outline: 2px solid var(--volt); outline-offset: 2px; }

.ag-cartao{
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(238, 241, 247, .04);
  box-shadow: inset 0 0 0 1px rgba(238, 241, 247, .10);
  position: relative;
}
.ag-cartao::before{
  content: ""; position: absolute; left: 22px; top: -1px; width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--volt), var(--aqua));
}
.ag-cartao h3{ margin: 0 0 8px; font: 700 clamp(17px, 1.4vw, 20px)/1.3 var(--ff-ui); letter-spacing: -.01em; }
.ag-cartao p{ margin: 0; color: var(--paper-dim); font-size: 15px; line-height: 1.55; }

.ag-pontos{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ag-ponto{
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px;
  padding: 16px 0;
  border-top: 1px solid rgba(238, 241, 247, .10);
}
.ag-ponto:last-child{ border-bottom: 1px solid rgba(238, 241, 247, .10); }
.ag-n{ grid-row: span 2; font: 700 11px/1.7 var(--ff-mono); letter-spacing: .14em; color: var(--aqua); }
.ag-ponto h3{ margin: 0 0 4px; font: 700 16px/1.3 var(--ff-ui); }
.ag-ponto p{ margin: 0; color: var(--paper-dim); font-size: 14.5px; line-height: 1.55; }

.ag-cta{ align-self: flex-start; margin-top: 6px; }
#agentes .btn--primary{
  --_bg: var(--volt);
  color: var(--void);
  box-shadow: 0 14px 34px rgba(200, 255, 46, .18);
}
#agentes .btn--primary:hover{ --_bg: #D6FF5E; box-shadow: 0 18px 42px rgba(200, 255, 46, .28); }

/* ---- telemóvel ---------------------------------------------------------- */
@media (max-width: 900px){
  .ag-cabeca, .ag-mesa{ grid-template-columns: 1fr; }
  .ag-fio{ min-height: 0; }
  .ag-msg{ max-width: 88%; font-size: 14px; }
}
@media (max-width: 420px){
  .ag-modo{ padding: 10px 14px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce){
  .ag-conversa.is-armada .ag-msg,
  .ag-conversa.is-armada .ag-passo{ opacity: 1; transform: none; transition: none; }
  .ag-escreve{ display: none; }
  .ag-modo{ transition: none; }
}