:root {
  --service-accent: #f5c400;
  --service-accent-strong: #9a6900;
  --service-accent-hover: #e3b400;
  --service-soft: #fffaf0;
  --service-line: #efe5c6;
  --service-glow: rgba(245, 196, 0, .18);
  --service-footnote: #81724c;
  --service-button-text: #192752;
  --service-button-shadow: rgba(176, 128, 0, .2);
  --service-button-shadow-hover: rgba(176, 128, 0, .28);
  --service-visual-border: rgba(205, 160, 0, .22);
  --service-visual-shadow: rgba(116, 83, 0, .16);
  --service-card-border: #eee3bf;
  --service-card-shadow: rgba(116, 83, 0, .08);
  --service-card-overlay: rgba(79, 57, 0, .24);
  --service-timeline-line: #ddc97f;
  --service-marker-border: rgba(184, 132, 0, .34);
  --service-nav-current: rgba(245, 196, 0, .14);
  --hero-image: none;
  --hero-placeholder: linear-gradient(145deg, #172956, #e6ad00 54%, #ffeaa0);
}

.service-hero__visual > img {
  position: absolute;
  z-index: 1;
  right: -14%;
  bottom: 1%;
  width: 128%;
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 32px rgba(116, 83, 0, .14));
}

.service-hero__visual::before {
  display: none;
}

@media (max-width: 1100px) {
  .service-hero__visual > img {
    right: -18%;
    width: 138%;
  }
}

@media (max-width: 820px) {
  .service-hero__visual > img {
    right: -12%;
    bottom: 2%;
    width: 124%;
  }

  .service-card__media {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .service-card__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 450px) {
  .service-hero__visual > img {
    right: -18%;
    width: 136%;
  }
}

.service-card:nth-child(1) .service-card__media {
  --card-image: url('../../assets/images/redes-sociales.webp?v=1');
  --card-placeholder: linear-gradient(145deg, #162854, #dca700 58%, #ffe492);
}

.service-card:nth-child(2) .service-card__media {
  --card-image: url('../../assets/images/banners-campanas.webp?v=1');
  --card-placeholder: linear-gradient(145deg, #fff4c5, #f5c400 56%, #243665);
}

.service-card:nth-child(3) .service-card__media {
  --card-image: url('../../assets/images/catalogos-brochures.webp?v=1');
  --card-placeholder: linear-gradient(145deg, #233665, #fff2b3 52%, #d89b00);
}