/*
 * Home de apresentação (/). Só esta página carrega este arquivo: o site.css não engorda. Sempre com
 * os tokens do design system (var(--color-*), var(--space-*), var(--text-*)), que já trocam de
 * tema sozinhos. Um acento por tela (--color-accent); as cores de estado só dizem estado.
 * Movimento só com html[data-movimento="ligado"] (sem prefers-reduced-motion, ou ligado pela pessoa), e só em transform e opacity
 * (faixa em deslocamento, blob lento, ondas dos pinos, entrada ao rolar). A barra de progresso da
 * rolagem usa animation-timeline e só aparece onde o navegador suporta.
 */
@layer paginas {
  /* A home não tem a navegação lateral: o botão de menu não teria o que abrir. */
  .pagina-inicio [data-menu] {
    display: none;
  }

  /* As classes de componente (display) vencem o [hidden] da base: aqui o atributo volta a valer. */
  .pagina-inicio [hidden] {
    display: none;
  }

  .pagina-inicio main {
    flex: 1;
    /* O blob e a faixa passam da borda de propósito: cortam sem criar rolagem lateral. */
    overflow-x: clip;
  }

  .pagina-inicio main:focus {
    outline: none;
  }

  .ia-miolo {
    width: 100%;
    max-width: var(--largura-conteudo);
    margin: 0 auto;
    padding-inline: var(--gutter);
  }

  .ia-secao {
    padding-block: clamp(2rem, 5vw, 4rem);
  }

  /* Assistente (esquerda) e números reais (direita); empilha no celular. */
  .ia-secao--assistente {
    padding-block: clamp(1.5rem, 4vw, 3rem);
  }

  .ia-assistente-grade {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-5);
  }

  .ia-dados {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .ia-dados .faixa-dados {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    border: 0;
  }

  .ia-linha__verbo {
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
  }

  .ia-linha__verbo::after {
    content: " →";
  }

  .ia-secao--prova {
    border-block: 1px solid var(--color-border);
    background-color: var(--color-bg-muted);
  }

  /* Tipografia: três degraus claros (herói, seção, corpo) e o sobretítulo em caixa-alta miúda. */
  .ia-sobretitulo {
    margin-bottom: var(--space-3);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ia-titulo-heroi {
    max-width: 14ch;
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-wrap: balance;
  }

  .ia-titulo-secao {
    max-width: 22ch;
    margin-bottom: var(--space-5);
    font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
  }

  .ia-abertura {
    max-width: 46ch;
    margin-top: var(--space-5);
    color: var(--color-fg-muted);
    font-size: var(--text-lg);
    line-height: 1.6;
  }

  /* Herói: texto à esquerda, planta da placa à direita; empilha no celular. ------------------ */
  .ia-heroi {
    padding-block: clamp(1.75rem, 4.5vw, 3.5rem);
  }

  .ia-heroi__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  .ia-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .ia-aviso-demo {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 46ch;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }

  .ia-aviso-demo .icone {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }

  .ia-heroi__figura {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
  }

  /* A planta: papel quadriculado (o --grid-size do design system) com a placa em traço fino. */
  .ia-planta {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    background-image:
      linear-gradient(var(--color-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
  }

  .ia-planta__svg {
    width: 100%;
    height: auto;
  }

  .ia-placa {
    fill: var(--color-surface);
    stroke: var(--color-border-control);
    stroke-width: 2;
  }

  .ia-tra {
    fill: none;
    stroke: var(--color-border-control);
    stroke-width: 1.5;
    stroke-linejoin: round;
  }

  .ia-pinos {
    fill: none;
    stroke: var(--color-border-control);
    stroke-dasharray: 2 5;
    stroke-linecap: round;
    stroke-width: 2;
  }

  .ia-marca {
    fill: var(--color-accent);
  }

  .ia-marca-num {
    fill: var(--color-on-accent);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
  }

  .ia-legenda-titulo {
    margin-bottom: var(--space-2);
    font-weight: var(--font-weight-semibold);
  }

  .ia-legenda {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
    list-style: none;
    counter-reset: legenda;
  }

  .ia-legenda li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--space-2);
    counter-increment: legenda;
  }

  .ia-legenda li::before {
    content: counter(legenda);
    color: var(--color-fg);
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
  }

  .ia-legenda b {
    color: var(--color-fg);
    font-weight: var(--font-weight-semibold);
  }

  /* Prova: texto e o motor rodando, lado a lado. ------------------------------------------- */
  .ia-prova {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  .ia-prova__texto {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .ia-prova__texto .ia-titulo-secao {
    margin-bottom: var(--space-1);
  }

  .ia-painel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .ia-painel__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .ia-painel__rotulo {
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ia-pecas {
    display: grid;
    gap: 0;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .ia-pecas div {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }

  .ia-pecas div + div {
    border-top: 1px solid var(--color-border);
  }

  .ia-pecas dt {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }

  .ia-pecas dd {
    margin: 0;
    font-weight: var(--font-weight-medium);
  }

  .ia-pecas small {
    display: block;
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-regular);
  }

  .ia-veredito {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 9rem;
  }

  .ia-veredito__titulo {
    font-weight: var(--font-weight-semibold);
  }

  .ia-veredito__medida {
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .ia-painel__link {
    align-self: flex-start;
    font-weight: var(--font-weight-semibold);
  }

  /* Como funciona: três passos numa régua, sem cartões. ------------------------------------- */
  .ia-passos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
  }

  .ia-passo {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 2px solid var(--color-fg);
  }

  .ia-passo__num {
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .ia-passo h3 {
    font-size: var(--text-xl);
  }

  /* Caminhos: uma porta principal e quatro linhas, de pesos diferentes de propósito. --------- */
  .ia-secao--caminhos {
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-muted);
  }

  .ia-caminhos {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-6);
    margin-top: var(--space-6);
  }

  .ia-destaque {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
    text-decoration: none;
  }

  .ia-destaque:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-on-accent);
  }

  .ia-destaque .ia-icone {
    width: 32px;
    height: 32px;
  }

  .ia-destaque__titulo {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
  }

  .ia-destaque__texto {
    line-height: 1.6;
  }

  .ia-acao {
    margin-top: auto;
    padding-top: var(--space-5);
    font-weight: var(--font-weight-semibold);
  }

  .ia-acao::after {
    content: " →";
  }

  .ia-lista {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border-control);
    list-style: none;
  }

  .ia-linha {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-fg);
    text-decoration: none;
  }

  .ia-linha:hover {
    background-color: var(--color-surface);
    color: var(--color-fg);
  }

  .ia-linha .ia-icone {
    width: 24px;
    height: 24px;
    color: var(--color-fg-muted);
  }

  .ia-linha__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .ia-linha__titulo {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
  }

  .ia-linha:hover .ia-linha__titulo {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .ia-etiqueta {
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  /* Fecho: o que ainda não existe, dito sem enfeite. ---------------------------------------- */
  .ia-fecho {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: end;
    gap: var(--space-6);
  }

  .ia-fecho .ia-titulo-secao {
    margin-bottom: var(--space-3);
  }

  .ia-fecho__texto {
    max-width: 52ch;
    color: var(--color-fg-muted);
    font-size: var(--text-lg);
    line-height: 1.6;
  }

  .ia-fecho__links {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border-control);
    list-style: none;
  }

  .ia-fecho__links a {
    display: flex;
    align-items: center;
    min-height: var(--target-min);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-medium);
  }

  @media (width < 60rem) {
    .ia-assistente-grade,
    .ia-heroi__grade,
    .ia-prova,
    .ia-caminhos,
    .ia-fecho {
      grid-template-columns: minmax(0, 1fr);
    }

    .ia-passos {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
    }
  }

  @media (width < 40rem) {
    .ia-pecas div {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-1);
    }

    .ia-linha {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .ia-linha .ia-etiqueta {
      grid-column: 2;
      justify-self: start;
    }

    .ia-destaque {
      padding: var(--space-5);
    }
  }

  /* Título editorial: a palavra-chave em serifada de sistema (sem baixar fonte), na cor de destaque. */
  .ia-titulo-heroi em,
  .ia-titulo-secao em {
    color: var(--color-accent);
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    font-style: italic;
    font-weight: var(--font-weight-regular, 400);
    letter-spacing: -0.01em;
  }

  /* Blob orgânico atrás da planta (só forma e cor, nada pesado). */
  .ia-heroi__figura {
    position: relative;
    isolation: isolate;
  }

  .ia-blob {
    position: absolute;
    inset: -8% -6% 18% -10%;
    z-index: -1;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    background: color-mix(in srgb, var(--color-accent) 11%, transparent);
  }

  /* Faixa de texto que desliza: decorativa (aria-hidden), os fatos estão na legenda da planta. */
  .ia-faixa {
    display: flex;
    overflow: hidden;
    border-block: 1px solid var(--color-border);
    background-color: var(--color-bg-muted);
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .ia-faixa__trilho {
    display: flex;
    flex: none;
    gap: var(--space-6);
    min-width: 100%;
    margin: 0;
    padding: var(--space-3) var(--space-3);
    list-style: none;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .ia-faixa__trilho li::before {
    content: "◆";
    margin-right: var(--space-6);
    color: var(--color-accent);
  }

  /* Sem movimento a cópia some e a faixa fica parada e legível. */
  .ia-faixa__trilho--copia {
    display: none;
  }

  /* Faixa escura (invertida): o texto e o fundo trocam de papel, com contraste garantido nos dois temas. */
  .ia-secao--escura {
    background-color: var(--color-fg);
    color: var(--color-bg);
  }

  .ia-secao--escura .ia-sobretitulo {
    color: color-mix(in srgb, var(--color-bg) 72%, transparent);
  }

  .ia-secao--escura .ia-titulo-secao em {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  .ia-3d {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .ia-3d__texto,
  .ia-mapa__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .ia-3d__palco {
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
    color: var(--color-fg);
  }

  .ia-3d__reserva {
    display: grid;
    place-items: center;
    min-height: 16rem;
    color: var(--color-fg-muted);
  }

  .ia-3d__palco .v3d__stage {
    aspect-ratio: 16 / 10;
  }

  .ia-3d__acao {
    margin-top: var(--space-2);
  }

  /* Mapa esquemático (ilustração) dos técnicos. */
  .ia-mapa {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .ia-mapa__figura {
    margin: 0;
  }

  .ia-mapa__svg {
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .ia-mapa__fundo {
    fill: var(--color-bg-muted);
  }

  .ia-mapa__ruas path {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1.5;
  }

  .ia-mapa__avenida {
    fill: none;
    stroke: var(--color-border-control);
    stroke-width: 6;
    stroke-linecap: round;
  }

  .ia-mapa__rio {
    fill: none;
    stroke: color-mix(in srgb, var(--color-accent) 24%, var(--color-bg-muted));
    stroke-width: 18;
    stroke-linecap: round;
  }

  .ia-mapa__pinos path {
    fill: var(--color-accent);
  }

  .ia-mapa__furo {
    fill: var(--color-bg);
  }

  .ia-mapa__onda {
    fill: var(--color-accent);
    opacity: 0.18;
    transform-box: fill-box;
    transform-origin: center;
  }

  .ia-mapa__legenda {
    margin-top: var(--space-2);
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
  }

  .ia-corpo {
    max-width: 52ch;
    line-height: 1.6;
  }

  @media (width < 56rem) {
    .ia-3d,
    .ia-mapa {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  :where(html[data-movimento="ligado"]) .ia-faixa__trilho {
    flex-wrap: nowrap;
    min-width: max-content;
    justify-content: flex-start;
    white-space: nowrap;
    animation: ia-desliza 38s linear infinite;
  }

  :where(html[data-movimento="ligado"]) .ia-faixa__trilho--copia {
    display: flex;
  }

  :where(html[data-movimento="ligado"]) .ia-faixa:hover .ia-faixa__trilho {
    animation-play-state: paused;
  }

  :where(html[data-movimento="ligado"]) .ia-blob {
    animation: ia-blob 22s ease-in-out infinite alternate;
  }

  :where(html[data-movimento="ligado"]) .ia-mapa__onda {
    animation: ia-onda 2.8s ease-out infinite;
  }

  :where(html[data-movimento="ligado"]) .ia-mapa__onda--2 {
    animation-delay: 0.9s;
  }

  :where(html[data-movimento="ligado"]) .ia-mapa__onda--3 {
    animation-delay: 1.8s;
  }

  @keyframes ia-desliza {
    to {
      transform: translateX(-100%);
    }
  }

  @keyframes ia-blob {
    from {
      transform: rotate(-4deg) scale(1);
    }

    to {
      transform: rotate(5deg) scale(1.06);
    }
  }

  @keyframes ia-onda {
    0% {
      opacity: 0.35;
      transform: scale(0.6);
    }

    100% {
      opacity: 0;
      transform: scale(3.2);
    }
  }

  /* Barra de progresso da rolagem: CSS puro, só onde há animation-timeline, só transform. */
  @supports (animation-timeline: scroll()) {
    :where(html[data-movimento="ligado"]) .pagina-inicio::before {
      content: "";
      position: fixed;
      inset: 0 0 auto;
      z-index: 40;
      height: 3px;
      background-color: var(--color-accent);
      transform: scaleX(0);
      transform-origin: left;
      animation: ia-progresso linear both;
      animation-timeline: scroll(root);
    }
  }

  @keyframes ia-progresso {
    to {
      transform: scaleX(1);
    }
  }

  /* Fase 5 · Herói: forma geométrica própria com o PC dentro, que reage ao ponteiro. ---------- */
  .ia-heroi__visual {
    position: relative;
    display: grid;
    place-items: center;
    gap: var(--space-2);
    --hx: 0;
    --hy: 0;
  }

  .ia-forma {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 36rem);
    aspect-ratio: 1;
  }

  .ia-forma__fundo {
    position: absolute;
    inset: 2%;
    background:
      radial-gradient(circle at 30% 25%, color-mix(in srgb, #fff 35%, transparent), transparent 40%),
      conic-gradient(
        from 210deg,
        color-mix(in srgb, var(--color-accent) 85%, #000),
        color-mix(in srgb, var(--color-accent) 35%, var(--color-bg)),
        color-mix(in srgb, var(--color-accent) 70%, #fff),
        color-mix(in srgb, var(--color-accent) 85%, #000)
      );
    clip-path: polygon(
      22% 6%,
      58% 0%,
      86% 14%,
      100% 46%,
      92% 80%,
      62% 100%,
      26% 94%,
      4% 72%,
      0% 38%
    );
    transform: translate(calc(var(--hx) * -14px), calc(var(--hy) * -14px));
  }

  .ia-forma__anel {
    position: absolute;
    inset: -3%;
    border: 1.5px dashed color-mix(in srgb, var(--color-fg) 22%, transparent);
    border-radius: 50%;
    transform: translate(calc(var(--hx) * 10px), calc(var(--hy) * 10px));
  }

  .ia-forma__palco {
    position: relative;
    display: grid;
    place-items: center;
    width: 82%;
    aspect-ratio: 1;
    transform: perspective(60rem) rotateY(calc(var(--hx) * 16deg)) rotateX(calc(var(--hy) * -10deg))
      translate3d(calc(var(--hx) * 10px), calc(var(--hy) * 8px), 0);
  }

  .ia-forma__pc {
    width: 92%;
    height: 92%;
    filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.28));
  }

  /* A ilustração fica sobre a forma com fundo próprio: o vidro claro lê bem nos dois temas. */
  .ia-forma__pc .il-caixa {
    fill: var(--color-surface);
  }

  .ia-forma__3d {
    position: absolute;
    inset: 0;
  }

  .ia-forma__3d canvas {
    width: 100%;
    height: 100%;
  }

  .ia-forma[data-3d] .ia-forma__pc {
    opacity: 0;
  }

  .ia-forma__chips {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  .ia-chip {
    position: absolute;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-md);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }

  .ia-chip::before {
    content: "✓ ";
    color: var(--color-success);
  }

  .ia-chip--1 {
    top: 10%;
    left: 0;
    transform: translate(calc(var(--hx) * 22px), calc(var(--hy) * 22px));
  }

  .ia-chip--2 {
    top: 46%;
    right: 0;
    transform: translate(calc(var(--hx) * 30px), calc(var(--hy) * 30px));
  }

  .ia-chip--3 {
    bottom: 12%;
    left: 6%;
    transform: translate(calc(var(--hx) * 18px), calc(var(--hy) * 18px));
  }

  .ia-forma__legenda {
    color: var(--color-fg-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }
  :where(html[data-movimento="ligado"]) .ia-forma__fundo {
    animation: ia-forma-muda 16s ease-in-out infinite alternate;
  }

  :where(html[data-movimento="ligado"]) .ia-forma__anel {
    animation: ia-gira 60s linear infinite;
  }

  :where(html[data-movimento="ligado"]) .ia-forma__palco,
  :where(html[data-movimento="ligado"]) .ia-forma__fundo,
  :where(html[data-movimento="ligado"]) .ia-chip {
    transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  :where(html[data-movimento="ligado"]) .ia-forma__pc {
    transition: opacity 600ms ease;
  }

  :where(html[data-movimento="ligado"]) .ia-chip {
    animation: ia-chip-entra 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  :where(html[data-movimento="ligado"]) .ia-chip--2 {
    animation-delay: 200ms;
  }

  :where(html[data-movimento="ligado"]) .ia-chip--3 {
    animation-delay: 400ms;
  }

  :where(html[data-movimento="ligado"]) .ia-forma__ventoinhas circle:nth-child(odd) {
    transform-box: fill-box;
    transform-origin: center;
  }

  /* Rolar para longe do herói: a forma diminui e gira um pouco (rolagem como linha do tempo,
       só onde há suporte; sem ele, nada muda). */
  @supports (animation-timeline: view()) {
    :where(html[data-movimento="ligado"]) .ia-forma {
      animation: ia-forma-sai linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }

  @keyframes ia-forma-muda {
    0% {
      clip-path: polygon(
        22% 6%,
        58% 0%,
        86% 14%,
        100% 46%,
        92% 80%,
        62% 100%,
        26% 94%,
        4% 72%,
        0% 38%
      );
    }

    50% {
      clip-path: polygon(
        14% 14%,
        50% 2%,
        92% 8%,
        96% 40%,
        100% 74%,
        70% 96%,
        30% 100%,
        2% 82%,
        6% 44%
      );
    }

    100% {
      clip-path: polygon(
        30% 2%,
        70% 4%,
        96% 26%,
        94% 62%,
        82% 92%,
        48% 98%,
        12% 86%,
        0% 56%,
        8% 20%
      );
    }
  }

  @keyframes ia-gira {
    to {
      rotate: 360deg;
    }
  }

  @keyframes ia-chip-entra {
    from {
      opacity: 0;
      scale: 0.85;
    }
  }

  @keyframes ia-forma-sai {
    to {
      opacity: 0.4;
      scale: 0.86;
      rotate: -6deg;
    }
  }

  /* Fase 5 · Narrativa por rolagem: a placa presa ao lado e os passos que acendem cada peça. ---- */
  .ia-historia__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-top: var(--space-5);
  }

  .ia-historia__figura {
    position: sticky;
    top: calc(var(--altura-cabecalho) + var(--space-5));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
  }

  .ia-historia__legenda {
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }

  .ia-historia__passos {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ia-historia__passo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    min-height: 46vh;
    padding-left: var(--space-5);
    border-left: 2px solid var(--color-border);
    /* Passo fora de foco: texto no cinza do sistema (contraste AA), sem opacidade. */
    color: var(--color-fg-muted);
  }

  .ia-historia__passo[data-ativo] {
    border-left-color: var(--color-accent);
    color: var(--color-fg);
  }

  .ia-historia__passo h3 {
    font-size: var(--text-xl);
  }

  .ia-historia__passo p {
    max-width: 46ch;
    line-height: 1.6;
  }

  .ia-historia__num {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }

  .ia-historia .ia-peca,
  .ia-historia .ia-marca circle,
  .ia-historia .ia-marca-num text {
    opacity: 0.35;
    transform-box: fill-box;
    transform-origin: center;
  }

  :is(
    [data-passo="1"] :is(.ia-peca--1, .ia-marca--1, .ia-marca-num text:nth-child(1)),
    [data-passo="2"] :is(.ia-peca--2, .ia-marca--2, .ia-marca-num text:nth-child(2)),
    [data-passo="3"] :is(.ia-peca--3, .ia-marca--3, .ia-marca-num text:nth-child(3)),
    [data-passo="4"] :is(.ia-peca--4, .ia-marca--4, .ia-marca-num text:nth-child(4))
  ) {
    opacity: 1;
  }

  :is(
      [data-passo="1"] .ia-peca--1,
      [data-passo="2"] .ia-peca--2,
      [data-passo="3"] .ia-peca--3,
      [data-passo="4"] .ia-peca--4
    )
    :is(.ia-tra, .ia-pinos) {
    stroke: var(--color-accent);
    stroke-width: 2.5;
  }

  :is(
    [data-passo="1"] .ia-marca--1,
    [data-passo="2"] .ia-marca--2,
    [data-passo="3"] .ia-marca--3,
    [data-passo="4"] .ia-marca--4
  ) {
    scale: 1.3;
  }
  :where(html[data-movimento="ligado"]) .ia-historia .ia-peca,
  :where(html[data-movimento="ligado"]) .ia-historia .ia-marca circle,
  :where(html[data-movimento="ligado"]) .ia-historia .ia-marca-num text {
    transition:
      opacity 420ms ease,
      scale 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  :where(html[data-movimento="ligado"]) .ia-historia__passo {
    transition:
      color 420ms ease,
      border-color 420ms ease;
  }

  /* Fase 5 · Revelação por ponteiro: a placa de vídeo por fora; o rastro do mouse mostra o
     interior (canvas). O botão abre tudo de uma vez (clip-path). ---------------------------- */
  .ia-revela__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .ia-revela__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .ia-revela__lista {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding-left: var(--space-5);
    font-size: var(--text-sm);
  }

  .ia-revela__figura {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
  }

  .ia-revela__quadro {
    position: relative;
    aspect-ratio: 800 / 360;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
      radial-gradient(
        circle at 50% 40%,
        color-mix(in srgb, var(--color-accent) 12%, transparent),
        transparent 70%
      ),
      var(--color-bg-muted);
    touch-action: pan-y;
  }

  .ia-revela__fora,
  .ia-revela__dentro,
  .ia-revela__trilha {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .ia-revela__trilha {
    pointer-events: none;
  }

  .ia-revela__dentro {
    clip-path: circle(0% at 50% 50%);
  }

  [data-aberto] .ia-revela__dentro {
    clip-path: circle(75% at 50% 50%);
  }

  .ia-revela__legenda {
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
  }

  .ia-gpu-suporte {
    fill: #9aa3ad;
  }

  .ia-gpu-tampa {
    fill: #23272e;
    stroke: #3b4250;
    stroke-width: 2;
  }

  .ia-gpu-friso {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 3;
    stroke-linecap: round;
  }

  .ia-revela .ia-gpu-ventoinha circle {
    fill: #15181d;
    stroke: #4b5260;
    stroke-width: 3;
  }

  .ia-gpu-pas path {
    fill: none;
    stroke: #6b7483;
    stroke-width: 9;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: center;
  }

  .ia-revela .ia-gpu-cubo circle {
    fill: #2c313a;
    stroke: var(--color-accent);
    stroke-width: 2;
  }

  .ia-gpu-contatos {
    fill: #c99a2e;
  }

  @media (hover: hover) and (pointer: fine) {
    .ia-revela__figura[data-rastro] .ia-revela__quadro {
      cursor: crosshair;
    }
  }
  :where(html[data-movimento="ligado"]) .ia-revela__dentro {
    transition: clip-path 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  :where(html[data-movimento="ligado"]) .ia-gpu-pas path {
    animation: ia-gira 4s linear infinite;
  }

  :where(html[data-movimento="ligado"]) .ia-gpu-pas path:nth-child(2) {
    animation-duration: 3.4s;
  }

  @media (width < 60rem) {
    .ia-historia__grade,
    .ia-revela__grade {
      grid-template-columns: minmax(0, 1fr);
    }

    .ia-historia__figura {
      position: static;
    }

    .ia-historia__passo {
      min-height: auto;
      padding-block: var(--space-4);
    }
  }

  /* Pausa fora da tela (efeitos/visivel.js): o que gira ou desliza só anda enquanto é visto. */
  .js [data-anima]:not([data-visivel]),
  .js [data-anima]:not([data-visivel]) * {
    animation-play-state: paused;
  }
}