/*
 * Grade global do site.
 *
 * A largura externa segue os breakpoints consolidados do Bootstrap. O
 * `--site-container-inset` permite que seções com fundo de ponta a ponta
 * alinhem o conteúdo sem exigir um wrapper apenas para apresentação.
 */
:root {
  --site-container-max: 100%;
  --site-container-gutter: 16px;
  --site-container-edge: 0px;
  --site-container-inset: var(--site-container-gutter);
}

.site-container {
  width: 100%;
  max-width: var(--site-container-max);
  margin-inline: auto;
  padding-inline: var(--site-container-gutter);
}

/* No topo o cabeçalho pertence ao hero; durante a rolagem vira um cartão flutuante. */
.institutional-header.site-header {
  top: 0;
  left: 0;
  right: 0;
  padding-inline: var(--site-container-inset);
  border-color: transparent;
  border-radius: 0;
  background: #070735;
  box-shadow: none;
  transition:
    top 180ms ease,
    border-radius 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.institutional-header.site-header[data-scrolled] {
  top: 24px;
  left: max(10px, var(--site-container-edge));
  right: max(10px, var(--site-container-edge));
  padding-inline: var(--site-container-gutter);
  border-color: #ffffff1f;
  border-radius: 18px;
  background: #090936dc;
  box-shadow:
    0 16px 50px #02021f52,
    inset 0 1px #ffffff12;
}

.internal-footer {
  padding-inline: var(--site-container-inset);
}

.internal-footer > * {
  width: 100%;
  max-width: calc(var(--site-container-max) - (2 * var(--site-container-gutter)));
  margin-inline: auto;
}

/* Páginas institucionais e editoriais. Fundos continuam full bleed. */
.page-hero,
.page-callout,
.preview-banner,
.blog-page .page-hero,
.blog-article .article-header {
  padding-inline: var(--site-container-inset);
}

.internal-page main {
  margin-top: 0;
}

.page-hero {
  padding-top: 148px;
}

.blog-page .page-hero {
  padding-top: 162px;
}

.blog-article .article-header {
  padding-top: 134px;
}

.page-section,
.blog-listing > .page-section,
.article-cover,
.article-content-shell,
.article-footer {
  width: 100%;
  max-width: var(--site-container-max);
  margin-inline: auto;
  padding-inline: var(--site-container-gutter);
}

.article-header-inner {
  width: 100%;
  max-width: calc(var(--site-container-max) - (2 * var(--site-container-gutter)));
}

/* A capa é uma peça editorial e não precisa ocupar todo o grid de interface. */
.article-cover {
  max-width: min(var(--site-container-max), 1140px);
}

/* Home: todas as seções principais passam a usar o mesmo eixo horizontal. */
.intro {
  left: var(--site-container-inset);
}

.hero-bottom,
.journey-top {
  left: var(--site-container-inset);
  right: var(--site-container-inset);
}

.chapter-copy {
  left: var(--site-container-inset);
  width: calc(100% - (2 * var(--site-container-inset)));
}

.solution-immersive .solution-sticky,
.automation-intro,
.journey-notes,
.crm-section,
.governance,
.data-section,
.partnership,
.presence-section,
.trust,
.contact-section,
#dados,
html:not(.js) .journey {
  padding-inline: var(--site-container-inset);
}

.solution-immersive .section-heading,
.solution-immersive .solution-constellation,
.presence-layout {
  width: 100%;
  max-width: calc(var(--site-container-max) - (2 * var(--site-container-gutter)));
}

.presence-section::before {
  left: var(--site-container-inset);
  right: var(--site-container-inset);
}

@media (min-width: 576px) {
  :root {
    --site-container-max: 540px;
    --site-container-gutter: 12px;
    --site-container-edge: calc((100% - 540px) / 2);
    --site-container-inset: calc(var(--site-container-edge) + var(--site-container-gutter));
  }
}

@media (min-width: 768px) {
  :root {
    --site-container-max: 720px;
    --site-container-edge: calc((100% - 720px) / 2);
  }
}

@media (min-width: 992px) {
  :root {
    --site-container-max: 960px;
    --site-container-edge: calc((100% - 960px) / 2);
  }
}

@media (min-width: 1200px) {
  :root {
    --site-container-max: 1140px;
    --site-container-edge: calc((100% - 1140px) / 2);
  }
}

@media (min-width: 1400px) {
  :root {
    --site-container-max: 1320px;
    --site-container-edge: calc((100% - 1320px) / 2);
  }
}

@media (max-width: 980px) {
  .institutional-header.site-header[data-scrolled] {
    top: 14px;
    border-radius: 15px;
  }

  .page-hero,
  .blog-page .page-hero {
    padding-top: 118px;
  }

  .blog-article .article-header {
    padding-top: 108px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .institutional-header.site-header {
    transition: none;
  }
}

html:not(.js) .institutional-header:not(.nav-enhanced) {
  left: auto;
  right: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--site-container-inset);
}