/* ═══════════════════════════════════════════════════════════════════════
   Santa Lolla Foz — Verão 27
   Direção: editorial noturno. Fundo preto-quente puxado pra terracota das
   fotos; verde neon é o letreiro das lojas — sinal, nunca enfeite.
   Display condensada alta (irmã da logo) + monoespaçada pro dado técnico.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --tinta:       #0C0908;
  --tinta-2:     #17110C;
  --creme:       #F4EDE4;
  --creme-fraco: #B3A493;
  --terra:       #B4532A;
  --ouro:        #E3C04A;
  --neon:        #30FF00;
  --rubro:       #FF4438;   /* fechado agora */

  --display: 'Big Shoulders Display', 'Oswald', 'Arial Narrow', sans-serif;
  --mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --rapida: 180ms;
  --saida:  cubic-bezier(.16, 1, .3, 1);

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --secao:  clamp(5rem, 12vh, 10rem);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Corta o excesso horizontal na raiz. `clip` (e não `hidden`) porque
     `hidden` transformaria a raiz em container de rolagem e quebraria
     tanto o position:sticky quanto as medições do ScrollObserver. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--creme);
  font-family: var(--mono);
  font-size: clamp(.875rem, .82rem + .25vw, 1rem);
  line-height: 1.6;
  /* `clip` corta o excesso horizontal SEM virar container de rolagem —
     ao contrário de `hidden`, que quebraria position:sticky e as medições
     do ScrollObserver. As sobras vêm dos elementos com scale nas fachadas
     e nos números das lojas. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, video, picture { display: block; max-width: 100%; }
a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pular {
  position: absolute; top: -100%; left: var(--gutter); z-index: 100;
  background: var(--neon); color: #000; padding: .75rem 1.25rem; text-decoration: none;
}
.pular:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

.dim { color: var(--creme-fraco); }

.kicker {
  font-size: .6875rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--neon); margin: 0 0 1rem;
}

/* Estados iniciais das animações. Só existem quando o JS assume o comando —
   sem JS a página aparece inteira, parada e legível. */
.js [data-frase],
.js [data-partir] .pedaco { opacity: 0; }
.js [data-cortina] img { clip-path: inset(0 0 100% 0); }

/* ═══ 1 · HERO — só o filme ══════════════════════════════════════════
   Sem logo, sem título por cima: o vídeo é a peça. O palco fica preso
   enquanto o scroll aproxima e escurece a imagem.                      */

.hero { position: relative; height: 100svh; }
/* Antes o hero tinha 200vh: sobrava uma tela INTEIRA de rolagem só pra
   soltar o vídeo, e dava sensação de travamento. Com 155vh sobra ~0,55 de
   tela — o vídeo respira e sai numa rolada. O mesmo valor nas duas telas
   mantém a sensação igual no celular e no desktop. */
.js .hero { height: 155vh; }

.hero__palco {
  position: sticky; top: 0;
  height: 100svh;
  /* A tarja ocupa a primeira linha e a chamada a última; o meio fica vazio
     de propósito, para o filme respirar. Antes só havia um filho em fluxo
     e ele caía no topo — era o "role" grudado lá em cima. */
  display: grid; grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: var(--tinta);
}

.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: center 45%;
  will-change: transform;
}

.hero__veu {
  opacity: .55;
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(12,9,8,.34) 0%, transparent 32%, rgba(12,9,8,.86) 100%);
  will-change: opacity;
}

/* ── Tarja do topo ───────────────────────────────────────────────────── */

.tarja {
  position: relative; z-index: 3;
  grid-row: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: clamp(.9rem, 2.5vh, 1.4rem) var(--gutter);
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
}
.tarja::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(12,9,8,.7), transparent);
  pointer-events: none;
}
.tarja__col { color: var(--creme); }

.tarja__col--fim { color: var(--creme-fraco); }

/* ── Rodapé do hero: o que é + o que fazer ─────────────────────────────
   "Role" não informa nem convida. Aqui vai uma linha de contexto, uma ação
   principal com área de toque de verdade, e um atalho para quem só quer o
   endereço. */

.entrada {
  position: relative; z-index: 3;
  grid-row: 3;
  display: grid; justify-items: center; gap: .85rem;
  padding: 0 var(--gutter) clamp(1.5rem, 4.5vh, 3rem);
  text-align: center;
}

.entrada__linha {
  margin: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.05rem, .95rem + .7vw, 1.6rem);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--creme);
  text-shadow: 0 1px 20px rgba(12,9,8,.9);
}

