:root {
  --orange: #ff7600;
  --orange-dark: #d64a00;
  --yellow: #ffd000;
  --green: #237c35;
  --ink: #0d0c0a;
  --ink-soft: #181511;
  --cream: #fff3df;
  --white: #ffffff;
  --muted: #b7ada3;
  --line-light: rgba(255, 255, 255, 0.24);
  --line-dark: rgba(13, 12, 10, 0.22);
  --ease: cubic-bezier(.2, .75, .2, 1);
  --page-x: clamp(22px, 5vw, 78px);
  /* o degradê oficial do Instagram, reservado só pra ações da marca dele */
  --ig-gradient: linear-gradient(45deg, #f9ce34 4%, #ee2a7b 48%, #6228d7 96%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--ink);
  font-family: "Familjen Grotesk", sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}

h1,
h2,
h3,
p,
figure,
dl,
dd {
  margin: 0;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  color: var(--white);
  background: var(--orange);
  font-size: 13px;
  font-weight: 800;
  transform: translateY(-170%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-progress {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: rgba(255, 255, 255, .08);
}

.page-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}

.site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 18px var(--page-x);
  color: var(--white);
  border-bottom: 1px solid var(--line-light);
  transition: padding .35s var(--ease), background .35s ease, backdrop-filter .35s ease, transform .35s var(--ease);
}

/*
 * Recolhido: ver o comentário em script.js. A barra vale 74px, e cada capítulo
 * foi acertado para caber numa tela só; parada no topo ela comia justamente
 * esses 74px do capítulo.
 */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header.is-scrolled {
  padding-block: 11px;
  background: rgba(13, 12, 10, .86);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

/*
 * Logo oficial (17/09/2026), no lugar do recorte do perfil do Instagram.
 *
 * A arte já traz o nome escrito, então o texto "Supermercado Madi" que ficava
 * ao lado do círculo saiu: estaria repetido. Ela também já vem com contorno
 * branco de adesivo em volta de tudo, e é isso que a deixa legível sobre o
 * header escuro e o rodapé preto sem caixa atrás e sem mexer na cor da marca.
 *
 * Altura manda e a largura segue a proporção (3,2 por 1). O PNG tem 320px e
 * 640px de largura; o navegador escolhe pelo srcset conforme a densidade da tela.
 */
.brand__logo {
  display: block;
  width: auto;
  height: 48px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 42px);
  font-size: 12px;
  font-weight: 720;
  text-transform: uppercase;
}

.desktop-nav a {
  position: relative;
  padding-block: 10px;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 46px;
  padding: 0 13px 0 18px;
  color: var(--white);
  background: var(--orange);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease;
}

.header-cta svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--ease);
}

.header-cta:hover,
.header-cta:focus-visible {
  color: var(--white);
  background: var(--orange-dark);
}

.header-cta:hover svg,
.header-cta:focus-visible svg {
  transform: translateX(4px);
}

.menu-button {
  position: relative;
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  color: var(--white);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.menu-button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.menu-button span {
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: opacity .22s ease, transform .22s var(--ease);
}

.menu-button span:first-child {
  transform: translateY(-6px);
}

.menu-button span:last-child {
  transform: translateY(6px);
}

.menu-button[aria-expanded="true"] span:first-child {
  transform: rotate(45deg);
}

.menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(.35);
}

.menu-button[aria-expanded="true"] span:last-child {
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: none;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding: 115px 24px 35px;
  color: var(--white);
  background: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: visibility .22s ease, opacity .22s ease, transform .22s var(--ease);
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-menu__label {
  display: block;
  margin-bottom: 26px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.mobile-menu nav {
  display: grid;
}

.mobile-menu nav a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 56px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  font-size: clamp(38px, 12vw, 58px);
  font-stretch: normal;
  font-variation-settings: "opsz" 54;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .92;
}

.mobile-menu__footer {
  display: grid;
  gap: 16px;
  margin-top: auto;
  padding-top: 34px;
}

.mobile-menu__footer p {
  max-width: 300px;
  font-size: 14px;
  line-height: 1.5;
}

.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 18px;
  color: var(--ink);
  background: var(--orange);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .22s ease, color .22s ease;
}

.mobile-menu__cta:hover,
.mobile-menu__cta:focus-visible {
  color: var(--white);
  background: var(--orange-dark);
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: var(--ink);
}

.hero__media,
.hero__overlay,
.hero__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__media {
  z-index: -4;
  height: 100%;
  top: 0;
  animation: hero-image-in 1.8s var(--ease) both;
}

.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(1.1) saturate(.95) contrast(1.03);
}

.hero__overlay {
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(9, 8, 6, .68) 0%, rgba(9, 8, 6, .4) 38%, rgba(9, 8, 6, .04) 70%),
    linear-gradient(0deg, rgba(9, 8, 6, .5) 0%, rgba(9, 8, 6, .02) 55%, rgba(9, 8, 6, .22) 100%);
}

.hero__texture {
  z-index: -2;
  opacity: .2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 8.5vw;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, .18);
}

.hero__copy {
  position: absolute;
  z-index: 2;
  left: var(--page-x);
  bottom: clamp(72px, 9vh, 112px);
  width: min(920px, 74vw);
}

.kicker {
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 3px;
  margin-right: 12px;
  vertical-align: middle;
  background: currentColor;
}

.kicker--orange {
  color: var(--orange);
}

.hero h1 {
  font-size: clamp(56px, 6.1vw, 102px);
  font-stretch: normal;
  font-variation-settings: "opsz" 96;
  font-weight: 800;
  line-height: .79;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.hero h1 > span {
  display: block;
}

.hero__title-mobile-join {
  display: none;
}

.text-orange {
  color: var(--orange);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 33px;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  padding: 0 24px;
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease);
}

.action:hover,
.action:focus-visible {
  transform: translateY(-3px);
}

.action--orange {
  color: var(--white);
  background: var(--orange);
}

.action--orange:hover,
.action--orange:focus-visible {
  color: var(--white);
  background: var(--orange-dark);
}

.action--glass {
  color: var(--white);
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
}

.action--glass:hover,
.action--glass:focus-visible {
  background: rgba(255, 255, 255, .16);
}

.action--dark {
  color: var(--white);
  background: var(--ink);
}

.action--dark:hover,
.action--dark:focus-visible {
  color: var(--white);
  background: var(--orange);
}

.hero__source {
  position: absolute;
  right: calc(clamp(260px, 24vw, 380px) + 18px);
  bottom: 19px;
  max-width: 260px;
  color: rgba(255, 255, 255, .52);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}

.scroll-cue {
  position: absolute;
  z-index: 4;
  right: calc(8.5vw - 18px);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255, 255, 255, .78);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: rotate(90deg) translateX(50%);
  transform-origin: right center;
}

.scroll-cue svg {
  width: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-90deg);
}

.media-chapter {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}

.media-chapter__sticky {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  gap: clamp(26px, 4vh, 46px);
  padding: clamp(88px, 12vh, 128px) 0 clamp(72px, 9vh, 104px);
}

.media-chapter__sticky::before {
  content: "MADI";
  position: absolute;
  top: -35px;
  right: -40px;
  color: rgba(255, 255, 255, .025);
  font-size: clamp(210px, 33vw, 540px);
  font-stretch: condensed;
  font-variation-settings: "wdth" 62;
  font-weight: 900;
  line-height: .75;
  letter-spacing: -.08em;
}

.chapter-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 390px);
  align-items: end;
  gap: clamp(26px, 4vw, 66px);
  padding-inline: var(--page-x);
}

