/*
 * Sistema de composição dos sites — compartilhado pelos dez modelos.
 *
 * O HTML é sempre o mesmo. O que muda é:
 *   - atributos no <html> (cabeçalho, rodapé, respiro, divisor) e data-variant em cada seção,
 *     escolhidos pelo modelo e, dentro das opções dele, pela proprietária;
 *   - a folha do modelo (noir.css, luz.css…), que traz só a personalidade: formas, linhas,
 *     pesos, ritmo e detalhes.
 *
 * Este arquivo: tons, respiro, divisores, cabeçalhos, capa e rodapé.
 * As composições das seções ficam em sections.css; o movimento, em motion.css.
 *
 * Tons: uma seção com data-tone troca os tokens de cor dentro dela. Todo componente usa
 * --color-text, --color-muted, --color-primary… e fica correto em qualquer fundo.
 */
:root {
  --base-background: var(--color-background);
  --base-surface: var(--color-surface);
  --base-text: var(--color-text);

  /* Formas: cada modelo redefine o que precisa. */
  --radius: 2px;
  --radius-card: 4px;
  --radius-media: 2px;
  --shape-hero: 0;
  --shape-about: var(--radius-media);
  --shadow-card: none;
  --card-border: 1px solid var(--color-border);

  --hero-min: clamp(560px, 88svh, 860px);
  --header-offset: var(--header-height);
  --density: 1;
  /* Ritmo vertical (padding de cada seção). Normal: 52 px no celular a ~104 px no computador. */
  --section-space: clamp(52px, 7.2vw, 104px);
}

/* Compacto: 44–84 px. */
[data-density='compact'] {
  --density: 0.8;
  --section-space: clamp(44px, 5.8vw, 84px);
}

/* Amplo: 60–124 px; no celular fica bem mais denso que no computador. */
[data-density='airy'] {
  --density: 1.15;
  /* No celular o arejado fica perto do normal (52 px); o ar extra aparece a partir do tablet. */
  --section-space: clamp(52px, 8.4vw, 124px);
}

/* ---------- Tons ---------- */
[data-tone='surface'] {
  --color-background: var(--base-surface);
  --color-surface: var(--base-background);
}

[data-tone='band'] {
  --color-background: var(--color-band);
  --color-surface: color-mix(in srgb, var(--color-on-band) 9%, var(--color-band));
  --color-text: var(--color-on-band);
  --color-muted: var(--color-band-muted);
  --color-primary: var(--color-band-accent);
  --color-on-primary: var(--color-band);
  --color-accent: color-mix(in srgb, var(--color-band-accent) 82%, var(--color-on-band));
  --color-border: color-mix(in srgb, var(--color-on-band) 18%, transparent);
}

[data-tone] {
  --line: 1px solid var(--color-border);
  --card-border: 1px solid var(--color-border);
  background-color: var(--color-background);
  color: var(--color-text);
}

/* ---------- Divisores entre seções ---------- */
/* O contador numera as seções para o "recuo editorial". */
main {
  counter-reset: section;
}

main > .section,
main > .cta {
  position: relative;
  counter-increment: section;
}

[data-divider='line'] main > .section + .section,
[data-divider='line'] main > .section + .cta {
  border-top: var(--line);
}

[data-divider='space'] main > .section + .section {
  margin-top: calc(24px * var(--density));
}

/* Transição de fundo: o tom da seção anterior se dissolve no desta. */
[data-divider='tone'] main > .section + .section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: clamp(48px, 7vw, 96px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-text) 5%, transparent), transparent);
  pointer-events: none;
}