.entrada__acao {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 3rem;                       /* alvo de toque confortável */
  padding: .85rem 1.6rem;
  background: var(--neon); color: #041000;
  font-family: var(--mono); font-weight: 500;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: background var(--rapida), transform var(--rapida), box-shadow var(--rapida);
}
.entrada__acao svg { animation: cutuca 2.2s var(--saida) infinite; }
.entrada__acao:hover, .entrada__acao:focus-visible {
  background: #52ff2b; transform: translateY(-2px);
  box-shadow: 0 0 26px rgba(48,255,0,.4);
}
.entrada__acao:active { transform: translateY(0); }

@keyframes cutuca {
  0%, 62%, 100% { transform: translateY(0); }
  76%           { transform: translateY(4px); }
}

.entrada__atalho {
  min-height: 2.75rem;
  display: inline-flex; align-items: center;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--creme-fraco);
  text-decoration-color: rgba(244,237,228,.3); text-underline-offset: .35em;
  transition: color var(--rapida);
}
.entrada__atalho:hover, .entrada__atalho:focus-visible { color: var(--neon); }

/* ═══ 3 · COLEÇÃO ════════════════════════════════════════════════════ */

.colecao { position: relative; }
.js .colecao { height: 380vh; }

.colecao__palco { padding: var(--secao) 0; }
.js .colecao__palco {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  /* A faixa tem width:max-content (3200px). Sem travar a coluna, ela
     esticava a grade inteira e o texto do cabeçalho parava de quebrar,
     vazando pela direita no celular. minmax(0,1fr) prende a coluna
     à largura da tela e deixa só a faixa transbordar. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: clamp(1.5rem, 4vh, 3rem) 0;
  overflow: hidden;
}

.colecao__cabeca { padding-inline: var(--gutter); }
.colecao__titulo {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.5rem, 1.5rem + 6vw, 6rem);
  line-height: .9; text-transform: uppercase;
  margin: 0 0 .75rem;
}
.colecao__spoiler {
  max-width: 34rem;
  margin: 0 0 clamp(1rem, 3vh, 2rem);
  color: var(--creme-fraco);
  font-size: clamp(.875rem, .82rem + .3vw, 1.0625rem);
}
.colecao__spoiler strong { color: var(--creme); font-weight: 500; }

.faixa {
  display: flex; align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  list-style: none; margin: 0;
  padding-inline: var(--gutter);
  width: max-content;
  will-change: transform;
}
html:not(.js) .faixa { width: auto; overflow-x: auto; }

.faixa__item { flex: none; width: clamp(11rem, 26vw, 20rem); }
.faixa__item img {
  width: 100%; height: auto;
  aspect-ratio: 2 / 3; object-fit: cover;
  will-change: transform;
}

.colecao__pe {
  display: grid; gap: .75rem;
  padding-inline: var(--gutter);
  margin-top: clamp(1rem, 3vh, 2rem);
}
.colecao__nota {
  margin: 0;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--creme-fraco);
}
.progresso { height: 1px; background: rgba(244,237,228,.16); }
.progresso__barra {
  display: block; height: 100%; width: 100%;
  background: var(--neon);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

/* ═══ 4 · LOJAS ══════════════════════════════════════════════════════ */

.lojas { padding-bottom: var(--secao); }

.lojas__abre {
  padding: var(--secao) var(--gutter) clamp(2rem, 6vh, 4rem);
  max-width: 84rem; margin-inline: auto;
}
.lojas__titulo {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.25rem, 1.4rem + 5vw, 5.5rem);
  line-height: .9; text-transform: uppercase; margin: 0;
}

.loja {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 0 var(--gutter) var(--secao);
  max-width: 84rem; margin-inline: auto;
}

.loja__foto {
  position: relative; overflow: hidden;
  background: var(--tinta-2);
  aspect-ratio: 4 / 5;
}
.loja__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  scale: 1.14;                 /* sobra pro parallax não mostrar borda */
  will-change: transform, clip-path;
}

.loja__num {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(3.5rem, 2rem + 6vw, 7rem);
  line-height: .8; margin: 0 0 .5rem;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--terra);
  letter-spacing: .02em;
  will-change: transform, opacity;
}

.loja__nome {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
  line-height: .94; text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.pedaco { display: inline-block; white-space: pre; will-change: transform, opacity; }

.selo {
  display: inline-block;
  font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta); background: var(--ouro);
  padding: .4rem .75rem; margin: 0 0 1rem;
}

.status {
  display: flex; align-items: center; gap: .5rem;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 1.25rem; color: var(--creme-fraco);
}
.status__ponto {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--creme-fraco); flex: none;
}
.status[data-aberto="sim"] { color: var(--neon); }
.status[data-aberto="sim"] .status__ponto {
  background: var(--neon);
  box-shadow: 0 0 0 0 rgba(48,255,0,.55);
  animation: pulsoVerde 2.2s ease-out infinite;
}
.status[data-aberto="nao"] { color: var(--rubro); }
.status[data-aberto="nao"] .status__ponto {
  background: var(--rubro);
  box-shadow: 0 0 0 0 rgba(255,68,56,.55);
  animation: pulsoRubro 2.6s ease-out infinite;
}
@keyframes pulsoVerde { to { box-shadow: 0 0 0 .7rem rgba(48,255,0,0); } }
@keyframes pulsoRubro { to { box-shadow: 0 0 0 .7rem rgba(255,68,56,0); } }