.chapter-heading h2,
.offers h2,
.stores h2,
.history h2,
.jobs h2 {
  font-size: clamp(66px, 7.2vw, 124px);
  font-stretch: normal;
  font-variation-settings: "opsz" 82;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.chapter-heading__copy {
  max-width: 370px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* --- Capítulo 2: esteira contínua das fotos de dentro da loja --- */

/*
 * Mesma mecânica do capítulo 3: a faixa é duplicada no HTML e a animação a
 * desloca em -50%, sem emenda na volta. Os cartões têm tamanho uniforme, então
 * o passo entre os cartões é margin-right em CADA .reel-card, e não gap no
 * contêiner: com gap,
 * a metade de trás não fecharia na mesma largura da da frente e a volta pularia.
 */
.media-reel {
  position: relative;
  z-index: 2;
  display: flex;
  width: max-content;
  padding-bottom: 22px;
  will-change: transform;
}

.marquee--reel .media-reel {
  animation: media-reel-desliza 66s linear infinite;
}

@keyframes media-reel-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* mouse, teclado e o botão de pausa seguram a esteira para dar tempo de olhar */
.marquee--reel:hover .media-reel,
.marquee--reel:focus-within .media-reel,
.marquee--reel.is-paused .media-reel {
  animation-play-state: paused;
}

/*
 * Decisão do cliente, 16/09/2026: todos os cartões devem ter o mesmo tamanho
 * visual. A largura deixa de vir da proporção da foto; o quadro é uniforme e
 * a imagem preenche o espaço com object-fit: cover. Assim fotos verticais e
 * quadradas têm o mesmo peso na esteira.
 */
.reel-card {
  position: relative;
  width: clamp(250px, 24vw, 350px);
  height: clamp(330px, 50vh, 520px);
  overflow: hidden;
  flex: 0 0 auto;
  margin-right: 18px;
  background: var(--ink-soft);
}

.reel-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) contrast(1.04);
  transition: transform .8s var(--ease), filter .8s ease;
}

.reel-card:hover img {
  filter: saturate(1) contrast(1.04);
  transform: scale(1.035);
}

.reel-card figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  padding: 18px 22px;
  color: var(--white);
  background: var(--orange);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.reel-card figcaption span {
  font-size: 9px;
}

.offers {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  padding: 110px var(--page-x) 96px;
  color: var(--ink);
  background: var(--orange);
}

.offers::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .11;
  pointer-events: none;
  background-image: linear-gradient(rgba(13, 12, 10, .4) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 12, 10, .4) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 50%, #000 100%);
}

.offers__word {
  position: absolute;
  z-index: 0;
  top: -30px;
  left: -20px;
  color: transparent;
  font-size: clamp(190px, 30vw, 490px);
  font-stretch: condensed;
  font-variation-settings: "wdth" 62;
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.08em;
  -webkit-text-stroke: 1px rgba(13, 12, 10, .17);
}

.offers__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  text-align: center;
}

/*
 * Menor que os h2 dos capítulos 2 e 4, de propósito: aqui o título é uma
 * abertura curta e quem carrega a seção é a faixa de fotos. No tamanho herdado
 * ele virava quatro linhas e empurrava a faixa para fora da tela.
 */
.offers__head h2 {
  margin-top: 2px;
  font-size: clamp(38px, 4.4vw, 68px);
}

.offers__support {
  max-width: 470px;
  font-size: 16px;
  line-height: 1.5;
}

.offers__head .action {
  margin-top: 10px;
}

/* --- Capítulo 3: esteira contínua de fotos --- */

/*
 * As fotos deslizam sem parar, em loop, da esquerda para a direita.
 *
 * O loop é feito duplicando a lista inteira no HTML e deslocando a esteira em
 * exatamente -50%. Quando a animação reinicia, a cópia está no mesmo lugar em
 * que o original estava: o olho não vê emenda.
 *
 * Para isso o -50% precisa cair no lugar certo, e é por isso que o espaço entre
 * as fotos é `margin-right` em CADA item, e não `gap` no contêiner. Com `gap`,
 * o último item de cada metade não teria espaço depois dele, as duas metades
 * teriam larguras diferentes e a emenda ficaria visível a cada volta.
 *
 * A animação é CSS puro. O JavaScript só liga e desliga o botão de pausa.
 *
 * Para acrescentar foto: acrescentar o <li> NAS DUAS metades. Nada mais muda.
 */
.marquee {
  position: relative;
  z-index: 2;
  width: 100%;
}

/*
 * As bordas somem em degradê para a esteira não terminar em corte seco. A
 * máscara é o único jeito de fazer isso sem pintar um retângulo da cor do
 * fundo por cima, que quebraria se a seção mudasse de cor.
 */
.marquee__viewport {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee-desliza 64s linear infinite;
}

.marquee__item {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: clamp(178px, 19vw, 258px);
  height: clamp(248px, 36vh, 350px);
  margin-right: 14px;
  background: var(--ink);
  border-radius: 12px;
}

.marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .55s var(--ease);
}

.marquee__item:hover img {
  transform: scale(1.06);
}

@keyframes marquee-desliza {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* o mouse e o teclado seguram a esteira para dar tempo de olhar */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track {
  animation-play-state: paused;
}




/* sem JS o botão não faz nada, então não deve aparecer */

/*
 * Quem pediu menos movimento não recebe esteira andando. A faixa para e passa a
 * rolar na mão, então nenhuma foto fica inacessível.
 */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .marquee--reel .media-reel {
    animation: none;
  }

  .marquee__viewport {
    overflow-x: auto;
  }

  .marquee__item img,
  .reel-card img {
    transition: none;
  }

  .marquee__pause {
    display: none;
  }
}


/*
 * O controle de pausa virou um ícone discreto no canto da esteira, em vez da
 * palavra "Pausar" no meio da página. Ele continua existindo porque conteúdo
 * que se move sozinho por mais de cinco segundos precisa de um jeito de parar
 * (WCAG 2.2.2); o que mudou foi só o peso visual.
 */
.marquee__pause {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease, background .25s ease;
}

/* só aparece quando alguém se aproxima da esteira ou navega por teclado */
.marquee:hover .marquee__pause,
.marquee:focus-within .marquee__pause {
  opacity: 1;
}

.marquee__pause:hover {
  background: var(--white);
}

.marquee__pause svg {
  width: 15px;
  fill: currentColor;
}

/* pausado: o ícone vira "play" e fica sempre visível, senão ninguém acha para religar */
.marquee.is-paused .marquee__pause {
  opacity: 1;
}

.marquee__pause .icone-play,
.marquee.is-paused .marquee__pause .icone-pausa {
  display: none;
}

.marquee.is-paused .marquee__pause .icone-play {
  display: block;
}

/*
 * A faixa do Instagram. Larga, baixa, e escura para descolar do laranja da
 * seção. É um link inteiro: o "Seguir" tem cara de botão mas é um span, porque
 * link dentro de link é inválido.
 */
.ig-band {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  width: 100%;
  max-width: 1180px;
  min-height: 112px;
  padding: 16px clamp(18px, 2.2vw, 30px);
  color: var(--white);
  background: var(--ink);
  border-radius: 14px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.ig-band:hover,
.ig-band:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(13, 12, 10, .32);
}

.ig-band__mark {
  display: grid;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 14px;
  /* o degradê é o que torna a marca reconhecível de longe */
  background: var(--ig-gradient);
}

.ig-band__mark svg {
  width: 30px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.9;
}

.ig-band__mark .ig-band__dot {
  fill: var(--white);
  stroke: none;
}

.ig-band__text {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  justify-content: flex-start;
  min-width: 0;
  margin-right: auto;
  text-align: left;
}

