/* American Peru palette approved for the v82.78 cPanel release. */
:root {
  --steel-blue: #2e4d9a !important;
  --corporate-blue: #2e4d9a !important;
  --steel-gray-dark: #455574 !important;
  --navy-950: #233f82 !important;
  --navy-900: #2e4d9a !important;
  --navy-800: #3456a6 !important;
  --blue-700: #2e4d9a !important;
  --blue-500: #4164b3 !important;
  --accent-red: #c43d46 !important;
  --accent-red-dark: #a92f38 !important;
  --accent-red-soft: #f6e8ea !important;
  --accent-red-muted: #e9a0a5 !important;
  --ink: #303940 !important;
}

.american-gray-on-light {
  color: #3f454b !important;
}

/* Graphite typography on white and light surfaces. */
main :is(h1, h2, h3, h4),
.eyebrow,
.image-card-body small,
.model-band-copy > span,
.model-detail-copy > span,
.service-detail-copy > span,
.section-banner h2,
.section-heading h1,
.section-heading h2,
.section-heading h3,
.story-copy h2,
.image-card-body h3,
.trust-grid strong,
.coverage-heading h2,
.coverage-compact-card h3,
.mineral-list h3,
.model-band-copy h3,
.model-selector strong,
.model-detail-copy h3,
.service-detail-copy h2,
.service-detail-copy h3,
.contact-copy h1,
.contact-copy h2,
.legal-summary h2,
.legal-copy h2,
.text-link {
  color: #303940 !important;
}

main .eyebrow {
  color: #3f454b !important;
  font-weight: 900 !important;
}

.main-navigation > a:not(.nav-brochure),
.nav-group > button {
  color: #46515a !important;
}

.main-navigation > a:not(.nav-brochure):hover,
.main-navigation > a:not(.nav-brochure)[aria-current="page"],
.nav-group > button:hover,
.nav-group > button.is-active,
.nav-group.is-open > button {
  color: #303940 !important;
}

.site-header {
  border-bottom-color: rgba(46, 77, 154, 0.23) !important;
}

/* The transparent approved artwork sits on one clean, rounded brand-blue plaque. */
.brand-lockup.brand-lockup-approved {
  width: clamp(208px, 16.8vw, 251px) !important;
  padding: 6px 9px !important;
  background: #2e4d9a !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.brand-logo-light {
  max-height: 42px !important;
  filter: none !important;
}

/* Match the approved logo's final box while React replaces the static header.
   This prevents the temporary background fallback from appearing shorter. */
.header-shell > .brand-lockup:not(.brand-lockup-approved) {
  width: clamp(208px, 16.8vw, 251px) !important;
  height: clamp(47.5px, calc(3.133vw + 8.65px), 55.5px) !important;
  min-height: clamp(47.5px, calc(3.133vw + 8.65px), 55.5px) !important;
  padding: 6px 9px !important;
  background-color: #2e4d9a !important;
  background-size: calc(100% - 18px) auto !important;
  border-radius: 10px !important;
}

.nav-brochure,
.button.secondary,
.language-trigger:hover,
.language-switcher.is-open .language-trigger {
  border-color: #2e4d9a !important;
}

.site-footer {
  background:
    radial-gradient(circle at 88% 0%, rgba(123, 155, 225, 0.24), transparent 33%),
    linear-gradient(120deg, #213d80 0%, #2e4d9a 70%, #496cbc 150%) !important;
}

.final-cta {
  background: linear-gradient(118deg, #c43d46 0%, #a92f38 64%, #303940 135%) !important;
}

/* White typography on blue, red, graphite and image-overlay surfaces. */
.site-footer h2,
.site-footer strong,
.site-footer a,
.site-footer button,
.site-footer p,
.site-footer span,
.home-hero h1,
.page-hero h1,
.page-hero p,
.final-cta h2,
.final-cta p,
.home-hero .hero-title-frame,
.page-hero .page-hero-content,
.page-hero .eyebrow,
:is(.intro-section, .operations-feature) .section-banner,
:is(.intro-section, .operations-feature) .section-banner h2,
:is(.intro-section, .operations-feature) .section-banner .eyebrow,
.intro-section .section-banner .text-link,
.mineral-section,
.mineral-section .mineral-intro,
.mineral-section .mineral-visual h2,
.mineral-section .mineral-list h3,
.mineral-section .mineral-list p,
.mineral-section .text-link,
.model-photo-caption,
.model-photo-caption > span,
.model-photo-caption h4,
.ssoma-visual-copy,
.ssoma-band .ssoma-visual-copy .eyebrow.light,
.ssoma-band .ssoma-visual-copy h2,
.final-cta,
.final-cta .eyebrow,
.main-navigation > a[href="/contacto"],
.main-navigation > a[href="/en/contact"],
.main-navigation > a[href="/contacto"]:hover,
.main-navigation > a[href="/en/contact"]:hover,
.button.primary,
.button.primary:hover,
.skip-link {
  color: #ffffff !important;
}

.footer-shell {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.page-hero-overlay {
  background: linear-gradient(90deg, rgba(27, 48, 104, 0.82), rgba(46, 77, 154, 0.42), rgba(46, 77, 154, 0.08)) !important;
}

.text-link,
.footer-contact-link {
  text-decoration-color: rgba(46, 77, 154, 0.36) !important;
}

@media (max-width: 560px) {
  .brand-lockup.brand-lockup-approved {
    width: min(186px, calc(100vw - 156px)) !important;
    padding: 4px 6px !important;
    border-radius: 7px !important;
  }

  .brand-logo-light {
    max-height: 34px !important;
  }
}