.loja__end { font-style: normal; margin: 0 0 1.5rem; line-height: 1.7; }

.horario {
  margin: 0 0 2rem; max-width: 22rem;
  border-top: 1px solid rgba(244,237,228,.12);
}
.horario > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(244,237,228,.12);
  font-size: .8125rem;
}
.horario dt { color: var(--creme-fraco); margin: 0; }
.horario dd { margin: 0; font-variant-numeric: tabular-nums; }
.horario--off dd { color: var(--creme-fraco); }
.horario--on dd { color: var(--ouro); }

.acoes { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn {
  display: inline-flex; align-items: center;
  padding: .9rem 1.5rem;
  font-family: var(--mono);
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent;
  transition: background var(--rapida), color var(--rapida),
              border-color var(--rapida), transform var(--rapida),
              box-shadow var(--rapida);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--zap { background: var(--neon); color: #041000; font-weight: 500; }
.btn--zap:hover, .btn--zap:focus-visible { background: #52ff2b; box-shadow: 0 0 24px rgba(48,255,0,.35); }
.btn--mapa { border-color: rgba(244,237,228,.3); color: var(--creme); }
.btn--mapa:hover, .btn--mapa:focus-visible { border-color: var(--creme); background: rgba(244,237,228,.06); }

@media (min-width: 800px) {
  .loja { grid-template-columns: 1fr 1fr; align-items: start; }
  .loja:nth-of-type(even) .loja__col-foto { order: 2; }
  /* A foto acompanha a leitura da coluna de texto em vez de subir sozinha */
  .loja__col-foto { position: sticky; top: 12vh; }
  .loja__info { padding-block: clamp(2rem, 8vh, 6rem); }
}

/* ═══ 5 · FECHAMENTO ═════════════════════════════════════════════════ */

.fecha {
  padding: var(--secao) var(--gutter);
  max-width: 84rem; margin-inline: auto;
  border-top: 1px solid rgba(244,237,228,.14);
}
.fecha__titulo {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.75rem, 1.5rem + 8vw, 8rem);
  line-height: .88; text-transform: uppercase;
  margin: 0 0 clamp(2rem, 6vh, 4rem);
}

.atalhos { list-style: none; margin: 0; padding: 0; }
.atalho { border-top: 1px solid rgba(244,237,228,.14); }
.atalho:last-child { border-bottom: 1px solid rgba(244,237,228,.14); }

.atalho a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.1rem, 3vh, 2rem) 0;
  text-decoration: none;
  transition: padding var(--rapida) var(--saida), color var(--rapida);
}
.atalho a:hover, .atalho a:focus-visible { padding-inline: clamp(.5rem, 2vw, 1.5rem); color: var(--neon); }

.atalho__n {
  font-family: var(--mono); font-size: .75rem;
  color: var(--terra); letter-spacing: .1em;
}
.atalho__nome {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.35rem, 1rem + 2.5vw, 3rem);
  line-height: 1; text-transform: uppercase;
}
.atalho__zap {
  font-size: .75rem; letter-spacing: .1em;
  color: var(--creme-fraco); white-space: nowrap;
}
.atalho a:hover .atalho__zap, .atalho a:focus-visible .atalho__zap { color: var(--neon); }


/* ═══ 5b · CATÁLOGO EMBUTIDO ═════════════════════════════════════════ */

.catalogo {
  padding: var(--secao) var(--gutter);
  max-width: 84rem; margin-inline: auto;
  border-top: 1px solid rgba(244,237,228,.14);
}
.catalogo__cabeca { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.catalogo__titulo {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.25rem, 1.4rem + 5vw, 5.5rem);
  line-height: .9; text-transform: uppercase; margin: 0 0 .75rem;
}
.catalogo__nota {
  max-width: 38rem; margin: 0; color: var(--creme-fraco);
  font-size: clamp(.875rem, .82rem + .3vw, 1.0625rem);
}
.catalogo__nota strong { color: var(--creme); font-weight: 500; }

/* Altura fixa em vez de proporção: o leitor da FlipHTML5 se adapta sozinho
   ao espaço que recebe, então o que importa é dar ESPAÇO. Proporção fixa
   deixava a revista pequena no meio de uma faixa cinza. */
