/**
 * AC | Mancha-img — sistema compartilhado de imagem mascarada na mancha.
 * Usado pelo hero e pelo big-img. Estrutura:
 *   .ac-mancha-img > __pattern (fantasma) + __shape (img mascarada) + __stroke
 *   (contorno) + __icon (decorativo: sorriso/celula/proteina).
 * Posições/cores dos ícones vêm de CSS vars no inline-style do twig.
 */
.ac-mancha-img {
  --ac-mancha-fill: #FFD16C;
  --ac-mancha-icon-verde: #0E5236;
  --ac-mancha-icon-amarelo: #F6A71C;
  position: relative;
  width: 100%;
  max-width: 604px;
  aspect-ratio: 604 / 576;
}
.ac-mancha-img__pattern {
  position: absolute !important;
  inset: 0 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  transform: translate(0%, 8%) !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.ac-mancha-img__shape {
  position: absolute !important;
  inset: 0 !important;
  background-color: var(--ac-mancha-fill) !important;
  /* Default cover (intocado). Quando o hero seta zoom (>100%), vira `auto Z%`
   * → a imagem transborda também na vertical, liberando o background-position Y
   * (com cover puro a imagem landscape não tem folga vertical). */
  background-size: var(--ac-mancha-bg-size, cover) !important;
  background-position: center top;
  background-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  z-index: 1 !important;
}
.ac-mancha-img__stroke {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 2 !important;
  line-height: 0 !important;
}
.ac-mancha-img__stroke svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
}
.ac-mancha-img__stroke svg path {
  fill: none !important;
}
.ac-mancha-img__stroke--amarelo { color: #F6A71C !important; }
.ac-mancha-img__stroke--verde   { color: #0E5236 !important; }

.ac-mancha-img__icon {
  position: absolute !important;
  display: block !important;
  background-color: currentColor !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  pointer-events: none !important;
  z-index: 3 !important;
  /* posição/tamanho via CSS vars vindos do inline-style do twig */
  left: var(--icon-x) !important;
  top: var(--icon-y) !important;
  width: var(--icon-w) !important;
}
/* Mobile: usa CSS vars específicas se definidas. */
@media (max-width: 768px) {
  .ac-mancha-img__icon {
    left: var(--icon-x-mobile, var(--icon-x)) !important;
    top: var(--icon-y-mobile, var(--icon-y)) !important;
    width: var(--icon-w-mobile, var(--icon-w)) !important;
  }
  .ac-mancha-img__icon--hide-mobile { display: none !important; }
}
.ac-mancha-img__icon--verde   { color: var(--ac-mancha-icon-verde) !important; }
.ac-mancha-img__icon--amarelo { color: var(--ac-mancha-icon-amarelo) !important; }

.ac-mancha-img__icon--sorriso {
  width: 14%;
  aspect-ratio: 70 / 32 !important;
}
.ac-mancha-img__icon--celula {
  width: 11%;
  aspect-ratio: 58 / 56 !important;
}
.ac-mancha-img__icon--proteina {
  width: 14%;
  aspect-ratio: 76 / 30 !important;
}