/* Recuo editorial: filete curto com o número da seção, alinhado à margem. */
[data-divider='offset'] main > .section + .section::before {
  content: counter(section, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: clamp(72px, 9vw, 132px);
  padding-top: 12px;
  border-top: 1px solid var(--color-primary);
  font-size: 0.6875rem;
  font-weight: var(--weight-strong);
  letter-spacing: 0.28em;
  color: var(--color-muted);
  pointer-events: none;
}

/* ---------- Tipografia ---------- */
.section-title,
.hero__title {
  font-size: calc(var(--text-title) * var(--font-scale, 1));
}

.hero__title {
  font-size: calc(var(--text-hero) * var(--font-scale, 1));
}

.section-head {
  align-items: end;
}

/* ---------- Cabeçalho ---------- */
.site-header {
  color: var(--color-text);
}

/* overlay: sobre a capa. O texto acompanha o tom da capa. */
[data-header='overlay'][data-hero-tone='band'] .site-header,
[data-header='minimal'][data-hero-tone='band'] .site-header,
[data-header='stacked'][data-hero-tone='band'] .site-header {
  color: var(--color-on-band);
}

[data-hero-tone='band'] .site-header__actions .btn--outline:hover {
  background: var(--color-on-band);
  border-color: var(--color-on-band);
  color: var(--color-band);
}

/* bar: faixa sólida acima da capa. */
[data-header='bar'] {
  --header-offset: 0px;
}

[data-header='bar'] .site-header {
  position: relative;
  background: var(--color-background);
  border-bottom: var(--line);
}

/* pill: cápsula flutuante sobre a capa. */
[data-header='pill'] {
  --header-offset: 92px;
}

[data-header='pill'] .site-header {
  top: 14px;
  padding: 0 clamp(12px, 3vw, 48px);
}

[data-header='pill'] .site-header__inner {
  min-height: 64px;
  padding: 0 12px 0 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-background) 94%, transparent);
  box-shadow: 0 10px 30px -22px rgba(20, 40, 36, 0.5);
  backdrop-filter: blur(8px);
}

/* stacked: logo centralizada em cima, menu centralizado embaixo (boutique). */
@media (min-width: 900px) {
  [data-header='stacked'] {
    --header-height: 132px;
  }

  [data-header='stacked'] .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    row-gap: 10px;
    padding-block: 22px 14px;
  }

  [data-header='stacked'] .site-header .site-logo {
    grid-column: 2;
    align-items: center;
    text-align: center;
  }

  [data-header='stacked'] .site-header__actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  [data-header='stacked'] .site-header .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  }

  [data-header='stacked'] .site-header .site-nav ul {
    justify-content: center;
  }
}

/*
 * minimal: só a logo, o botão e "Menu". O menu abre em tela cheia também no computador —
 * as regras são as do menu do celular (core.css), repetidas aqui para qualquer largura.
 */
[data-header='minimal'] .menu-toggle {
  display: grid;
  position: relative;
  z-index: 2;
}

[data-header='minimal'] .site-logo {
  position: relative;
  z-index: 2;
}

[data-header='minimal'] .site-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--header-height) + 24px) var(--gutter) 32px;
  background: var(--base-background);
  color: var(--base-text);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
}

[data-header='minimal'].menu-open .site-nav {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

[data-header='minimal'] .site-nav ul {
  flex-direction: column;
  gap: 0;
  max-width: 720px;
}

[data-header='minimal'] .site-nav li {
  border-bottom: 1px solid color-mix(in srgb, var(--base-text) 16%, transparent);
}

[data-header='minimal'] .site-nav li a {
  display: block;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  font-weight: var(--weight-display);
  letter-spacing: 0;
  text-transform: none;
}

[data-header='minimal'] .site-nav li a::after {
  display: none;
}

[data-header='minimal'].menu-open .site-header {
  position: fixed;
  color: var(--base-text);
}

@media (min-width: 900px) {
  [data-header='minimal'] .site-nav__cta {
    display: none;
  }

  [data-header='minimal'] .menu-toggle {
    width: auto;
    padding: 0 6px 0 16px;
    grid-auto-flow: column;
    gap: 12px;
  }

  /* No computador, a palavra "Menu" acompanha o ícone. */
  [data-header='minimal'] .menu-toggle::before {
    content: 'Menu';
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  [data-header='minimal'].menu-open .menu-toggle::before {
    content: 'Fechar';
  }
}

/* ---------- Capa: base comum ---------- */
.hero {
  flex-direction: column;
  align-items: stretch;
  min-height: var(--hero-min);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Véu na cor do fundo: garante a leitura do texto sobre qualquer foto. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  --veil: 0.74;
  pointer-events: none;
}

.hero[data-overlay='light']::before {
  --veil: 0.52;
}

.hero[data-overlay='strong']::before {
  --veil: 0.9;
}

.hero--no-media {
  min-height: 0;
}

.hero--no-media::before,
.hero--no-media .hero__words {
  display: none;
}

/*
 * Capa sem foto no computador: a metade direita ficava vazia. Um painel na forma da capa do modelo
 * (arco, folha, cantos retos…), na cor principal bem suave — decoração, não imagem falsa.
 */
@media (min-width: 900px) {
  .hero--no-media {
    position: relative;
    overflow: hidden;
  }

  .hero--no-media::after {
    content: '';
    position: absolute;
    top: 50%;
    right: max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter)));
    width: clamp(260px, 28vw, 420px);
    aspect-ratio: 4 / 5;
    transform: translateY(-46%);
    /* Forma decorativa: arco por padrão; cada modelo pode trocar (--shape-deco). */
    border-radius: var(--shape-deco, 999px 999px 0 0);
    background:
      radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 62%),
      color-mix(in srgb, var(--color-primary) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    pointer-events: none;
  }

  .hero--no-media .hero__copy {
    position: relative;
    z-index: 1;
    max-width: min(640px, 52vw);
  }
}