.catalogo__moldura {
  position: relative;
  background: #525252;                 /* mesmo cinza do leitor, sem flash */
  border: 1px solid rgba(244,237,228,.14);
  overflow: hidden;
  /* No celular o leitor encaixa a página pela LARGURA — altura sobrando vira
     faixa cinza vazia. No desktop encaixa pela ALTURA, então quanto mais
     espaço, maior a revista. Daí os dois valores. */
  height: clamp(22rem, 64svh, 40rem);
}
@media (min-width: 700px) {
  .catalogo__moldura { height: clamp(30rem, 84svh, 58rem); }
}

.catalogo__moldura iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.catalogo__espera {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  color: var(--creme-fraco);
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
}
.catalogo__espera p { margin: 0; }
.catalogo__girando {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 2px solid rgba(244,237,228,.2);
  border-top-color: var(--neon);
  animation: girando 900ms linear infinite;
}
@keyframes girando { to { transform: rotate(1turn); } }

.catalogo__saida {
  margin: 1rem 0 0;
  font-size: .75rem; letter-spacing: .1em;
  color: var(--creme-fraco);
}
.catalogo__saida a {
  color: var(--creme);
  text-decoration-color: rgba(244,237,228,.35); text-underline-offset: .3em;
  transition: color var(--rapida);
}
.catalogo__saida a:hover, .catalogo__saida a:focus-visible { color: var(--neon); }

/* ═══ 6 · INSTAGRAM ══════════════════════════════════════════════════ */

.insta {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  border-top: 1px solid rgba(244,237,228,.14);
}

.insta__fundo {
  position: absolute; inset: 0; z-index: 0;
  display: grid; align-content: center; gap: clamp(.5rem, 1.5vw, 1rem);
  opacity: .3;
  /* Escurece as bordas pra faixa não competir com o texto no centro */
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}
.insta__linha {
  display: flex; gap: clamp(.5rem, 1.5vw, 1rem);
  width: max-content;
  will-change: transform;
}
.insta__linha img {
  width: clamp(7rem, 16vw, 12rem);
  aspect-ratio: 2 / 3; object-fit: cover;
  flex: none;
}

.insta__frente {
  position: relative; z-index: 1;
  max-width: 42rem; margin-inline: auto;
  text-align: center;
}
.insta__titulo {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.25rem, 1.2rem + 6vw, 5.5rem);
  line-height: .92; text-transform: lowercase;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
  text-shadow: 0 2px 30px rgba(12,9,8,.9);
}
.insta__texto {
  margin: 0 0 2rem;
  color: var(--creme-fraco);
  font-size: clamp(.9375rem, .88rem + .3vw, 1.125rem);
  text-shadow: 0 1px 14px rgba(12,9,8,.9);
}
.insta__texto strong { color: var(--creme); font-weight: 500; }

.insta__botao {
  display: inline-flex; align-items: center; gap: .7rem;
  min-height: 3.25rem;
  padding: .95rem 1.8rem;
  background: var(--neon); color: #041000;
  font-family: var(--mono); font-weight: 500;
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: background var(--rapida), transform var(--rapida), box-shadow var(--rapida);
}
.insta__botao:hover, .insta__botao:focus-visible {
  background: #52ff2b; transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(48,255,0,.45);
}
.insta__botao:active { transform: translateY(0); }

/* ═══ 7 · RODAPÉ ═════════════════════════════════════════════════════ */

.rodape {
  border-top: 1px solid rgba(244,237,228,.14);
  background: var(--tinta-2);
  padding: clamp(3rem, 9vh, 5rem) var(--gutter) clamp(1.75rem, 4vh, 2.5rem);
  display: grid; gap: clamp(1.75rem, 5vh, 2.75rem); justify-items: center;
  text-align: center;
}
.rodape__marca {
  width: min(56vw, 15rem); height: auto;
  filter: drop-shadow(0 0 14px rgba(48,255,0,.28));
}
.rodape__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; }
.rodape__links a {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration-color: rgba(244,237,228,.3); text-underline-offset: .35em;
  transition: color var(--rapida);
}
.rodape__links a:hover, .rodape__links a:focus-visible { color: var(--neon); }
.rodape__pe {
  margin: 0; width: 100%;
  border-top: 1px solid rgba(244,237,228,.12);
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--creme-fraco);
}

/* ═══ MOVIMENTO REDUZIDO ═════════════════════════════════════════════
   Quem pede menos movimento recebe a página inteira, parada e legível.
   O JS também checa isso e nem registra os observadores de scroll.     */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-frase], .js [data-partir] .pedaco { opacity: 1 !important; }
  .js [data-cortina] img { clip-path: none !important; }
  .js .hero { height: 100svh; }
  .catalogo__girando { animation: none; }
  .entrada__acao svg { animation: none; }
  .insta__fundo { opacity: .22; }
  .js .colecao { height: auto; }
  .js .colecao__palco { position: static; height: auto; }
  .faixa { width: auto; overflow-x: auto; }
  .loja__foto img { scale: 1; }
  .loja__col-foto { position: static; }
}