.ig-band__text strong {
  font-size: clamp(17px, 1.5vw, 23px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.ig-band__thumbs {
  display: flex;
  gap: 8px;
}

.ig-band__thumbs img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 8px;
}

.ig-band__cta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  color: var(--white);
  /* degradê da marca em vez do amarelo/laranja do site: é a única cor fora
     dessa paleta na página inteira, então o olho vai direto nela */
  background: var(--ig-gradient);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: filter .25s ease;
}

.ig-band:hover .ig-band__cta,
.ig-band:focus-visible .ig-band__cta {
  filter: brightness(1.14) saturate(1.1);
}

/*
 * A faixa encolhe por etapas, tirando primeiro o que é enfeite. As miniaturas
 * saem antes do texto, e o texto antes do botão: numa barra que existe para
 * levar ao perfil, o botão é a última coisa que pode sumir.
 */
@media (max-width: 1080px) {
  .ig-band__thumbs img:nth-child(n + 5) {
    display: none;
  }
}

@media (max-width: 880px) {
  .ig-band__thumbs {
    display: none;
  }
}

@media (max-width: 560px) {
  .ig-band {
    flex-wrap: wrap;
    gap: 14px;
    min-height: 0;
    padding: 18px;
  }

  .ig-band__mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .ig-band__mark svg {
    width: 25px;
  }

  .ig-band__cta {
    flex: 1 0 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-band,
  .ig-band__cta {
    transition: none;
  }

  .ig-band:hover,
  .ig-band:focus-visible {
    transform: none;
  }
}

.offers__note {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

/*
 * Capítulo 4: a foto da loja gruda no topo e ocupa a altura da tela enquanto a
 * ficha corre ao lado. As cinco lojas se revezam sozinhas, num intervalo fixo
 * (JS); a rolagem não escolhe mais a loja, só decide se a foto está à vista.
 * No celular e em tela baixa nada gruda: a foto encolhe e a lista corre embaixo.
 */
.stores {
  position: relative;
  color: var(--ink);
  background: var(--cream);
}

.stores__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(460px, .98fr);
}

.stores__visual {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.stores__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(.9) contrast(1.04) brightness(1.02);
  transition: opacity .26s var(--ease);
}

/*
 * A foto some antes de a próxima entrar no lugar. O fundo por baixo é o preto
 * da marca, então o intervalo lê como escurecer, e não como imagem faltando.
 * Quem pediu menos movimento não passa por aqui: no script a troca é seca.
 */
.stores__visual.is-trocando img {
  opacity: 0;
}

.stores__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 7, 5, .82) 0%, transparent 46%);
}

/*
 * Sobre a foto vai só a cidade e o endereço em corpo médio, alinhados embaixo.
 * O endereço grande de antes (80px) saía do enquadramento com nomes longos como
 * "Av. Marechal Rondon, 2140"; aqui ele é menor e tem largura para quebrar.
 */
.stores__visual-label {
  position: absolute;
  z-index: 2;
  right: var(--page-x);
  bottom: 44px;
  left: var(--page-x);
  color: var(--white);
}

.stores__visual-label span {
  display: block;
  color: var(--orange);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.stores__visual-label strong {
  display: block;
  margin-top: 10px;
  max-width: 12ch;
  font-size: clamp(30px, 3vw, 46px);
  font-stretch: normal;
  font-variation-settings: "opsz" 60;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
}

.stores__content {
  padding: clamp(72px, 8vh, 110px) clamp(34px, 6vw, 96px);
}

.stores__content .kicker {
  margin-top: 0;
}

.stores__content h2 {
  margin-bottom: 20px;
}

.stores__stage .store-detail {
  padding-top: 16px;
}

/*
 * No celular e em tela baixa a foto não gruda: encolhe e a lista corre embaixo.
 * Quem pediu menos movimento também cai aqui (não vê o rodízio).
 */
@media (max-width: 1120px), (prefers-reduced-motion: reduce) {
  .stores__visual {
    position: relative;
    height: 70svh;
  }
}

.store-selector {
  display: grid;
  margin-top: 30px;
  border-top: 1px solid var(--line-dark);
}

.store-item {
  border-bottom: 1px solid var(--line-dark);
}

.store-selector button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 10px 6px;
  color: #73685f;
  background: transparent;
  border: 0;
  border-bottom: 0;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease;
}

.store-item__text {
  display: grid;
  gap: 4px;
  min-width: 0;
  transition: transform .3s var(--ease);
}

.store-selector button[aria-expanded="true"] .store-item__text {
  transform: translateX(20px);
}

.store-item__nome {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.store-item__meta {
  color: #766b61;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
}

.store-selector button::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  font-weight: 400;
}

.store-selector button[aria-expanded="true"] {
  color: var(--ink);
  padding-left: 0;
}

.store-selector button[aria-expanded="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 50%;
  transform: translateY(-50%);
}

.store-selector button[aria-expanded="true"]::after {
  content: "−";
}

.store-detail {
  margin: 0;
  padding: 16px 22px 24px;
  background: rgba(255, 118, 0, .055);
  border: 1px solid rgba(255, 118, 0, .22);
  border-radius: 0 0 14px 14px;
}

.store-detail[hidden] {
  display: none;
}

.store-detail__unit {
  margin: 0 0 9px;
  color: var(--orange-dark);
  font-size: 12px;
  font-weight: 830;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.store-detail h3 {
  margin: 0;
  max-width: 520px;
  font-size: clamp(28px, 3vw, 44px);
  font-stretch: normal;
  font-variation-settings: "opsz" 72;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.045em;
  text-transform: none;
}

.store-detail__city {
  display: block;
  margin-top: 8px;
  color: #5f554d;
  font-size: 15px;
  font-weight: 620;
}

.store-detail dl {
  margin: 22px 0 18px;
}

.store-detail dl div {
  padding: 14px 16px 15px;
  background: rgba(255, 118, 0, .085);
  border: 1px solid rgba(255, 118, 0, .2);
  border-radius: 12px;
}

.store-detail dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--orange-dark);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.store-detail__icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  place-items: center;
}

.store-detail__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.store-detail dd {
  font-size: clamp(23px, 2.2vw, 31px);
  font-weight: 820;
  letter-spacing: -.03em;
  line-height: 1;
}

.store-detail .action {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding-inline: 18px;
}

.store-detail .action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* --- Capítulo 5: a linha do tempo das cinco lojas --- */

/*
 * A seção virou duas faixas: em cima o título com o texto de apoio ao lado,
 * embaixo a linha do tempo ocupando a largura inteira. Por isso o min-height
 * fixo saiu: quem manda na altura agora é o conteúdo, que muda de forma nos
 * três modos (seis colunas, esteira com encaixe, pilha vertical).
 */
.history {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
  align-items: end;
  gap: clamp(52px, 6vw, 86px) clamp(40px, 8vw, 130px);
  padding: 160px var(--page-x) 120px;
  color: var(--white);
  background: var(--orange-dark);
  isolation: isolate;
}

.history__background {
  position: absolute;
  z-index: -3;
  inset: 0;
  /*
   * A foto de fundo é só textura. Ela entra sob três véus porque a linha do
   * tempo tem seis cartões de texto por cima: qualquer telhado ainda legível
   * aqui atrás vira ruído na leitura dos marcos.
   */
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(214, 74, 0, .5), transparent 58%),
    linear-gradient(180deg, rgba(133, 46, 0, .86) 0%, rgba(58, 20, 2, .94) 62%, rgba(26, 11, 2, .96) 100%),
    url("assets/fachada/aerea-ampla.jpg") center / cover;
  filter: saturate(.3) contrast(1.1);
}

.history::before {
  content: "HISTÓRIA";
  position: absolute;
  z-index: -1;
  top: clamp(70px, 9vh, 130px);
  left: -4%;
  color: transparent;
  font-size: clamp(180px, 31vw, 500px);
  font-stretch: condensed;
  font-variation-settings: "wdth" 62;
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.085em;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .17);
}

