/*
 * CCI 2026 — correção de tratamento cromático do Hero.
 * Carregado após o stylesheet principal para substituir os gradientes vinho
 * que ainda existem inline no JSX sem reestruturar a landing page.
 */

#top {
  background-color: #003430 !important;
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 24, 22, 0.98) 0%,
      rgba(0, 42, 38, 0.95) 34%,
      rgba(0, 52, 48, 0.86) 62%,
      rgba(0, 31, 29, 0.96) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 52, 48, 0.58) 0%,
      rgba(0, 39, 36, 0.72) 52%,
      rgba(0, 24, 22, 0.96) 100%
    ),
    url("https://drive.google.com/thumbnail?id=1vENGItw-C_RO0yYLGjeMQxufMmXGfsGS&sz=w2400") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: multiply, color, normal !important;
}

/* Evita que o overlay genérico anterior volte a puxar o hero para tons quentes. */
#top::before {
  background:
    radial-gradient(circle at 72% 20%, rgba(213, 169, 96, 0.07), transparent 34%),
    linear-gradient(90deg, rgba(0, 31, 29, 0.22), rgba(0, 52, 48, 0.08) 56%, rgba(0, 24, 22, 0.24)) !important;
  mix-blend-mode: normal !important;
}

/* A foto principal continua natural, mas sem competir com a nova identidade verde. */
#top figure img {
  filter: saturate(0.86) contrast(1.03) brightness(0.94);
}

/* Tablet */
@media (max-width: 1024px) {
  #top {
    background-image:
      linear-gradient(
        90deg,
        rgba(0, 24, 22, 0.98) 0%,
        rgba(0, 46, 42, 0.94) 48%,
        rgba(0, 31, 29, 0.94) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 52, 48, 0.66) 0%,
        rgba(0, 31, 29, 0.88) 100%
      ),
      url("https://drive.google.com/thumbnail?id=1vENGItw-C_RO0yYLGjeMQxufMmXGfsGS&sz=w1800") !important;
    background-position: 52% center !important;
    background-blend-mode: multiply, color, normal !important;
  }
}

/* Mobile: mais verde e mais escuro atrás do texto para legibilidade. */
@media (max-width: 640px) {
  #top {
    background-color: #003430 !important;
    background-image:
      linear-gradient(
        180deg,
        rgba(0, 31, 29, 0.96) 0%,
        rgba(0, 52, 48, 0.92) 42%,
        rgba(0, 31, 29, 0.96) 76%,
        rgba(0, 24, 22, 1) 100%
      ),
      linear-gradient(
        90deg,
        rgba(0, 52, 48, 0.76),
        rgba(0, 31, 29, 0.82)
      ),
      url("https://drive.google.com/thumbnail?id=1vENGItw-C_RO0yYLGjeMQxufMmXGfsGS&sz=w1024") !important;
    background-size: cover !important;
    background-position: 56% top !important;
    background-blend-mode: multiply, color, normal !important;
  }

  #top::before {
    background:
      linear-gradient(180deg, rgba(0, 52, 48, 0.10), rgba(0, 24, 22, 0.42)) !important;
  }
}