/* Recursos de IA (Figma: Home v1 / sessão IA, 2548:17135). Foto à
   esquerda com 3 mockups flutuantes DENTRO dela (SVGs do cliente, ver
   render.php) e, à direita, texto + lista animada de 3 recursos que
   alterna sozinha. No mobile a foto mantém a mesma composição e animação
   do desktop (mockups flutuando dentro dela, em % da foto). */

.recursos-ia { background: var(--color-bg-band); color: var(--color-navy); padding: 56px 0; }
@media (min-width: 1024px) {
  /* 120px em cima e embaixo da foto no Figma (seção 5074-6023, foto
     5194-5903). */
  .recursos-ia { padding: 120px 0; }
}

.ia-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  /* Figma inverte a ordem visual do Hero/outras seções: a foto fica à
     ESQUERDA e o texto à DIREITA aqui. Mantido ".ia-text" primeiro no
     HTML (leitor de tela lê o conteúdo antes da foto decorativa) e só
     a ordem visual é trocada via "order". Colunas na proporção real do
     Figma (foto 627,62 / texto 610, 40px de vão). */
  .ia-grid { grid-template-columns: 627.62fr 610fr; gap: 40px; align-items: center; }
  .ia-text { order: 2; }
  .ia-media { order: 1; }
}

.ia-text h2 { margin-bottom: 18px; max-width: 630px; }
.ia-text .lead { color: var(--color-gray-04); max-width: 536px; margin-bottom: 32px; }

/* Lista animada (Figma: Home v1 / "Texto animado", 2548:17198) — um
   "acordeão" que alterna sozinho a cada 5s (ver main.js,
   "data-ia-rotator"; clicar num item também ativa ele). Só o item
   ativo mostra a descrição, a barra lateral dele é laranja e CRESCE
   quando ele ativa. Medidas exatas do Figma: item ativo = 150px (barra
   laranja de 150), inativos = 75px (barra cinza de 75) — a lista toda
   fica sempre com 300px, então nada ao redor "pula" na troca. Não usa
   o ".accordion" genérico (components.css) de propósito: aquele
   alinha o título à direita e tem linhas horizontais, que não existem
   aqui. */
.ia-list {
  --ia-list-speed: 0.6s;
  --ia-list-ease: cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 598px;
}

.ia-list-item {
  position: relative;
  /* Inativo: 25,5 + 24 (título) + 25,5 = 75px. A barra (2px) fica
     colada na borda e a seta começa 14px depois dela (2 + 12). */
  padding: 25.5px 0 25.5px 14px;
  transition: padding var(--ia-list-speed) var(--ia-list-ease);
}
/* Ativo: 33 + 24 + 12 + 48 (descrição, 2 linhas) + 33 = 150px. */
.ia-list-item.is-active { padding-top: 33px; padding-bottom: 33px; }

/* Trilho cinza (::before, sempre do tamanho do item) + preenchimento
   laranja (::after) que cresce de cima pra baixo ao ativar e recolhe ao
   desativar. */
.ia-list-item::before,
.ia-list-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
}
.ia-list-item::before { background: var(--color-gray-03); }
.ia-list-item::after {
  background: #EC4208;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--ia-list-speed) var(--ia-list-ease);
}
.ia-list-item.is-active::after { transform: scaleY(1); }
/* Antes da seção entrar na tela, o item 1 já vem ativo (altura certa,
   sem pulo de layout), mas com a barra ainda "vazia" — o JS adiciona
   ".is-started" ao entrar na tela e ela cresce na hora. */
.ia-list:not(.is-started) .ia-list-item.is-active::after { transform: scaleY(0); transition: none; }