.history__title,
.history__intro {
  position: relative;
  z-index: 2;
}

.history__intro {
  max-width: 430px;
  padding-top: 30px;
  border-top: 4px solid var(--orange);
}

.history__intro p {
  color: rgba(255, 255, 255, .86);
  font-size: 16px;
  line-height: 1.6;
}

/*
 * A linha do tempo. Três modos, do mais largo para o mais estreito:
 *
 * | Modo | Quando          | O que acontece                                  |
 * |------|-----------------|-------------------------------------------------|
 * | 1    | > 1180px        | seis colunas iguais, tudo visível de uma vez    |
 * | 2    | 760px a 1180px  | esteira horizontal com encaixe, sangrando a tela|
 * | 3    | < 760px         | pilha vertical com conector entre os cartões    |
 *
 * O mesmo HTML serve aos três: o que muda é só o CSS. As fotos são as mesmas
 * cinco de `assets/fachada/` usadas no capítulo Lojas, então no modo 1 elas já
 * vêm do cache do navegador e a seção não pesa nada a mais.
 */
.timeline {
  --tl-gap: clamp(13px, 1.3vw, 20px);
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--tl-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__step {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 26px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13, 12, 10, .04) 0%, rgba(13, 12, 10, .5) 62%, rgba(13, 12, 10, .62) 100%);
}

.timeline__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 26px;
}

.timeline__photo img {
  width: 100%;
  height: 100%;
  /* --focus por loja: cada telhado está numa altura diferente da foto aérea, e
     é o letreiro que precisa sobrar no corte. */
  object-fit: cover;
  object-position: center var(--focus, 35%);
}

/*
 * O --focus de cada loja mora aqui, e não num style="" no HTML. A política de
 * segurança da página (a meta Content-Security-Policy do index.html) não
 * permite estilo inline, e o navegador descartava os cinco em silêncio: todas
 * as fotos caíam no 35% padrão. Achado na revisão antes da entrega, 17/09/2026.
 */
/*
 * Valores refeitos em 18/09/2026, a pedido do cliente. As fotos são verticais
 * e o cartão é horizontal, então só a altura do corte decide o enquadramento.
 * A régua foi a mesma nas cinco: a placa da loja no meio do cartão, a entrada
 * logo abaixo e o mínimo possível de telhado e de chão vazio.
 *
 * Os antigos vinham de estimativa e três erravam feio: a Santa Fé mostrava o
 * telhado da casa em cima da loja, a Breno Garcia mostrava o bairro em volta, e
 * a Av. dos Estados quase só o telhado. Desta vez cada valor foi escolhido
 * olhando o corte renderizado.
 */
.timeline__step--matriz { --focus: 26%; }
.timeline__step--santa-fe { --focus: 65%; }
.timeline__step--rondon { --focus: 32%; }
.timeline__step--breno { --focus: 62%; }
.timeline__step--estados { --focus: 57%; }

.timeline__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 12, 10, 0) 45%, rgba(13, 12, 10, .55) 100%);
}

/* O ano é [número][nó][linha]. A linha cresce com flex e cancela o padding
   do bloco com margem negativa, então ela corre até a borda do cartão e a
   sequência lê como um trilho só, sem nenhum elemento extra no HTML. */
.timeline__year {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 18px;
  color: rgba(255, 255, 255, .92);
  font-size: clamp(30px, 2.5vw, 40px);
  font-variation-settings: "opsz" 82;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
}

.timeline__year::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-left: 3px;
  border-radius: 50%;
  background: var(--orange);
}

.timeline__year::after {
  content: "";
  flex: 1 1 auto;
  height: 2px;
  margin-right: -18px;
  background: var(--orange);
}

.timeline__unit {
  padding: 18px 18px 0;
  font-size: 15px;
  font-weight: 820;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.timeline__place {
  /* Três linhas reservadas, mais o padding de cima: Cachoeirinha não tem
     bairro na ficha e o endereço fica com duas linhas. Sem essa reserva a
     nota daquele cartão sobe e quebra a régua horizontal dos seis. */
  min-height: calc(3 * 1.45em + 12px);
  padding: 12px 18px 0;
  color: rgba(255, 255, 255, .74);
  font-size: 13.5px;
  line-height: 1.45;
}

.timeline__note {
  padding: 18px 18px 0;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.55;
}

/* 2027 não é uma loja, é uma promessa: sem foto, fundo quase preto e o
   mascote atrás de um brilho laranja. */
.timeline__step--future {
  border-color: rgba(255, 118, 0, .42);
  background: linear-gradient(180deg, rgba(13, 12, 10, .72), rgba(13, 12, 10, .9));
}

/*
 * A loja de 2027 não existe, então a imagem é conceito, não registro: a marca
 * em neon numa fachada escura. O fundo fica em ink por baixo porque a arte é
 * escura nas bordas e qualquer sobra encosta no preto sem emenda visível.
 */
.timeline__photo--future {
  display: grid;
  place-items: center;
  /* o halo faz a folga em volta da arte parecer luz do próprio letreiro, e não
     sobra de imagem pequena */
  background:
    radial-gradient(70% 58% at 50% 62%, rgba(255, 118, 0, .22), transparent 70%),
    var(--ink);
}

/*
 * A arte tem 240x214px e NUNCA é ampliada além disso: esticada para os 445px do
 * cartão no celular, o traço fino do neon borra na hora. Então ela se comporta
 * como um quadro iluminado, centralizado, e quem cresce em volta é o halo.
 * Quando chegar o arquivo em resolução maior, este bloco pode voltar a ser um
 * cover simples como o dos outros cinco cartões.
 */
.timeline__photo--future img {
  width: auto;
  height: auto;
  max-width: min(100%, 240px);
  max-height: 100%;
  border-radius: 10px;
  /* o neon respira devagar, como letreiro ligando. Catorze por cento de brilho
     é o bastante para o olho perceber sem virar pisca-pisca. */
  animation: neon-respira 7s ease-in-out infinite;
}

.timeline__photo--future::after {
  background: linear-gradient(180deg, rgba(13, 12, 10, .4) 0%, transparent 38%);
}

@keyframes neon-respira {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14) saturate(1.06); }
}

.timeline__step--future .timeline__year {
  color: var(--orange);
}

.timeline__step--future .timeline__year::after {
  background: linear-gradient(90deg, var(--orange), rgba(255, 118, 0, 0));
  margin-right: 0;
}

.timeline__step--future .timeline__unit {
  color: var(--orange);
}

/* No desktop os seis cartões entram juntos no campo de visão, então eles
   sobem em cascata. Em tela estreita cada um entra sozinho e o atraso viraria
   espera, por isso o escalonamento só existe daqui para cima. */
@media (min-width: 1181px) {
  .timeline__step:nth-child(2) { transition-delay: .07s; }
  .timeline__step:nth-child(3) { transition-delay: .14s; }
  .timeline__step:nth-child(4) { transition-delay: .21s; }
  .timeline__step:nth-child(5) { transition-delay: .28s; }
  .timeline__step:nth-child(6) { transition-delay: .35s; }
}

@media (max-width: 1180px) {
  .timeline {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(248px, 34vw);
    /* sangra até as duas bordas da tela: a esteira encosta no fim do vidro
       em vez de morrer na margem da seção. */
    margin: 0 calc(var(--page-x) * -1);
    padding: 4px var(--page-x) 18px;
    overflow-x: auto;
    /* o translateY inicial do .reveal abriria uma barra vertical dentro da
       esteira; cortar em y evita a rolagem fantasma sem afetar a animação. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* sem isto o encaixe alinha o primeiro cartão com a borda do vidro e come
       o padding lateral: a esteira abre grudada na quina da tela. */
    scroll-padding-inline: var(--page-x);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
    overscroll-behavior-x: contain;
  }

  .timeline__step {
    scroll-snap-align: start;
  }
}