.hero__inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-offset) + 40px) var(--gutter) 44px;
}

.hero__copy {
  max-width: 640px;
}

.hero__text {
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

.hero[data-align='center'] .hero__copy {
  margin-inline: auto;
  text-align: center;
}

.hero[data-align='center'] .hero__text {
  margin-inline: auto;
}

.hero[data-align='center'] .hero__actions {
  justify-content: center;
}

@media (max-width: 599px) {
  .hero__actions .btn {
    width: 100%;
  }
}

/* No celular o texto costuma ficar sobre a foto: a linha de apoio usa a cor do texto. */
@media (max-width: 899px) {
  .hero:not(.hero--no-media):is([data-variant='fade'], [data-variant='fullbleed'], [data-variant='centered'], [data-variant='inset']) .eyebrow {
    color: var(--color-text);
  }
}

/* ---------- Capa · fade: a foto ocupa a direita e se dissolve no fundo ---------- */
.hero[data-variant='fade']::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-background) 58%, transparent) 0%, transparent 30%),
    linear-gradient(0deg, var(--color-background) 5%, color-mix(in srgb, var(--color-background) calc(var(--veil) * 100%), transparent) 44%, color-mix(in srgb, var(--color-background) calc(var(--veil) * 78%), transparent) 68%, transparent 92%);
}

@media (min-width: 900px) {
  .hero[data-variant='fade'] .hero__inner {
    justify-content: center;
    padding-bottom: 72px;
  }

  .hero[data-variant='fade'] .hero__media {
    left: 34%;
  }

  .hero[data-variant='fade']::before {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--color-background) 60%, transparent) 0%, transparent 24%),
      linear-gradient(90deg, var(--color-background) 34%, color-mix(in srgb, var(--color-background) calc(var(--veil) * 100%), transparent) 52%, transparent 82%);
  }
}

/* ---------- Capa · fullbleed: foto inteira, texto na base ---------- */
.hero[data-variant='fullbleed'] {
  --hero-min: clamp(600px, 94svh, 940px);
}

.hero[data-variant='fullbleed']::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-background) 52%, transparent) 0%, transparent 26%),
    linear-gradient(0deg, color-mix(in srgb, var(--color-background) 97%, transparent) 0%, color-mix(in srgb, var(--color-background) calc(var(--veil) * 100%), transparent) 38%, color-mix(in srgb, var(--color-background) calc(var(--veil) * 66%), transparent) 60%, transparent 86%);
}

.hero[data-variant='fullbleed']:not(.hero--no-media) .eyebrow {
  color: var(--color-text);
}

.hero[data-variant='fullbleed'] .hero__copy {
  max-width: 820px;
}

@media (min-width: 900px) {
  .hero[data-variant='fullbleed'] .hero__inner {
    padding-bottom: 72px;
  }

  .hero[data-variant='fullbleed'] .hero__title {
    font-size: calc(var(--text-hero) * var(--font-scale, 1) * 1.08);
  }
}

/* ---------- Capa · centered: texto no centro, foto suavizada ---------- */
.hero[data-variant='centered']::before {
  background: color-mix(in srgb, var(--color-background) calc(var(--veil) * 86%), transparent);
}

