/* Banner da home — as peças inteiras do pacote `banners-areas-imagem-v3`
   (22 set 2026). Cada uma é uma fotografia 3:2 com a marca, o título, a frase
   e o botão já pintados lá dentro, por isso aqui não há texto nenhum: só a
   imagem e a área clicável por cima dela.

   A imagem nunca é cortada — largura toda, altura automática, `contain` e
   nunca `cover`, que comeria texto, fotografia ou botão. Não se força a altura
   da faixa estreita antiga.
   Nada aqui vai em `style=`: a CSP tem style-src 'self' sem 'unsafe-inline'. */
.iollo-banner-shell { width: 100%; }
.iollo-image-banner {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; border-radius: var(--io-radius-lg, 18px); overflow: hidden;
  background: transparent; cursor: pointer; text-align: left;
  box-shadow: var(--io-shadow-card);
}
.iollo-image-banner img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.iollo-image-banner:focus-visible { outline: var(--io-stroke-focus) solid var(--io-border-focus); outline-offset: 4px; }
@media (hover: hover) {
  .iollo-image-banner { transition: transform var(--io-duration-fast) var(--io-ease); }
  .iollo-image-banner:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) { .iollo-image-banner { transition: none; } }