/* A esteira recebe foco de teclado (ver o tabindex no HTML). O contorno segue
   o padrão do site, só afastado para não cobrir a foto do primeiro cartão. */
.timeline:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 6px;
}

.jobs {
  position: relative;
  min-height: 1050px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(420px, 1.02fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  padding: 125px var(--page-x) 205px;
  color: var(--ink);
  background: var(--cream);
}

.jobs__copy {
  align-self: end;
  grid-column: 1;
  grid-row: 1;
  padding-bottom: 28px;
}

.jobs__photo {
  position: relative;
  /* <figure> traz margem do navegador e ela estouraria a célula da grade */
  margin: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  /* ocupa as duas linhas inteiras: sobrava creme embaixo e a foto ficava apertada */
  align-self: stretch;
  min-height: 610px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(30px, 4vw, 58px);
  color: var(--white);
  background: var(--ink);
  isolation: isolate;
}

.jobs__photo img {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * A foto é horizontal e o quadro muda de proporção com a tela. O foco fica
   * levemente à direita para preservar a pessoa e o corte de carne no quadro,
   * inclusive quando o layout fica mais estreito no celular.
   */
  object-position: 58% center;
}

/*
 * Véu só na parte de baixo, onde o texto se apoia. Escurecer a foto inteira
 * apagaria o rosto, que é o motivo de a foto estar aqui.
 */
.jobs__photo figcaption::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 46%;
  background: linear-gradient(rgba(13, 12, 10, 0), rgba(13, 12, 10, .55) 45%, rgba(13, 12, 10, .9));
}

/*
   * Pequena de propósito. O título grande já está do lado esquerdo, e a frase
   * aqui em corpo de manchete não deve esconder a pessoa nem o produto que ela
   * apresenta.
 */