.ia-list-title { margin: 0; font: inherit; }
.ia-list-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ia-list-head:focus-visible { outline: 2px solid #EC4208; outline-offset: 6px; border-radius: 4px; }

.ia-list-title-text {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.24px;
  line-height: 1;
  color: var(--color-gray-03);
  transition: color var(--ia-list-speed) ease;
}
.ia-list-item.is-active .ia-list-title-text { color: var(--color-navy); }

.ia-list-arrow {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--color-gray-03);
  mask: url(../img/ia-list-arrow-icon.svg) center / contain no-repeat;
  -webkit-mask: url(../img/ia-list-arrow-icon.svg) center / contain no-repeat;
  transition: background-color var(--ia-list-speed) ease;
}
.ia-list-item.is-active .ia-list-arrow { background-color: #EC4208; }

/* Descrição: abre/fecha animando a altura (grid 0fr→1fr). Alinhada com o
   título (36px = seta 24 + vão 12), largura de 548px, e sempre com a
   altura de 2 linhas (min-height) — item 3 cabe em 1 linha, mas o item
   ativo precisa dar exatamente 150px. */
.ia-list-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ia-list-speed) var(--ia-list-ease);
}
.ia-list-item.is-active .ia-list-body { grid-template-rows: 1fr; }
.ia-list-body-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--ia-list-speed);
}
.ia-list-item.is-active .ia-list-body-inner { visibility: visible; transition-delay: 0s; }
.ia-list-body p {
  box-sizing: border-box;
  min-height: 60px;
  max-width: 584px;
  padding: 12px 0 0 36px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-gray-04);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ia-list-item.is-active .ia-list-body p { opacity: 1; transition: opacity 0.45s ease 0.2s; }

/* Mobile: título da lista em 20px e descrição em 14px. */
@media (max-width: 767px) {
  .ia-list-title-text { font-size: 20px; letter-spacing: -0.2px; line-height: 1.2; }
  .ia-list-body p { font-size: 14px; min-height: 54px; }
}

/* Sem JS não há rotação: todos os itens ficam abertos (com barra
   laranja), senão as descrições dos itens 2 e 3 ficariam inacessíveis. */
