/* Interações (passo 5) — hovers aprovados pelo Julio em 2026-09-25.
   O Figma não define estados de hover; conjunto discreto com as cores da marca.
   Só valem em aparelhos com mouse (@media (hover: hover)).
   Transições desligadas por prefers-reduced-motion (base.css). */

/* Transições comuns */
.seta,
.menu__lista a,
.vamos-conversar__texto,
.botao-portfolio,
.menu-botao__texto,
.botao-solucoes,
.botao-sol-conversar,
.botao-sol-detalhes,
.botao-visitar-site,
.botao-cta,
.carrossel-seta,
.rolagem-projetos__seta,
.navegacao__lista a,
.barra-de-estudio__link,
.cta-contato a {
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    text-decoration-color 0.25s ease,
    transform 0.25s ease;
}

/* Links de texto com sublinhado dourado que aparece */
.navegacao__lista a,
.barra-de-estudio__link,
.cta-contato a {
  text-decoration: underline 1px transparent;
  text-underline-offset: 5px;
}

@media (hover: hover) {
  /* Menu do header (mesmo sublinhado da seção atual) */
  .menu__lista a:hover {
    text-decoration-color: var(--dourado-kalina);
  }

  /* "Vamos conversar", "Conhecer o portfólio", "Menu": sublinhado fica dourado, seta avança */
  .vamos-conversar:hover .vamos-conversar__texto,
  .botao-portfolio:hover,
  .menu-botao:hover .menu-botao__texto {
    border-bottom-color: var(--dourado-kalina);
  }

  .vamos-conversar:hover .seta {
    transform: translateX(4px);
  }

  /* Botões dourados: viram navy */
  .botao-solucoes:hover,
  .botao-sol-conversar:hover {
    background: var(--navy-kalina);
    color: var(--creme-kalina);
  }

  /* "+ detalhes": contorno navy vira preenchido */
  .botao-sol-detalhes:hover {
    background: var(--navy-kalina);
    color: var(--creme-kalina);
  }

  .botao-solucoes:hover .seta,
  .botao-sol-conversar:hover .seta,
  .botao-visitar-site:hover .seta,
  .botao-cta:hover .seta {
    transform: translateX(4px);
  }

  /* "Visitar site" fica dentro do card navy: vira creme */
  .botao-visitar-site:hover {
    background: var(--creme-kalina);
  }

  /* Contato */
  .botao-cta--navy:hover {
    background: var(--dourado-kalina);
    color: var(--navy-kalina);
  }

  .botao-cta--contorno:hover {
    background: var(--dourado-kalina);
  }

  /* Setas dos carrosséis e do portfólio: cinza → navy */
  .carrossel-seta:hover,
  .rolagem-projetos__seta:hover {
    color: var(--navy-kalina);
  }

  /* Losangos da paginação do portfólio */
  .paginacao-portfolio__losangos button:not(.is-ativo):hover::before {
    border-color: var(--dourado-kalina);
  }

  /* Lista de soluções: fundo dourado leve (menos que o selecionado), seta avança */
  .solucao-item:not(.is-ativo):hover {
    background: rgb(232 169 58 / 0.07);
  }

  .solucao-item:not(.is-ativo):hover .solucao-item__seta {
    transform: translateX(4px);
  }

  /* Links do rodapé, da faixa "Duas pessoas…" e "Entre em contato!" */
  .navegacao__lista a:hover {
    color: var(--navy-kalina);
    text-decoration-color: var(--dourado-kalina);
  }

  .barra-de-estudio__link:hover,
  .cta-contato a:hover {
    text-decoration-color: var(--dourado-kalina);
  }
}