.jobs__photo figcaption strong {
  position: relative;
  display: block;
  max-width: 420px;
  font-size: clamp(23px, 2.1vw, 31px);
  font-stretch: condensed;
  font-variation-settings: "wdth" 74;
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.jobs__action {
  align-self: start;
  grid-column: 1;
  grid-row: 2;
  max-width: 420px;
}

.jobs__action p {
  margin-bottom: 28px;
  color: #655a50;
  font-size: 16px;
  line-height: 1.55;
}

.site-footer {
  padding: 70px var(--page-x) 26px;
  color: var(--white);
  background: var(--ink);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 30px;
  padding-bottom: 65px;
  border-bottom: 1px solid var(--line-light);
}

.brand--footer .brand__logo {
  height: 68px;
}

.site-footer__top > p {
  justify-self: center;
  max-width: 260px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.footer-top-link {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-top-link span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--white);
  background: var(--orange);
  border-radius: 50%;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  padding: 62px 0;
}

.site-footer__grid > div {
  display: grid;
  align-content: start;
  gap: 11px;
}

.site-footer__grid a,
.site-footer__grid p {
  width: fit-content;
  color: var(--muted);
  border-bottom-color: transparent;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.site-footer__grid a:hover,
.site-footer__grid a:focus-visible,
.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  color: var(--orange);
}

.footer-label {
  margin-bottom: 10px;
  color: var(--orange);
  font-size: 9px;
  font-weight: 830;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid var(--line-light);
  color: rgba(255, 255, 255, .44);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/*
 * Rodapé compacto fora do celular (17/09/2026).
 *
 * Eram duas faixas empilhadas, logo e "voltar ao topo" em cima e as três colunas
 * embaixo, somando uns 530px. Como cada capítulo tem a altura de uma tela, a
 * última tela da página mostrava o Trabalhe Conosco cortado ao meio, título e
 * rosto da foto de fora, com o rodapé por baixo.
 *
 * Agora é uma faixa só: marca e frase à esquerda, as três colunas de links no
 * meio e o "voltar ao topo" no canto direito. Fica perto de 300px, e o
 * Trabalhe Conosco divide a última tela com ele (ver .jobs no bloco "Um
 * capítulo, uma tela").
 *
 * O HTML não mudou, e é por isso que o .site-footer__top vira `display:
 * contents`: a caixa dele some do layout e os três filhos (marca, frase e
 * link) passam a ser posicionados direto na grade do rodapé. No celular a
 * caixa continua existindo e tudo segue empilhado como antes.
 *
 * Quem define a altura da faixa é a coluna de links, a mais alta. A marca
 * cresceu até caber nessa altura com a frase embaixo, então ocupar o espaço
 * que o "voltar ao topo" liberou não deixou o rodapé mais alto.
 */
@media (min-width: 761px) {
  .site-footer {
    display: grid;
    grid-template-columns: minmax(200px, 1.15fr) minmax(0, 3fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: clamp(30px, 5vw, 90px);
    row-gap: 14px;
    padding-top: clamp(34px, 6vh, 70px);
  }

  .site-footer__top {
    display: contents;
  }

  /* marca e frase, juntas e centradas na altura da coluna de links */
  /* a largura vai no link, e não na imagem: o .brand se ajusta ao conteúdo,
     então uma porcentagem na imagem não tinha contra o que ser calculada */
  .brand--footer {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    width: min(100%, 290px);
  }

  .brand--footer .brand__logo {
    width: 100%;
    height: auto;
  }

  .site-footer__top > p {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    text-align: left;
  }

  .site-footer__grid {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: 8px 0 0;
  }

  /* canto de cima à direita, na linha dos títulos das colunas */
  .footer-top-link {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: start;
    justify-self: end;
  }

  .site-footer__bottom {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: clamp(12px, 4vh, 42px);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}

.reveal--delay-1 {
  transition-delay: .1s;
}

.reveal--delay-2 {
  transition-delay: .2s;
}

.reveal--delay-3 {
  transition-delay: .3s;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes hero-image-in {
  from { opacity: .3; }
  to { opacity: 1; }
}

@media (max-width: 1120px) {
  .site-header {
    grid-template-columns: 1fr auto;
    min-height: 68px;
    padding: 12px var(--page-x);
    border-bottom-color: transparent;
    transition: background .22s ease, backdrop-filter .22s ease, transform .22s var(--ease);
  }

  .site-header.is-scrolled,
  body.menu-open .site-header {
    padding-block: 12px;
    background: rgba(13, 12, 10, .92);
    backdrop-filter: blur(14px);
  }

  .site-header.is-hidden {
    transform: none;
  }

  .brand,
  .menu-button {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5));
  }

  .brand__logo {
    height: 44px;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-button,
  .mobile-menu {
    display: grid;
  }

  .menu-button {
    width: 44px;
    height: 44px;
  }

  .mobile-menu {
    padding: 118px var(--page-x) 30px;
  }

  .hero__copy {
    width: min(880px, 82vw);
  }

  .chapter-heading {
    grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
  }

  .chapter-heading__copy {
    grid-column: 2;
    margin-top: 8px;
  }

  .offers {
    padding-block: 120px;
  }

  .stores__stage {
    grid-template-columns: 1fr;
  }

  .stores__visual {
    height: 70svh;
  }

  .history {
    grid-template-columns: 1fr;
    align-content: end;
  }

  .jobs {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    align-items: start;
  }

  .jobs__copy {
    grid-column: 2;
    grid-row: 1;
  }

  .jobs__photo {
    grid-column: 2;
    grid-row: 2;
    min-height: 560px;
  }

  .jobs__action {
    grid-column: 2;
    grid-row: 3;
  }
}

@media (max-width: 760px) {
  :root {
    --page-x: 20px;
  }

  /* O header continua livre sobre a foto, com contraste suficiente para logo
     e menu sem criar uma barra visual pesada. */
  body:not(.menu-open) .site-header:not(.is-scrolled) {
    background: linear-gradient(180deg, rgba(13, 12, 10, .32), transparent);
  }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  .hero__media {
    position: relative;
    z-index: 0;
    flex: 0 0 clamp(340px, 45svh, 450px);
    height: auto;
    overflow: hidden;
  }

  .hero__media img {
    /* A faixa visual do topo deixa o ponto de foco atuar de verdade: menos
       céu, o bairro ainda presente e a fachada no centro da composição. */
    object-position: 56% 68%;
  }

  .hero__overlay {
    z-index: 1;
    inset: 0 0 auto;
    height: clamp(340px, 45svh, 450px);
    background:
      linear-gradient(180deg, rgba(9, 8, 6, .46) 0%, rgba(9, 8, 6, .14) 40%, transparent 70%),
      linear-gradient(0deg, var(--ink) 0%, rgba(13, 12, 10, .62) 20%, transparent 52%);
  }

  .hero::after,
  .scroll-cue,
  .hero__source,
  .hero__texture {
    display: none;
  }

  .hero__copy {
    position: relative;
    z-index: 2;
    left: auto;
    bottom: auto;
    flex: 1 1 auto;
    width: 100%;
    padding: clamp(48px, 7svh, 64px) var(--page-x) max(32px, env(safe-area-inset-bottom));
    background: var(--ink);
  }

  .hero__copy .kicker {
    margin-bottom: 22px;
  }

  .hero__title-mobile-join {
    display: inline;
  }

  .hero__title-desktop-join {
    display: none;
  }

  .hero__title-economy {
    color: var(--orange);
  }

  .hero h1 .text-orange {
    color: var(--white);
  }

  .hero h1 {
    font-size: clamp(52px, 14.4vw, 62px);
    line-height: .86;
  }

  .hero__actions {
    display: grid;
    gap: 12px;
    margin-top: 30px;
    width: min(100%, 360px);
  }

  .action {
    width: 100%;
    min-height: 51px;
  }

  .hero .action--glass {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .025);
  }

  .hero .action--glass:hover,
  .hero .action--glass:focus-visible {
    border-color: rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .09);
  }

  .media-chapter__sticky {
    justify-content: flex-start;
    padding: 92px 0 18px;
  }

  /*
   * A esteira continua andando sozinha no celular, igual ao capítulo 3. Como
   * cabe menos foto na tela, o mesmo tempo daria sensação de correr: o ciclo
   * encurta um pouco para a passagem acompanhar melhor a leitura no celular.
   */
  .marquee--reel .media-reel {
    animation-duration: 40s;
  }

  .media-chapter .chapter-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 22px;
  }

  .media-chapter .chapter-heading__copy {
    display: none;
  }

  .media-chapter .chapter-heading h2 {
    font-size: clamp(43px, 12vw, 58px);
    line-height: .85;
  }

  .chapter-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .chapter-heading__copy {
    grid-column: 1;
  }

  .chapter-heading h2,
  .offers h2,
    .stores h2,
  .history h2,
  .jobs h2 {
    font-size: clamp(58px, 17vw, 78px);
  }

  /*
   * No celular os cartões continuam uniformes. O quadro acompanha a largura
   * da tela para manter duas fotos parcialmente visíveis e o movimento legível.
   */
  .reel-card {
    width: clamp(220px, 62vw, 310px);
    height: clamp(240px, 62vw, 360px);
  }

  .offers {
    gap: 34px;
    padding: 110px var(--page-x) 80px;
  }

  .offers__word {
    top: 15px;
    font-size: 170px;
  }

  .offers__support {
    font-size: 15px;
  }

  /*
   * A esteira não muda de eixo no celular: continua deslizando na horizontal,
   * só com foto menor. O que muda é a velocidade. Como cabe menos foto na tela,
   * a faixa fica um pouco mais ágil no celular, sem acelerar demais a leitura.
   */
  .marquee__track {
    animation-duration: 70s;
  }

  /*
   * Com 46vw cabiam duas fotos na tela e a esteira perdia o ritmo: sem uma
   * terceira entrando pela borda, não se lê como faixa em movimento.
   */
  .marquee__item {
    width: 37vw;
    max-width: 178px;
    height: 50vw;
    max-height: 240px;
    margin-right: 10px;
  }

  .offers__note {
    padding-inline: var(--page-x);
  }

  .stores {
    min-height: auto;
  }

  .stores__visual {
    height: 520px;
  }

  .stores__visual img {
    object-position: center;
  }

  .stores__content {
    padding: 68px var(--page-x) 78px;
  }

  .stores__content .kicker {
    margin-top: 0;
  }

  .store-detail dl {
    margin-top: 18px;
  }

  .store-detail {
    padding-right: 16px;
    padding-left: 16px;
  }

  .store-item__meta {
    font-size: 11px;
  }

  .store-detail h3 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .store-detail dd {
    font-size: clamp(24px, 8vw, 31px);
  }

  .history {
    padding: 120px var(--page-x) 85px;
  }

  /* No celular, o título ganha uma área limpa: a palavra HISTÓRIA gigante é
     ótima como textura no desktop, mas disputa com a manchete na tela estreita. */
  .history::before {
    display: none;
  }

  .history__background {
    background:
      linear-gradient(180deg, rgba(113, 37, 4, .98) 0 350px, rgba(93, 29, 3, .9) 500px, rgba(26, 11, 2, .96) 100%),
      url("assets/fachada/aerea-ampla.jpg") center / cover;
  }

  /*
   * No celular o título não precisa repetir as três quebras editoriais do
   * desktop. Ele ganha uma composição mais curta, com área própria antes do
   * texto da história e das fotos da linha do tempo.
   */
  .history__title h2 {
    font-size: clamp(48px, 14vw, 64px);
    line-height: .86;
  }

  .history__title h2 br {
    display: none;
  }

  .history__intro {
    margin-top: 4px;
  }

  /* Modo 3: a esteira vira pilha. No celular a rolagem lateral esconderia
     metade dos marcos, e a história precisa ser lida inteira. */
  .timeline {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .timeline__step + .timeline__step {
    margin-top: 46px;
  }

  /* o conector entre um marco e o outro */
  .timeline__step + .timeline__step::before {
    content: "";
    position: absolute;
    top: -38px;
    left: 50%;
    width: 2px;
    height: 30px;
    background: linear-gradient(180deg, rgba(255, 118, 0, .25), var(--orange));
  }

  .timeline__step {
    position: relative;
    overflow: visible;
    padding-bottom: 24px;
  }

  .timeline__photo {
    aspect-ratio: 16 / 10;
    margin-bottom: 24px;
    border-radius: 15px 15px 0 0;
  }

  .timeline__year {
    font-size: 38px;
  }

  .timeline__place {
    min-height: 0;
  }

  .jobs {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 35px;
    min-height: 860px;
    padding: 95px var(--page-x) 185px;
  }

  .jobs__copy,
  .jobs__photo,
  .jobs__action {
    grid-column: 1;
    grid-row: auto;
  }

  .jobs__copy {
    padding-bottom: 0;
  }

  .jobs__photo {
    min-height: 500px;
  }

  .jobs__action {
    grid-column: 1;
  }

  .site-footer {
    padding-top: 38px;
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 12px 16px;
    padding-bottom: 30px;
  }

  .brand--footer {
    width: min(100%, 168px);
  }

  .brand--footer .brand__logo {
    width: 100%;
    height: auto;
  }

  .site-footer__top > p {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    max-width: 300px;
    text-align: left;
  }

  .footer-top-link {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    gap: 10px;
  }

  .site-footer__grid {
    grid-template-columns: minmax(60px, 1.15fr) minmax(66px, .9fr) minmax(125px, 1.45fr);
    gap: 12px;
    padding-block: 32px;
  }

  .site-footer__grid > div:last-child a {
    white-space: nowrap;
  }

  .footer-label {
    margin-bottom: 6px;
  }

  .site-footer__bottom {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    letter-spacing: .04em;
    padding-top: 12px;
  }

  .site-footer__bottom > span,
  .site-footer__bottom a {
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .site-footer__top {
    grid-template-columns: 1fr;
  }

  .footer-top-link {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .site-footer__top > p {
    grid-row: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .media-chapter {
    height: auto;
    padding: 110px 0;
  }

  .media-chapter__sticky {
    position: relative;
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .media-reel {
    width: auto;
    overflow-x: auto;
    transform: none !important;
    scrollbar-width: thin;
  }
}

/* ==========================================================================
   Celular: dedo, leitura e recorte de tela (16/09/2026)

   Bloco no fim do arquivo de propósito: são correções que precisam ganhar das
   regras de cada capítulo, e ficam todas num lugar só para serem revisadas
   juntas na próxima passada de mobile.
   ========================================================================== */

/*
 * 1. ALVOS DE TOQUE
 *
 * Critério: 44px, a recomendação da Apple, mais exigente que os 24px mínimos
 * da WCAG 2.5.8. O gatilho é `pointer: coarse`, não largura de tela: quem
 * decide o tamanho do alvo é o dedo, e um tablet de 900px também é dedo.
 *
 * Medido antes: links do rodapé com 19px de altura, menos da metade do mínimo,
 * e os botões de pendência com 25px.
 */
@media (pointer: coarse) {
  .site-footer__grid a,
  .footer-top-link,
  .skip-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* o respiro da coluna agora vem da altura do próprio alvo, senão o rodapé
     dobraria de tamanho à toa */
  .site-footer__grid > div {
    gap: 0;
  }

  .site-footer__bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * O controle de pausa da esteira tinha 38px e, pior, só aparecia no :hover.
   * No celular não existe hover: o botão existia no HTML e era invisível na
   * prática, justamente no aparelho onde a esteira mais atrapalha. A WCAG
   * 2.2.2 exige poder parar o que se move sozinho, então aqui ele fica sempre
   * à mostra.
   */
  .marquee__pause {
    width: 44px;
    height: 44px;
    opacity: 1;
  }

  .marquee__pause svg {
    width: 17px;
  }

  /*
   * No toque, o foco fica no próprio botão depois do primeiro toque. Sem esta
   * exceção, o :focus-within pausava a faixa novamente e o segundo toque só
   * trocava o ícone, sem deixar a animação voltar.
   */
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track,
  .marquee--reel:hover .media-reel,
  .marquee--reel:focus-within .media-reel {
    animation-play-state: running;
  }

  .marquee.is-paused .marquee__track,
  .marquee--reel.is-paused .media-reel {
    animation-play-state: paused;
  }
}

/*
 * 2. LEITURA
 *
 * Tipos de 7px a 10px são confortáveis num monitor a 60cm e viram risco a 30cm
 * no ônibus. O gatilho é `pointer: coarse` e não `max-width`, porque celular
 * deitado tem 844px de largura: preso à largura, o texto voltava a encolher
 * justamente quando a pessoa vira o aparelho. Desktop é `pointer: fine` e não
 * entra aqui, então o que o cliente aprovou fica como está.
 */
@media (pointer: coarse) {
  /* O "Continuar" do hero é girado em 90 graus, então a altura dele é que vira
     a espessura do alvo na tela: 21px, fino demais para o dedo. Quem resolve é
     padding vertical, não min-width, que depois do giro vira comprimento. */
  .scroll-cue {
    padding-block: 12px;
  }

  .scroll-cue span {
    font-size: 11px;
  }

  .kicker {
    font-size: 12px;
  }

  .store-detail dt {
    font-size: 10px;
  }

  .store-detail__city {
    font-size: 14px;
  }

  .store-detail dd {
    font-size: clamp(24px, 8vw, 31px);
  }

  .footer-label,
  .mobile-menu__label {
    font-size: 11px;
  }

  .footer-top-link {
    font-size: 11px;
  }

  .offers__note {
    font-size: 12px;
  }

  .site-footer__grid a,
  .site-footer__grid p {
    font-size: 14px;
  }
}

/*
 * 3. RECORTE DE TELA (notch, ilha dinâmica, barra de gestos)
 *
 * Em pé o Safari já empurra a página para baixo da barra de status, mas
 * deitado o recorte entra pela lateral e come o conteúdo. Como todo capítulo
 * usa --page-x como padding lateral, resolver na variável resolve no site
 * inteiro de uma vez.
 *
 * O @supports evita que navegador sem env() caia no valor vazio e perca o
 * padding lateral inteiro.
 */
@supports (padding: env(safe-area-inset-left)) {
  :root {
    --page-x: max(clamp(22px, 5vw, 78px), env(safe-area-inset-left), env(safe-area-inset-right));
  }

  @media (max-width: 760px) {
    :root {
      --page-x: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
    }
  }

  @media (max-width: 1120px) {
    .site-header {
      padding-top: max(12px, env(safe-area-inset-top));
      padding-inline: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
    }

    .mobile-menu {
      padding-top: max(118px, calc(110px + env(safe-area-inset-top)));
      padding-bottom: max(30px, env(safe-area-inset-bottom));
    }
  }

  /* a barra de gestos do iPhone fica por cima do que estiver colado embaixo */
  .site-footer {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   Um capítulo, uma tela (16/09/2026)

   Pedido do cliente: no computador, cada capítulo precisa caber inteiro na
   tela, sem cortar. O site foi desenhado escalando pela LARGURA (todo clamp
   usa vw), então num monitor largo e baixo, como o de notebook, o título
   crescia até 124px enquanto a altura disponível encolhia. Medido antes:
   nenhum capítulo cabia, nem em 1920x1080.

   A correção é medir também pela ALTURA. Onde havia clamp(min, Nvw, max),
   agora há um teto em vh: o que manda passa a ser o menor dos dois, então o
   capítulo se ajusta ao monitor em vez de ao contrário.

   Vale acima de 760px E com mouse (pointer: fine). Celular deitado tem 844px
   de largura: sem a checagem do ponteiro, estas regras encolhiam botão e
   título no aparelho onde já estavam do tamanho certo. E vh no celular briga
   com a barra do Safari.
   ========================================================================== */
@media (min-width: 761px) and (pointer: fine) {
  /*
   * O título é o maior bloco de altura do site: 124px com entrelinha .82 em
   * três linhas dá 305px, quase metade de um notebook. O teto em vh faz ele
   * respeitar a tela; em monitor grande nada muda, porque 11.5vh de 945px
   * ainda dá 108px.
   */
  .chapter-heading h2,
  .stores h2,
  .history h2,
  .jobs h2 {
    font-size: min(clamp(44px, 7.2vw, 124px), 10vh);
  }

  /* O capítulo 3 é o único com título próprio menor, 68px em vez de 124px.
     Entrou aqui separado porque a regra genérica acima o AUMENTARIA. */
  .offers__head h2 {
    font-size: min(clamp(28px, 4.4vw, 68px), 6.2vh);
  }

  /* Capítulo 2: já era adaptativo, só ficou com o piso mais baixo */
  .media-chapter__sticky {
    gap: clamp(14px, 2.6vh, 46px);
    padding: clamp(40px, 8vh, 128px) 0 clamp(32px, 6vh, 104px);
  }

  /* Capítulo 3: o padding era fixo em 110/96 e o gap escalava por vw */
  .offers {
    gap: clamp(5px, 1vh, 44px);
    padding-block: clamp(14px, 3.5vh, 110px) clamp(12px, 2.4vh, 96px);
  }

  .offers__head {
    gap: clamp(5px, .9vh, 14px);
  }

  .offers__head .action {
    margin-top: clamp(4px, .8vh, 10px);
  }

  /* a faixa do Instagram tinha 112px fixos */
  .ig-band {
    min-height: min(112px, 8.5vh);
  }

  .reel-card {
    height: clamp(150px, 26vh, 520px);
  }

  /* Capítulo 4: a coluna das lojas é a mais densa do site, cinco botões mais
     a ficha aberta. Aqui o ganho vem de comprimir os respiros internos. */
  .stores__content {
    padding: clamp(14px, 2.8vh, 130px) clamp(34px, 6vw, 96px);
  }

  /* cinco botões de 72px somam 360px sozinhos */
  .store-selector button {
    min-height: min(72px, 7vh);
  }

  .stores__content .kicker {
    margin-top: 0;
  }

  .stores__content h2 {
    margin-bottom: clamp(12px, 2.2vh, 28px);
  }

  .store-selector {
    margin-top: clamp(10px, 2.4vh, 30px);
  }

  .store-detail {
    padding-bottom: clamp(8px, 1.8vh, 36px);
  }

  /* Capítulo 5: padding de 160/120 e o respiro entre título e linha do tempo */
  .history {
    --hist-topo: clamp(22px, 4.8vh, 160px);
    gap: clamp(12px, 2.2vh, 86px) clamp(40px, 8vw, 130px);
    padding-block: var(--hist-topo) clamp(10px, 1.8vh, 120px);
  }

  .history__intro {
    padding-top: clamp(14px, 2.4vh, 30px);
  }

  .timeline__photo {
    margin-bottom: clamp(14px, 2.6vh, 26px);
  }

  .timeline__unit {
    padding-top: clamp(10px, 1.8vh, 18px);
  }

  .timeline__note {
    padding-top: clamp(10px, 1.8vh, 18px);
  }

  .timeline__step {
    padding-bottom: clamp(14px, 2.6vh, 26px);
  }

  /*
   * Capítulo 6: tinha min-height: 1050px escrito à mão, que sozinho já
   * estourava qualquer notebook, e 205px de padding embaixo.
   */
  /*
   * O último capítulo divide a tela com o rodapé (17/09/2026). Chegando ao fim
   * da página, a última tela mostra o Trabalhe Conosco inteiro e o rodapé
   * inteiro, em vez de meio capítulo cortado em cima do rodapé.
   *
   * A altura do rodapé vem do script.js, que mede e grava em --rodape-altura.
   * Sem JavaScript a variável não existe e vale 0: o capítulo volta a ter uma
   * tela cheia, que é o comportamento de antes, sem quebrar nada.
   *
   * A foto perde o piso de altura e passa a esticar até o tamanho do capítulo;
   * com o piso antigo de 58vh, numa tela de notebook ela sozinha já não caberia
   * no espaço que sobra acima do rodapé.
   */
  .jobs {
    min-height: calc(100svh - var(--rodape-altura, 0px));
    row-gap: clamp(12px, 2.4vh, 60px);
    padding-block: clamp(16px, 3.5vh, 125px);
  }

  /*
   * Só com foto e texto lado a lado. Entre 761px e 1120px o capítulo empilha
   * título, foto e botão, e sem o piso de 560px a foto encolhia até a altura da
   * legenda: virava uma faixa com o rosto cortado.
   */
  @media (min-width: 1121px) {
    .jobs__photo {
      min-height: 0;
    }
  }

  /* os dois respiros de 28px abaixo do título e abaixo da frase valiam, numa
     tela de notebook, mais que a própria frase */
  .jobs__copy {
    padding-bottom: clamp(4px, 1vh, 28px);
  }

  .jobs__action p {
    margin-bottom: clamp(10px, 2vh, 28px);
  }

  /* e o rodapé cede um pouco de respiro nas telas baixas */
  .site-footer {
    padding-top: clamp(24px, 4.5vh, 70px);
  }

  .site-footer__bottom {
    margin-top: clamp(18px, 4vh, 56px);
  }

  /*
   * Altura padrão, todos os capítulos na mesma medida (16/09/2026)
   *
   * Depois que cada capítulo passou a caber numa tela, eles pararam em alturas
   * diferentes: em 1920x945 o capítulo 2 terminava em 611px, o 3 em 818 e o 5
   * em 830, enquanto o 1, o 4 e o 6 ocupavam os 945 inteiros. Descendo a
   * página, uns encaixavam na tela e outros terminavam no meio dela, e a
   * rolagem ficava irregular.
   *
   * Aqui os três curtos ganham a medida dos outros três: uma tela cheia, com o
   * conteúdo centrado na vertical em vez de empilhado no topo.
   *
   * É min-height e não height de propósito. O teto em vh mais acima já impede
   * o capítulo de passar da tela no tamanho de hoje; se o conteúdo crescer um
   * dia, o capítulo cresce junto em vez de cortar, que era o pedido original.
   */
  .media-chapter,
  .offers,
  .history {
    min-height: 100svh;
  }

  /* filho único: sem isso ele centraliza dentro de si e a seção fica oca */
  .media-chapter {
    display: flex;
  }

  .media-chapter__sticky {
    flex: 1 1 auto;
  }

  /* coluna em flex: o respiro que sobra vai metade em cima, metade embaixo */
  .offers {
    justify-content: center;
  }

  /* no grid quem distribui as linhas é align-content, não align-items */
  .history {
    align-content: center;
  }
}

/*
 * Ajuste fino para tela baixa. A largura continua mandando no layout; o que
 * esta faixa faz é tirar altura onde ela é mais cara, e só onde falta.
 * 760px de altura de janela é mais ou menos o que sobra num notebook de
 * 1366x768 ou num 1920x1080 com barra de tarefas e abas.
 */
@media (min-width: 761px) and (max-height: 820px) and (pointer: fine) {
  /* Capítulo 3: a foto da esteira travava em 248px e parava de encolher */
  .marquee__item {
    height: clamp(150px, 26vh, 350px);
  }

  /* Capítulo 5: em coluna estreita a nota de cada marco quebra em seis linhas */
  .timeline__note {
    font-size: 12.5px;
    line-height: 1.4;
  }

  .timeline__unit,
  .timeline__place,
  .timeline__note {
    padding-top: clamp(7px, 1.3vh, 18px);
  }

  /*
   * A foto do marco fica mais panorâmica em vez de menor: 16/10 em lugar de
   * 4/3 tira 23px por cartão e o recorte até combina mais com fachada, que é
   * larga por natureza.
   */
  .timeline__photo {
    aspect-ratio: 16 / 10;
  }

  /* Capítulo 4: a ficha da loja aberta é o bloco mais alto da coluna */
  .store-detail {
    padding-top: 0;
  }

}

/* Ultimo ajuste de altura: os respiros entre rotulo, titulo e lista no
   capitulo 4, que somados valiam mais de 80px numa tela de notebook. */
@media (min-width: 761px) and (max-height: 820px) and (pointer: fine) {
  .stores__content .kicker {
    margin-top: 0;
    margin-bottom: clamp(8px, 1.6vh, 18px);
  }

  .stores__content h2 {
    margin-bottom: clamp(6px, 1.2vh, 28px);
  }

  .store-selector {
    margin-top: clamp(6px, 1.4vh, 30px);
  }
}

@media (min-width: 761px) and (max-height: 820px) and (pointer: fine) {
  .stores__content h2 {
    font-size: min(clamp(44px, 7.2vw, 124px), 8.6vh);
  }

  .store-detail dd {
    font-size: clamp(21px, 3.2vh, 28px);
  }
}