.hero[data-variant='centered'] .hero__inner {
  justify-content: center;
  align-items: center;
  padding-bottom: 64px;
  text-align: center;
}

.hero[data-variant='centered'] .hero__copy {
  max-width: 780px;
}

.hero[data-variant='centered'] .hero__text {
  margin-inline: auto;
}

.hero[data-variant='centered'] .hero__actions {
  justify-content: center;
}

/* ---------- Capa · split e frame: texto de um lado, foto do outro, sem véu ---------- */
.hero[data-variant='split']::before,
.hero[data-variant='frame']::before {
  display: none;
}

.hero[data-variant='split'] .hero__media,
.hero[data-variant='frame'] .hero__media {
  position: relative;
  z-index: 0;
  order: 2;
}

.hero[data-variant='split'] .hero__media {
  aspect-ratio: 4 / 5;
  max-height: 76svh;
}

.hero[data-variant='split'] .hero__inner,
.hero[data-variant='frame'] .hero__inner {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding-bottom: 36px;
}

/* frame: a foto ganha a forma do modelo (arco, oval, orgânica) e fica centralizada. */
.hero[data-variant='frame'] .hero__media {
  width: min(78%, 420px);
  margin: 4px auto 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--shape-hero);
}

.hero[data-variant='frame'] {
  padding-bottom: 0;
}

@media (min-width: 900px) {
  .hero[data-variant='split'],
  .hero[data-variant='frame'] {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .hero[data-variant='split'] .hero__inner,
  .hero[data-variant='frame'] .hero__inner {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    padding: calc(var(--header-offset) + 56px) clamp(32px, 4.5vw, 80px) 56px var(--gutter);
  }

  .hero[data-variant='split'] .hero__media {
    grid-column: 2;
    grid-row: 1 / -1;
    aspect-ratio: auto;
    max-height: none;
    min-height: var(--hero-min);
    order: 0;
  }

  .hero[data-variant='frame'] {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  }

  .hero[data-variant='frame'] .hero__media {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: center;
    width: clamp(300px, 32vw, 480px);
    height: calc(100% - var(--header-offset) - 40px);
    max-height: 720px;
    aspect-ratio: auto;
    margin: 0;
    order: 0;
  }

  .hero[data-variant='split'] .hero__highlights,
  .hero[data-variant='frame'] .hero__highlights {
    grid-column: 1;
    grid-row: 2;
  }

  /* Espelhado: a foto vai para a esquerda. */
  [data-hero-flip] .hero[data-variant='split'] {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  }

  [data-hero-flip] .hero[data-variant='split'] .hero__media {
    grid-column: 1;
  }

  [data-hero-flip] .hero[data-variant='split'] .hero__inner,
  [data-hero-flip] .hero[data-variant='split'] .hero__highlights {
    grid-column: 2;
  }

  [data-hero-flip] .hero[data-variant='split'] .hero__inner {
    padding: calc(var(--header-offset) + 56px) var(--gutter) 56px clamp(32px, 4.5vw, 80px);
  }
}

/* Cabeçalho sobre a foto no celular (split espelhado ou não): um véu no topo mantém a leitura. */
@media (max-width: 899px) {
  :is([data-header='overlay'], [data-header='minimal'], [data-header='stacked'], [data-header='pill']) .hero[data-variant='split'] .hero__media,
  :is([data-header='overlay'], [data-header='minimal'], [data-header='stacked'], [data-header='pill']) .hero[data-variant='frame'] .hero__media {
    margin-top: 12px;
  }
}

/* ---------- Capa · panel: foto ampla, texto dentro de um painel sólido ---------- */
.hero[data-variant='panel']::before {
  display: none;
}

.hero[data-variant='panel'] .hero__media {
  position: relative;
  z-index: 0;
  aspect-ratio: 4 / 3;
  max-height: 58svh;
}

.hero[data-variant='panel'] .hero__inner {
  flex: 0 0 auto;
  padding: 0 var(--gutter) 36px;
}

.hero[data-variant='panel'] .hero__copy {
  position: relative;
  z-index: 1;
  margin-top: -48px;
  padding: 28px 24px 30px;
  border-radius: var(--radius-card);
  background: var(--color-background);
  box-shadow: 0 24px 50px -36px rgba(30, 24, 16, 0.5);
}

@media (min-width: 900px) {
  .hero[data-variant='panel'] .hero__media {
    position: absolute;
    aspect-ratio: auto;
    max-height: none;
  }

  .hero[data-variant='panel'] .hero__inner {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding: calc(var(--header-offset) + 56px) var(--gutter) 56px;
  }

  .hero[data-variant='panel'] .hero__copy {
    max-width: 560px;
    margin-top: 0;
    padding: 44px 44px 46px;
  }
}

/* ---------- Capa · inset: a foto recua das bordas, com cantos arredondados ---------- */
.hero[data-variant='inset'] {
  --inset-x: clamp(10px, 2.4vw, 36px);
  --inset-top: calc(var(--header-offset) + 4px);
}

.hero[data-variant='inset'] .hero__media,
.hero[data-variant='inset']::before {
  inset: var(--inset-top) var(--inset-x) 0;
  border-radius: var(--radius-hero, 28px);
  overflow: hidden;
}

/* No celular o texto ocupa quase toda a foto: o véu sobe junto com ele. */
.hero[data-variant='inset']::before {
  background: linear-gradient(0deg, color-mix(in srgb, var(--color-background) calc(var(--veil) * 108%), transparent) 0%, color-mix(in srgb, var(--color-background) calc(var(--veil) * 100%), transparent) 52%, color-mix(in srgb, var(--color-background) calc(var(--veil) * 72%), transparent) 78%, transparent 100%);
}

.hero[data-variant='inset'] .hero__inner {
  padding: calc(var(--inset-top) + 40px) calc(var(--inset-x) + clamp(16px, 3vw, 56px)) 40px;
}

@media (min-width: 900px) {
  .hero[data-variant='inset']::before {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-background) calc(var(--veil) * 104%), transparent) 0%, color-mix(in srgb, var(--color-background) calc(var(--veil) * 82%), transparent) 34%, transparent 68%);
  }

  .hero[data-variant='inset'] .hero__inner {
    justify-content: center;
    padding-bottom: 64px;
  }
}

