/* Sistema visual compartilhado para as páginas institucionais da Trama. */
:root { --header-height: 88px; }

.topbar {
  isolation: isolate;
  background: linear-gradient(100deg, #1e1323 0%, #332035 50%, #27221f 100%);
  border-bottom: 0;
  box-shadow: 0 12px 30px rgba(18, 8, 20, .2);
}

.topbar::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #792b8a 0%, #e86e25 58%, #f2b41c 100%);
}

.topbar .nav { position: relative; z-index: 2; height: var(--header-height); }
.topbar .brand {
  width: 196px;
  height: 58px;
  background: url("../brand/LogoSemSlogan-GrupoTramaReputale-Branco.png") center left / contain no-repeat;
}
.topbar .brand svg { display: none; }
.topbar .menu,
.topbar .header-socials {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .055);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.topbar .menu > a,
.topbar .menu-trigger { min-height: 42px; }
.topbar .menu > a:hover,
.topbar .menu-trigger:hover,
.topbar .menu-trigger[aria-expanded="true"] {
  color: #f2b41c;
  background: rgba(232, 110, 37, .14);
}
.topbar .menu-trigger[aria-expanded="true"] { box-shadow: inset 0 0 0 1px rgba(242, 180, 28, .16); }
.topbar .nav-cta { background: #e86e25; box-shadow: 0 8px 20px rgba(232, 110, 37, .18); }
.topbar .nav-cta:hover { background: #d85d18; }

#about-mega,
#services-mega {
  top: var(--header-height);
  width: min(1360px, calc(100vw - 48px));
  max-height: calc(100dvh - var(--header-height) - 16px);
  border-color: rgba(121, 43, 138, .15);
  border-radius: 0 0 26px 26px;
  background: rgba(252, 250, 247, .985);
}

#services-mega .mega-groups { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
#services-mega .mega-group { min-height: 218px; padding: 13px 12px 14px; border: 1px solid rgba(121, 43, 138, .11); border-radius: 14px; background: rgba(255, 255, 255, .72); }
#services-mega .mega-group:nth-child(4) { order: 5; }
#services-mega .mega-group:nth-child(5) { order: 4; }
#services-mega .mega-group__title { min-height: 34px; margin: 0 0 8px; }
#services-mega .mega-group__title strong { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.2; }
#services-mega .mega-group__title span { color: #e86e25; font-size: 13px; }
#services-mega .mega-group a { display: block; margin: 0; padding: 4px 0 4px 12px; color: #5f5853 !important; font-size: 12px; line-height: 1.3; }
#services-mega .mega-group a::before { top: 50%; width: 4px; height: 4px; transform: translateY(-50%); background: rgba(232, 110, 37, .72); }
#services-mega .mega-group--all { display: none; }

.service-page-body,
.services-hub-body { background: #f5f1eb; }
.service-breadcrumb,
.services-breadcrumb,
.contact-breadcrumb {
  padding: 18px 0;
  background: #2b1835;
  border-top: 0;
  color: rgba(255, 255, 255, .68);
}
.service-breadcrumb a,
.services-breadcrumb a,
.contact-breadcrumb a { color: #fff; }

.service-hero,
.about-hero,
.services-hero,
.contact-page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 87% 28%, rgba(232, 110, 37, .32), transparent 23%),
    radial-gradient(circle at 22% 86%, rgba(121, 43, 138, .55), transparent 38%),
    linear-gradient(128deg, #281332 0%, #792b8a 49%, #2a1836 100%);
}

.service-hero::after,
.about-hero::after,
.services-hero::after,
.contact-page-hero::after {
  content: "";
  position: absolute;
  right: -170px;
  bottom: -210px;
  width: min(58vw, 850px);
  height: min(24vw, 355px);
  border: 2px solid rgba(239, 179, 54, .68);
  border-radius: 50%;
  transform: rotate(-10deg);
  pointer-events: none;
}

.service-hero-grid,
.about-hero-grid,
.services-hero-grid,
.contact-hero-grid { position: relative; z-index: 1; }
.service-hero .service-kicker,
.about-hero .about-kicker,
.services-hero .services-kicker,
.contact-page-hero .eyebrow { color: #efb336; }
.service-hero h1,
.about-hero h1,
.services-hero h1,
.contact-page-hero h1 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.service-hero h1 span,
.about-hero h1 span,
.services-hero h1 span,
.contact-title-line--accent { color: #efb336; }
.service-hero-image,
.about-hero-image { border-color: rgba(255, 255, 255, .25); }
.service-hero-note,
.about-hero-note { border-color: rgba(239, 179, 54, .46); background: rgba(53, 23, 66, .86); }
.service-hero-note span,
.about-hero-note span { color: #efb336; }

.service-section--purple,
.about-section--purple { background: linear-gradient(135deg, #4a1e58 0%, #792b8a 56%, #35183f 100%); }
.service-section--ink,
.about-section--ink { background: #25162d; }
.service-section--purple .service-kicker,
.service-section--ink .service-kicker,
.about-section--purple .about-kicker,
.about-section--ink .about-kicker { color: #efb336; }
.service-answer-label,
.service-principle,
.about-purpose-card { background: #792b8a; }
.service-outcome span,
.service-deliverable span,
.service-measure-card span,
.service-question span,
.service-faq summary::after,
.about-kicker,
.services-kicker { color: #e86e25; }
.service-cta,
.about-cta,
.services-cta { background: linear-gradient(115deg, #792b8a 0%, #a04490 48%, #e86e25 100%); }
.service-cta .btn,
.about-cta .btn,
.services-cta .btn { background: #2b1835; }
.service-cta .btn:hover,
.about-cta .btn:hover,
.services-cta .btn:hover { background: #171018; }

.contact-page-hero { color: #fff; }
.contact-page-hero .contact-hero-aside p { color: rgba(255, 255, 255, .78); }
.contact-page-hero .contact-hero-aside a,
.contact-page-hero .contact-hero-aside a span { color: #f2b41c; }
.contact-page-hero .contact-brand-mark { opacity: .22; }

@media (min-width: 901px) and (max-width: 1160px) {
  #services-mega .mega-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #services-mega .mega-group { min-height: 0; }
}

@media (max-width: 900px) {
  :root { --header-height: 76px; }
  .topbar .brand { width: 154px; height: 46px; }
  .topbar .menu {
    inset: var(--header-height) 12px auto 12px;
    max-height: calc(100dvh - var(--header-height) - 12px);
    overflow-x: hidden;
    border-color: rgba(23, 21, 20, .12);
    background: rgba(252, 250, 247, .99);
    color: var(--ink);
  }
  .topbar .menu > a,
  .topbar .menu-trigger { color: var(--ink); }
  #services-mega .mega-groups { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .service-hero::after,
  .about-hero::after,
  .services-hero::after,
  .contact-page-hero::after { display: none; }
}