html:not(.js) .ia-list-item { padding-top: 33px; padding-bottom: 33px; }
html:not(.js) .ia-list-item::after { transform: scaleY(1); }
html:not(.js) .ia-list-title-text { color: var(--color-navy); }
html:not(.js) .ia-list-arrow { background-color: #EC4208; }
html:not(.js) .ia-list-body { grid-template-rows: 1fr; }
html:not(.js) .ia-list-body-inner { visibility: visible; }
html:not(.js) .ia-list-body p { opacity: 1; }

/* Entrada animada do texto (selo, título, lead e os 3 itens da lista,
   em cascata) — ".ia-text" ganha ".is-visible" ao entrar na tela (ver
   main.js, reaproveita o mesmo observer do ".ia-media" ao lado). Os
   itens da lista entram por "animation" (e não "transition") pra o
   atraso da cascata não vazar pras transições de troca de item acima. */
.ia-text .eyebrow,
.ia-text > h2,
.ia-text > .lead {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.ia-text.is-visible .eyebrow { opacity: 1; transform: none; }
.ia-text.is-visible > h2 { opacity: 1; transform: none; transition-delay: 0.1s; }
.ia-text.is-visible > .lead { opacity: 1; transform: none; transition-delay: 0.2s; }

.ia-list-item { opacity: 0; }
.ia-text.is-visible .ia-list-item { animation: ia-item-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ia-text.is-visible .ia-list-item:nth-child(1) { animation-delay: 0.3s; }
.ia-text.is-visible .ia-list-item:nth-child(2) { animation-delay: 0.45s; }
.ia-text.is-visible .ia-list-item:nth-child(3) { animation-delay: 0.6s; }
@keyframes ia-item-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

html:not(.js) .ia-text .eyebrow,
html:not(.js) .ia-text > h2,
html:not(.js) .ia-text > .lead,
html:not(.js) .ia-list-item {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ia-text .eyebrow,
  .ia-text > h2,
  .ia-text > .lead {
    transition: none;
  }
  .ia-list-item,
  .ia-list-item::after,
  .ia-list-title-text,
  .ia-list-arrow,
  .ia-list-body,
  .ia-list-body-inner,
  .ia-list-body p { transition: none; }
  .ia-text.is-visible .ia-list-item { animation: none; opacity: 1; }
}

.ia-media {
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ia-media.is-visible { opacity: 1; transform: none; }
html:not(.js) .ia-media { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ia-media { transition: none; }
}

.ia-photo { border-radius: 28.8px; overflow: hidden; aspect-ratio: 627.62 / 708.956; }
.ia-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.ia-float { display: block; margin-top: 16px; }
.ia-float svg { display: block; width: 100%; height: auto; }

/* Vidro fosco (Figma): cada card já tem seu próprio "backdrop-filter"
   desenhado dentro do SVG (foreignObject + clip-path, ver os arquivos
   ia-float-*.svg), mas isso nem sempre é respeitado quando o SVG é
   inline dentro de uma página comum — o navegador não "enxerga" o que
   tem atrás pra borrar. Aplicar o MESMO blur aqui, de fora, no
   wrapper .ia-float (um elemento HTML normal, sem essa limitação),
   garante o efeito de vidro fosco sobre a foto por trás, com o raio de
   cada card + o cantos arredondados equivalentes ao formato real
   desenhado em cada SVG (o card cria a cor branca semitransparente por
   cima; aqui só garante o blur do que fica atrás). */
.ia-float--pill { border-radius: 6.6% / 31.7%; overflow: hidden; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.ia-float--create { border-radius: 6.9% / 10.8%; overflow: hidden; backdrop-filter: blur(5.7px); -webkit-backdrop-filter: blur(5.7px); }
.ia-float--processing { border-radius: 7.1% / 5.9%; overflow: hidden; backdrop-filter: blur(6.9px); -webkit-backdrop-filter: blur(6.9px); }

@media all {
  /* (Antes só ≥1024px; agora vale também no mobile: a foto mantém a mesma
     composição do desktop, com os 3 mockups flutuando dentro dela.) */
  /* Proporção real da foto no Figma (627,62 × 708,96, "Imagem IA"
     2548:17138): os 3 mockups ficam DENTRO dela, com ~30px de respiro
     (não mais vazando pra fora como antes). Cada elemento vira posição/
     largura em porcentagem da própria foto — tudo escala junto, sem
     depender de um tamanho fixo em px. */
  .ia-media { aspect-ratio: 627.62 / 708.956; }
  .ia-photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin-top: 0; }
  .ia-float { position: absolute; margin-top: 0; }
  .ia-float--pill { top: 4.284%; right: 4.863%; width: 45.863%; }
  .ia-float--create { top: 63.712%; left: 4.887%; width: 43.256%; }
  .ia-float--processing { bottom: 4.236%; right: 4.825%; width: 41.055%; }
}

/* Mobile: vidro fosco mais "limpo". O desfoque de 7px sobre a foto (somado
   ao desfoque que já vem desenhado dentro de cada SVG, em foreignObject)
   deixava manchas rosadas/avermelhadas atrás do texto e dava aspecto de
   baixa definição. Aqui: só um desfoque leve (3px, no wrapper), o
   foreignObject escondido e o fundo do cartão mais opaco (94%). Os cartões
   voltam ao tamanho/posição do desktop (sem se encostarem). */
@media (max-width: 767px) {
  .ia-float foreignObject { display: none; }
  .ia-float--pill,
  .ia-float--create,
  .ia-float--processing { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .ia-float svg > path[data-figma-bg-blur-radius] { fill-opacity: 0.94; }
}

/* Demonstração animada (pedido do cliente) — um ciclo completo de
   ~11.5s, em loop, SEM pausa morta no final: assim que os painéis
   somem, o ciclo já recomeça (o fim de um ciclo e o começo do próximo
   são visualmente idênticos — tudo escondido — então a "virada" não se
   nota). O que existe é uma pausa de 2s com TUDO visível, logo antes
   do fade-out, pra dar tempo de ver o resultado completo:

   cursor aparece e pousa no botão "Criar pedido com IA" → clica nele
   (o botão "aperta") → o painel "Criar com IA" sobe e aparece → o
   cursor arrasta, devagar, até o ícone de documento → clica nele (o
   ícone "aperta") → o painel "Processando seu pedido" sobe e aparece
   → os 4 itens da lista (ícone + texto juntos) surgem em cascata, um
   de cada vez, cada um com seu próprio fade suave, e a barrinha de
   progresso cresce um degrau junto com cada item → PAUSA de 2s com
   tudo visível → cursor e os dois painéis desaparecem juntos → o ciclo
   recomeça na hora, sem espera.

   Todas as animações abaixo usam a MESMA duração (~11.5s) e começam ao
   carregar a página, então as porcentagens dos keyframes já colocam
   cada elemento no tempo certo dentro do ciclo compartilhado — não
   precisa de JS pra sincronizar nada. Vale em todas as larguras (no
   mobile a composição e a animação são as mesmas do desktop). */
.ia-cursor { display: none; }
@media all {
  .ia-float--pill { animation: ia-pill-press 11.5s ease-in-out infinite; }
  .ia-float--create { animation: ia-card-reveal-create 11.5s ease-in-out infinite; }
  .ia-float--processing { animation: ia-card-reveal-processing 11.5s ease-in-out infinite; }

  .ia-cursor {
    display: block;
    position: absolute;
    width: 5.087%;
    left: 76.679%;
    top: 13.206%;
    opacity: 0;
    animation: ia-cursor-drag 11.5s ease-in-out infinite;
  }
  .ia-cursor svg { display: block; width: 100%; height: auto; }

  .ia-anim-doc-press { transform-box: fill-box; transform-origin: center; animation: ia-doc-press 11.5s ease-in-out infinite; }

  .ia-anim-check { opacity: 0; }
  .ia-anim-check-0 { animation: ia-check-0 11.5s ease-in-out infinite; }
  .ia-anim-check-1 { animation: ia-check-1 11.5s ease-in-out infinite; }
  .ia-anim-check-2 { animation: ia-check-2 11.5s ease-in-out infinite; }
  .ia-anim-check-3 { animation: ia-check-3 11.5s ease-in-out infinite; }

  .ia-anim-progress-bar {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    animation: ia-progress-bar 11.5s ease-in-out infinite;
  }
}

/* Botão "Criar pedido com IA": aperta levemente quando o cursor clica
   (16.52%–19.13%, ~0.3s, bem mais gradual que um corte seco). */
@keyframes ia-pill-press {
  0%, 16.52%, 100% { transform: scale(1); }
  17.83% { transform: scale(0.94); }
  19.13% { transform: scale(1); }
}

/* Painel "Criar com IA": some no começo, sobe (translateY) e aparece
   logo depois do clique no botão (19.13%→26.09%, fade+subida de 0.8s),
   fica visível (inclusive durante a pausa de 2s) até o fade-out final
   (97.39%→100%, junto com tudo mais), voltando ao estado escondido
   exatamente onde o próximo ciclo começa (0%) — sem intervalo parado. */
@keyframes ia-card-reveal-create {
  0%, 19.13% { opacity: 0; transform: translateY(16px); }
  26.09%, 97.39% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(16px); }
}

/* Painel "Processando seu pedido": mesma lógica, aparece depois do
   clique no ícone de documento (54.78%→61.74%). */
@keyframes ia-card-reveal-processing {
  0%, 54.78% { opacity: 0; transform: translateY(16px); }
  61.74%, 97.39% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(16px); }
}

/* Ícone de documento: aperta ao clique (53.48%–54.78%, mesma janela do
   botão acima). */
@keyframes ia-doc-press {
  0%, 52.17%, 100% { transform: scale(1); }
  53.48% { transform: scale(0.88); }
  54.78% { transform: scale(1); }
}

/* Cursor: aparece bem devagar (0%→5.22%), pousa e clica no botão
   (16.52%–19.13%), arrasta bem devagar até o ícone de documento
   (19.13%→52.17%, mais de 3.5s de arrasto), clica nele (53.48%–
   54.78%) e SÓ desaparece junto com os painéis, no fade-out final
   (97.39%→100%) — fica visível o resto do ciclo inteiro depois do
   primeiro clique, inclusive durante a pausa de 2s, pra deixar claro
   que é ele quem causa cada revelação. Ao terminar de sumir (100%) já
   está exatamente na posição/estado do próximo 0% — sem "teleporte"
   visível, porque a opacidade já está em 0 dos dois lados. As posições
   (%) vêm da mesma proporção do grupo Figma usada acima: ponto de
   partida = onde o cursor já aparecia desenhado dentro do próprio
   "btn IA.svg" (removido de lá pra virar esta camada independente, ver
   ia-cursor-icon.svg); ponto de chegada = centro do ícone de documento
   dentro de "criar.svg". */
@keyframes ia-cursor-drag {
  0%     { left: 76.679%; top: 13.206%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
  5.22%  { opacity: 1; }
  16.52% { left: 76.679%; top: 13.206%; transform: translate(-50%, -50%) scale(1); }
  17.83% { left: 76.679%; top: 13.206%; transform: translate(-50%, -50%) scale(0.85); }
  19.13% { left: 76.679%; top: 13.206%; transform: translate(-50%, -50%) scale(1); }
  52.17% { left: 14.158%; top: 80.215%; transform: translate(-50%, -50%) scale(1); }
  53.48% { left: 14.158%; top: 80.215%; transform: translate(-50%, -50%) scale(0.85); }
  54.78% { left: 14.158%; top: 80.215%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
  97.39% { left: 14.158%; top: 80.215%; opacity: 1; }
  100%   { left: 14.158%; top: 80.215%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* Lista "Processando seu pedido": em cada item, o ícone (check ou
   lupa) e o texto do label (ver ia-float-processing.svg — no último
   item isso inclui também a legendinha cinza "Finalizando a
   estrutura...") têm a MESMA classe e por isso surgem sempre juntos,
   em opacidade, com seu próprio fade suave de 0.3s — o primeiro
   ("Digitalizando e interpretando dados") logo que o painel aparece,
   os outros a cada ~0.6s — e ficam visíveis (inclusive na pausa de 2s)
   até o fade-out final. */
@keyframes ia-check-0 {
  0%, 61.74%, 100% { opacity: 0; }
  64.35%, 97.39% { opacity: 1; }
}
@keyframes ia-check-1 {
  0%, 66.96%, 100% { opacity: 0; }
  69.57%, 97.39% { opacity: 1; }
}
@keyframes ia-check-2 {
  0%, 72.17%, 100% { opacity: 0; }
  74.78%, 97.39% { opacity: 1; }
}
@keyframes ia-check-3 {
  0%, 77.39%, 100% { opacity: 0; }
  80%, 97.39% { opacity: 1; }
}

/* Barrinha de progresso: cresce um degrau a cada item da lista que
   aparece (mesmos instantes acima, mesma janela de fade), até o valor
   final (83.8% — 162.128/193.393, a largura real desenhada no Figma)
   quando o último item ("Preparando o rascunho do pedido") surge —
   depois disso é que começa a pausa de 2s com tudo parado nesse
   estado. */
@keyframes ia-progress-bar {
  0%, 61.74%     { transform: scaleX(0); }
  64.35%, 66.96% { transform: scaleX(0.25); }
  69.57%, 72.17% { transform: scaleX(0.5); }
  74.78%, 77.39% { transform: scaleX(0.75); }
  80%, 97.39%    { transform: scaleX(0.838); }
  100%           { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ia-cursor { display: none; }
  .ia-float--pill,
  .ia-float--create,
  .ia-float--processing,
  .ia-anim-doc-press,
  .ia-anim-check-0,
  .ia-anim-check-1,
  .ia-anim-check-2,
  .ia-anim-check-3,
  .ia-anim-progress-bar {
    animation: none;
  }
  .ia-anim-check { opacity: 1; }
  .ia-anim-progress-bar { transform: scaleX(0.838); }
}