/* ---------- Capa: palavras da marca (modelos que as exibem) ---------- */
@media (min-width: 900px) {
  [data-words='side'] .hero[data-variant='fade'] .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 48px;
  }

  [data-words='side'] .hero[data-variant='fade'] .hero__words {
    display: grid;
    gap: 12px;
    padding-left: 22px;
    border-left: 1px solid color-mix(in srgb, var(--color-text) 40%, transparent);
    font-size: 0.6875rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 82%, transparent);
  }

  [data-words='vertical'] .hero[data-variant='frame'] .hero__words {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    display: flex;
    gap: 22px;
    writing-mode: vertical-rl;
    transform: translateY(-40%);
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
}

/* ---------- Capa: frase manuscrita (telas largas, capas com a foto de fundo) ---------- */
@media (min-width: 1100px) {
  .hero:is([data-variant='fade'], [data-variant='fullbleed'], [data-variant='inset']) .hero__signature {
    position: absolute;
    right: calc(var(--gutter) * 0.9);
    top: 42%;
    display: block;
    max-width: 240px;
    font-family: var(--font-script);
    font-size: clamp(2rem, 2.6vw, 2.9rem);
    line-height: 1.05;
    text-align: center;
    color: var(--color-primary);
    transform: rotate(-9deg);
    text-shadow: 0 1px 14px color-mix(in srgb, var(--color-background) 70%, transparent);
  }
}

/* ---------- Capa: destaques (os diferenciais, resumidos) ---------- */
:where([data-highlights]:not([data-highlights='none'])) .hero__highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  flex: 0 0 auto;
  padding: 0 var(--gutter) 34px;
  font-size: var(--text-small);
  line-height: 1.35;
}

.hero__highlights li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.hero__highlights .icon {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
  stroke-width: 1.2;
}

.hero[data-variant='centered'] .hero__highlights {
  justify-content: center;
}

