/* ============================================================
   LUNE Collection — reset + tipografia base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Qualquer regra nossa com `display` vence o [hidden] do navegador — e aí
   o elemento "escondido" continua na tela. Isso fecha o buraco de uma vez
   para todos os pontos que alternam visibilidade por `hidden`. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Âncoras e "voltar ao topo" param embaixo do header grudento sem isto. */
  scroll-padding-top: calc(var(--header-total, 96px) + var(--sp-4));
  /* Sem duplo-toque para dar zoom e sem os 300ms de espera que ele custa.
     `pan-x pan-y` ainda deixa rolar nos dois eixos — só o zoom por gesto sai
     (o Safari do iPhone mantém a pinça de propósito, não há como desligar). */
  touch-action: pan-x pan-y;
  /* Reserva a faixa da barra de rolagem sempre. Sem isso, travar o body ao
     abrir um painel some com a barra e a página inteira dá um salto lateral
     de uns 15px. No celular não existe barra ocupando espaço: não muda nada. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--lune-bone);
  color: var(--lune-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: var(--lh-body);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  /* `clip` em vez de `hidden`: corta o estouro lateral do mesmo jeito, mas
     não transforma o body em contêiner de rolagem — é o que mantém o header
     grudento funcionando e o "rolar até a âncora" indo para o lugar certo. */
  overflow-x: hidden;
  overflow-x: clip;
}
html { overflow-x: clip; }

/* Painel aberto: em vez de `overflow:hidden` (que o Safari do iPhone ignora,
   deixando a página rolar por trás), o JS fixa o body e guarda a posição em
   --trava-y. Ver `travarRolagem()` no ui.js. */
body.is-locked {
  position: fixed;
  top: calc(var(--trava-y, 0px) * -1);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: var(--lh-display);
  margin: 0;
  color: var(--lune-midnight);
}
h1 { font-size: var(--fs-h1); letter-spacing: .02em; }
h2 { font-size: var(--fs-h2); letter-spacing: .03em; }
h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: .02em; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

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

img, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

/* Campo com menos de 16px faz o iPhone dar zoom sozinho ao focar — e ele não
   volta ao sair. Como a `viewport` com `user-scalable=no` é ignorada no
   Safari desde o iOS 10, o jeito de impedir isso é o tamanho da letra.
   Vale só onde o dedo é o ponteiro: no desktop a tipografia fica como estava.

   Vale só para campo de digitar. `<select>` fica de fora: no iPhone ele abre
   o seletor de roda, sem zoom nenhum — e os filtros da coleção dependem dos
   12px deles para caber dois por linha na tela estreita.

   São duas regras porque uma só não dá conta. O piso genérico cobre campo sem
   classe e perde de propósito para quem tem classe — é o que preserva os 24px
   do campo de busca. Os campos com classe (todos com 15px cravado) precisam
   ser nomeados um a um, com `!important`, porque a classe deles ganha de
   qualquer seletor de elemento. Campo de digitar novo com fonte abaixo de
   16px tem de entrar nesta lista. */
@media (pointer: coarse) {
  /* `:where()` zera a especificidade do :not — sem ele o seletor viraria
     (0,2,1) e passaria por cima das classes, que é o oposto do pretendido. */
  input:not(:where([type="checkbox"], [type="radio"])),
  textarea { font-size: max(16px, 1em); }

  .field__input,
  .cupom-pop__input,
  .news__input,
  .busca-inline input,
  .cep-box__row input { font-size: 16px !important; }
}

/* Toque responde na hora, sem a espera do duplo-toque. */
a, button, input, select, textarea, label, summary, [role="button"] {
  touch-action: manipulation;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--lune-border);
  margin: var(--sp-7) 0;
}

::selection { background: rgba(var(--rgb-gold), .28); }

/* Foco sempre visível para teclado */
:focus-visible {
  outline: 2px solid var(--lune-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 200;
  background: var(--lune-midnight); color: var(--lune-bone);
  padding: var(--sp-3) var(--sp-5);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-soft);
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------ utilitários de layout -- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 720px; }

.section { padding-block: var(--sp-8); }
@media (min-width: 768px) { .section { padding-block: var(--sp-9); } }
.section--cream { background: var(--lune-cream); }
.section--midnight { background: var(--lune-midnight); color: var(--lune-bone); }
.section--midnight h1, .section--midnight h2, .section--midnight h3 { color: var(--lune-bone); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.section-head--center { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

.eyebrow {
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lune-gold-text);   /* fundo claro → tom que passa em AA */
  margin: 0 0 var(--sp-3);
}
/* Sobre fundo escuro o champanhe original tem 7,4:1 — pode brilhar. */
.section--midnight .eyebrow,
.hero .eyebrow,
.banner .eyebrow { color: var(--lune-gold); }
.lead { color: var(--lune-slate); max-width: 56ch; }
.section--midnight .lead { color: var(--lune-moonlight); }

.stack > * + * { margin-top: var(--sp-4); }

/* ------------------------------------------------------------ revelação -- */
/* Estado inicial fica no CSS crítico das páginas para não piscar. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal--left  { transform: translateX(-24px); }
.reveal--right { transform: translateX(24px); }
.reveal--card  { transform: translateY(20px); transition-duration: var(--dur-slow); }

/* Rede de segurança: se o ui.js não subir, nada pode ficar invisível. */
.sem-js .reveal { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------ menos movimento -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}