/* Revisão visual: hero, assinatura de campanha, galeria e rodapé. */
.hero-home {
  background:
    radial-gradient(circle at 7% 18%, rgba(255, 255, 255, 0.5) 0 4px, transparent 5px),
    linear-gradient(118deg, var(--yellow) 0 57%, #f6c900 57% 100%);
  background-size: 30px 30px, auto;
}

.hero-home::before {
  position: absolute;
  z-index: 0;
  top: 8%;
  left: 51%;
  width: 220px;
  height: 220px;
  content: "";
  background: var(--red);
  border-radius: 50%;
  opacity: 0.96;
}

.hero-copy {
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.76fr);
  min-height: calc(100svh - var(--header-height) - 54px);
  padding-top: clamp(38px, 5vw, 68px);
  padding-bottom: clamp(30px, 4vw, 54px);
  gap: clamp(30px, 5vw, 76px);
}

.hero-message {
  align-self: center;
  max-width: 850px;
}

.hero-message .campaign-tag {
  display: inline-flex;
  margin-bottom: 22px;
}

.hero-message .hero-slogan {
  display: flex;
  max-width: 830px;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 24px;
  font-size: clamp(3.7rem, 6.7vw, 7rem);
  line-height: 0.78;
  text-transform: uppercase;
}

.hero-slogan strong,
.hero-slogan em,
.hero-slogan-intro {
  display: block;
}

.hero-slogan strong,
.hero-slogan em {
  max-width: 100%;
  color: var(--ink);
  font: inherit;
  font-style: normal;
  letter-spacing: -0.06em;
}

.hero-slogan-intro {
  margin-bottom: 12px;
  padding: 7px 13px 6px;
  color: var(--white);
  background: var(--red);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1.25vw, 1.2rem);
  font-weight: 900;
  letter-spacing: 0.17em;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.hero-slogan-intro-blue {
  margin-top: 24px;
  background: var(--blue);
  transform: rotate(1deg);
}

.hero-slogan em {
  color: var(--blue);
}

.hero-message > .hero-summary {
  max-width: 620px;
  margin-bottom: 26px;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.45;
}

.hero-visual {
  min-height: clamp(600px, 68vh, 740px);
}

.hero-photo-frame {
  inset: 0 0 0 2%;
  border: 0;
  border-radius: 190px 190px 18px 18px;
  box-shadow: 18px 18px 0 var(--blue);
  transform: none;
}

.hero-photo-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  border: 5px solid var(--ink);
  border-radius: inherit;
  pointer-events: none;
}

.hero-photo-frame img {
  object-position: center 10%;
}

.hero-candidate-lockup {
  position: absolute;
  z-index: 4;
  right: -28px;
  bottom: 26px;
  display: grid;
  width: min(360px, 92%);
  padding: 18px 22px 20px;
  color: var(--white);
  background: var(--red);
  border: 5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
  text-align: left;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.hero-candidate-lockup > span,
.footer-candidate-lockup > span {
  margin-bottom: 2px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.24em;
}

.hero-candidate-lockup > strong,
.footer-candidate-lockup > strong {
  font-family: "Arial Black", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(2.2rem, 3.7vw, 4rem);
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.hero-candidate-lockup > b {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 13px;
  padding: 8px 12px 6px;
  color: var(--blue);
  background: var(--yellow);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(3.4rem, 6vw, 5.8rem);
  letter-spacing: 0.015em;
  line-height: 0.82;
}

.hero-candidate-lockup small,
.footer-candidate-lockup small {
  padding-bottom: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

.hero-candidate-star {
  position: absolute;
  z-index: 5;
  top: 9%;
  left: -18px;
  display: grid;
  width: 76px;
  aspect-ratio: 1;
  place-items: center;
  color: var(--yellow);
  background: var(--green);
  border: 4px solid var(--ink);
  border-radius: 50%;
  font-size: 2rem;
  transform: rotate(-12deg);
}

.campaign-gallery .gallery-item-medium {
  grid-column: span 5;
  grid-row: auto;
}

.campaign-gallery .gallery-item-wide {
  grid-column: span 7;
}

.campaign-gallery .gallery-item-medium img,
.campaign-gallery .gallery-item-wide img {
  height: 600px;
}

.footer-top {
  grid-template-columns: 1.15fr 0.7fr 0.7fr;
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: clamp(42px, 5vw, 68px);
}

.footer-candidate-lockup {
  align-self: start;
  display: grid;
  max-width: 470px;
  padding: 22px 24px;
  color: var(--white);
  background: var(--red);
  border-left: 8px solid var(--yellow);
  text-transform: uppercase;
}

.footer-candidate-lockup > strong {
  font-size: clamp(2.5rem, 4vw, 4.3rem);
}

.footer-candidate-lockup > b {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 12px;
  padding: 7px 11px 5px;
  color: var(--blue);
  background: var(--yellow);
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(3.3rem, 5vw, 5.3rem);
  letter-spacing: 0.02em;
  line-height: 0.84;
}

@media (max-width: 1080px) {
  .hero-copy {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.78fr);
  }

  .hero-message .hero-slogan {
    font-size: clamp(3.25rem, 7vw, 5.7rem);
  }
}

@media (max-width: 820px) {
  .hero-home {
    background: var(--yellow);
  }

  .hero-home::before {
    top: 51%;
    left: -70px;
  }

  .hero-copy {
    grid-template-columns: 1fr;
    padding-top: 42px;
    gap: 38px;
  }

  .hero-message .hero-slogan {
    max-width: 700px;
    font-size: clamp(3.3rem, 12.4vw, 6.2rem);
  }

  .hero-visual {
    width: min(100% - 16px, 590px);
    min-height: 680px;
  }

  .hero-photo-frame {
    inset-inline: 0;
  }

  .hero-candidate-lockup {
    right: -12px;
  }

  .campaign-gallery .gallery-item-medium,
  .campaign-gallery .gallery-item-wide {
    grid-column: span 6;
  }

  .campaign-gallery .gallery-item-medium img,
  .campaign-gallery .gallery-item-wide img {
    height: 500px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 590px) {
  .hero-message .campaign-tag {
    margin-bottom: 17px;
    font-size: 0.68rem;
  }

  .hero-message .hero-slogan {
    margin-bottom: 22px;
    font-size: clamp(2.9rem, 14vw, 4.55rem);
    line-height: 0.81;
  }

  .hero-slogan-intro {
    margin-bottom: 9px;
    font-size: 0.74rem;
  }

  .hero-slogan-intro-blue {
    margin-top: 19px;
  }

  .hero-visual {
    width: calc(100% - 8px);
    min-height: 570px;
  }

  .hero-photo-frame {
    border-radius: 130px 130px 14px 14px;
    box-shadow: 10px 10px 0 var(--blue);
  }

  .hero-photo-frame::after {
    border-width: 4px;
  }

  .hero-candidate-lockup {
    right: -7px;
    bottom: 15px;
    width: min(292px, 94%);
    padding: 14px 16px 16px;
    border-width: 4px;
    box-shadow: 6px 6px 0 var(--ink);
  }

  .hero-candidate-lockup > strong {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .hero-candidate-lockup > b {
    font-size: clamp(3.3rem, 18vw, 4.8rem);
  }

  .hero-candidate-star {
    left: -10px;
    width: 60px;
  }

  .campaign-gallery .gallery-item-medium,
  .campaign-gallery .gallery-item-wide {
    grid-column: 1 / -1;
  }

  .campaign-gallery .gallery-item-medium img,
  .campaign-gallery .gallery-item-wide img {
    height: 500px;
  }

  .footer-candidate-lockup {
    max-width: 100%;
  }
}