@media (min-width: 900px) {
  /* inline: duas colunas, na parte da capa em que o texto é legível. */
  [data-highlights='inline'] .hero__highlights {
    grid-template-columns: repeat(2, minmax(0, 250px));
    gap: 16px 0;
    justify-content: start;
    padding-bottom: 48px;
  }

  [data-highlights='inline'] .hero__highlights li {
    padding: 2px 24px;
    border-left: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  }

  [data-highlights='inline'] .hero__highlights li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  [data-highlights='inline'] .hero[data-variant='centered'] .hero__highlights {
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
  }

  [data-highlights='inline'] .hero[data-variant='centered'] .hero__highlights li:nth-child(odd) {
    padding-left: 24px;
    border-left: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  }

  [data-highlights='inline'] .hero[data-variant='centered'] .hero__highlights li:first-child {
    border-left: 0;
  }
}

/* bar: cartão que avança sobre a seção seguinte. */
[data-highlights='bar'] .hero {
  z-index: 1;
  overflow: visible;
}

[data-highlights='bar'] .hero__highlights {
  position: relative;
  z-index: 2;
  align-self: center;
  width: calc(100% - 2 * var(--gutter));
  margin: 0 var(--gutter) -46px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--base-text) 16%, transparent);
  border-radius: var(--radius-card);
  background: var(--base-surface);
  color: var(--base-text);
}

[data-highlights='bar'] .hero + [data-tone] {
  padding-top: calc(var(--section-space) + 46px);
}

[data-highlights='bar'] .hero:is([data-variant='split'], [data-variant='frame']) .hero__highlights {
  grid-column: 1 / -1;
}

/* band: faixa logo abaixo da foto. */
[data-highlights='band'] .hero__highlights {
  position: relative;
  z-index: 1;
  padding: 26px var(--gutter);
  background: var(--base-surface);
  color: var(--base-text);
}

[data-highlights='band'] .hero:is([data-variant='split'], [data-variant='frame']) .hero__highlights {
  grid-column: 1 / -1;
}

[data-highlights='band'] .hero[data-variant='inset'] .hero__highlights {
  margin: 0 var(--inset-x);
  border-radius: 0 0 var(--radius-hero, 28px) var(--radius-hero, 28px);
}

@media (min-width: 900px) {
  [data-highlights='bar'] .hero__highlights,
  [data-highlights='band'] .hero__highlights {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
  }

  [data-highlights='bar'] .hero__highlights li,
  [data-highlights='band'] .hero__highlights li {
    justify-content: center;
    padding: 2px 24px;
    border-left: 1px solid color-mix(in srgb, var(--base-text) 16%, transparent);
  }

  [data-highlights='bar'] .hero__highlights li:first-child,
  [data-highlights='band'] .hero__highlights li:first-child {
    border-left: 0;
  }

  [data-highlights='band'] .hero__highlights li {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* ---------- Navegação dos carrosséis ---------- */
.scroller-nav:not([hidden]) {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.scroller-nav button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--color-text) 34%, transparent);
  border-radius: 50%;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
}

.scroller-nav button:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.scroller-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- Rodapé ---------- */
.site-footer {
  border-top: var(--line);
}

.site-footer .site-logo {
  color: var(--color-primary);
}

.site-footer__col h3 {
  margin-bottom: 14px;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.site-footer__col ul {
  display: grid;
  gap: 8px;
  font-size: var(--text-small);
  color: var(--color-muted);
}

.site-footer__col li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer__col a:hover {
  color: var(--color-primary);
}

[data-footer='columns'] .site-footer__col {
  display: block;
}

@media (min-width: 900px) {
  [data-footer='columns'] .site-footer__inner {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    align-items: start;
    column-gap: 48px;
  }

  [data-footer='columns'] .site-footer__nav ul {
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
  }

  [data-footer='columns'] .site-footer__social {
    grid-column: 1;
    grid-row: 2;
  }
}

/* centered: logo grande no centro, navegação e redes abaixo. */
[data-footer='centered'] .site-footer__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 28px;
  text-align: center;
}

[data-footer='centered'] .site-footer .site-logo {
  align-items: center;
}

[data-footer='centered'] .site-footer .site-logo__name {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
}

[data-footer='centered'] .site-footer__nav ul {
  justify-content: center;
}

[data-footer='centered'] .site-footer__base {
  justify-content: center;
  text-align: center;
}