/* ============================================================
   MGT Joias — Landing de tráfego

   Identidade (cor, fonte, conteúdo): MGT, a partir do feed
   @mgtjoiasatacado.
   Sistema (escala de espaço, escala de caixa alta, tracking,
   recuos, breakpoints): medido no tema da Sawara (fork do
   Prestige), em referencia/sawara.com.br/assets/*_theme.css.
   Composição: mockups layout/v4-a-whatsapp.png e v4-b-grupo.png,
   sem "O que fazemos" e com a galeria logo depois do botão.
   ============================================================ */

:root {
  /* ---- O botão de espaçamento ----------------------------------
     Multiplica a escala inteira. 1 = medidas exatas da Sawara.
     Subir abre a página toda mantendo as proporções. */
  --rhythm: 1;

  /* ---- Escala de espaço (px medidos no tema da Sawara) --------
     Cada degrau corresponde a um uso real no tema deles:
     10  espaço entre fotos da grade, celular
     16  título -> descrição, celular
     24  título -> descrição, desktop · recuo lateral, celular
     30  cabeçalho -> botão, desktop
     40  cabeçalho -> conteúdo, celular
     50  recuo lateral 641px+
     70  cabeçalho -> conteúdo, desktop
     80  recuo lateral 1140px+
     90  seção "grande", celular
     120 seção "grande", desktop
     145 seção "extra grande", desktop (o fechamento usava; ver .closing) */
  --s-10: calc(10px * var(--rhythm));
  --s-16: calc(16px * var(--rhythm));
  --s-24: calc(24px * var(--rhythm));
  --s-30: calc(30px * var(--rhythm));
  --s-40: calc(40px * var(--rhythm));
  --s-50: calc(50px * var(--rhythm));
  --s-70: calc(70px * var(--rhythm));
  --s-80: calc(80px * var(--rhythm));
  --s-90: calc(90px * var(--rhythm));
  --s-120: calc(120px * var(--rhythm));
  --s-145: calc(145px * var(--rhythm));

  /* ---- Papéis de espaço (o CSS abaixo só usa estes) ------------ */
  --gutter: 24px;                  /* recuo lateral: não escala com o ritmo */
  --section: var(--s-90);          /* respiro vertical das faixas */
  --section-xl: var(--s-70);       /* faixa de fechamento (ver .closing) */
  --gap-label: 12px;               /* eyebrow -> título: uma unidade só */
  --gap-desc: var(--s-16);         /* título -> texto */
  --gap-cta: var(--s-30);          /* texto -> botão */
  --gap-group: var(--s-40);        /* entre grupos dentro da faixa */
  --gap-item: var(--s-24);         /* entre itens de uma lista */
  --gap-grid: var(--s-10);         /* entre fotos */
  --sticky-h: 56px;                /* altura da barra fixa e do botão flutuante */

  /* ---- Escala de caixa alta (degraus u-h8..u-h5 da Sawara) ----
     Na Sawara a hierarquia vem só do tamanho: o tracking é o
     mesmo em toda caixa alta. */
  --caps-10: 10px;   /* assinatura */
  --caps-11: 11px;   /* eyebrow, fios */
  --caps-12: 12px;   /* botões e barra fixa: o CTA fica no maior degrau */
  --track: 0.2em;

  --text: 14px;      /* corpo, igual ao default do tema deles */
  --text-sm: 13px;

  /* ---- Identidade MGT ----------------------------------------- */
  --cream: #f5efe6;
  --offwhite: #fbf8f3;
  --brown: #3b2c24;
  --brown-deep: #2a1e18;
  --gold: #c6a15b;
  --gold-deep: #a97f3d;
  --gold-light: #d4b273;   /* hover do botão de ouro */

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* breakpoints da Sawara: 641 e 1140 */
@media (min-width: 641px) {
  :root {
    --gutter: 50px;
    --section: var(--s-120);
    --section-xl: var(--s-80);
    --gap-desc: var(--s-24);
    --gap-cta: var(--s-40);
    --gap-group: var(--s-70);
    --gap-item: var(--s-30);
    --gap-grid: var(--s-24);
  }
}

@media (min-width: 1140px) {
  :root { --gutter: 80px; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--sans);
  font-size: var(--text);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- Caixa alta: um só estilo, varia o tamanho ------------------
   text-indent igual ao tracking: sem ele o espaço depois da última
   letra desloca o texto centralizado para a esquerda. */
.eyebrow,
.rules li,
.btn,
.sticky,
.closing__handle,
.lockup__tag {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: var(--track);
  text-indent: var(--track);
  text-transform: uppercase;
  line-height: 1.6;
}

/* ---- Faixas ------------------------------------------------------ */

.band {
  padding: var(--section) var(--gutter);
  text-align: center;
}

.band > * { margin-inline: auto; }

.band--cream { background: var(--cream); }
.band--offwhite { background: var(--offwhite); }

/* faixa de foto que sangra de ponta a ponta */
.bleed { margin: 0; }
.bleed img {
  width: 100%;
  height: clamp(200px, 36vw, 420px);
  object-fit: cover;
}

/* ---- Tipografia -------------------------------------------------- */

.eyebrow {
  margin: 0 0 var(--gap-label);
  font-size: var(--caps-11);
  color: var(--gold);
}

/* margin: 0 auto, não 0: esta regra vem depois de `.band > *` e,
   com a mesma especificidade, anulava a centralização do bloco.
   Com max-width menor que a coluna, o título ficava à esquerda. */
.display {
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--brown);
  /* evita palavra órfã na última linha (ex.: "devolve.") */
  text-wrap: balance;
}

/* A quebra depois da vírgula é fixa no HTML (<br>), como no mockup.
   24px em 375px é o maior tamanho em que "Folheado em ouro e
   prata 925," ainda cabe numa linha. */
h1.display {
  font-size: clamp(22px, 6.4vw, 38px);
}

h2.display {
  max-width: 22ch;
  font-size: clamp(22px, 5.9vw, 30px);
}

/* largura de descrição da Sawara (SectionHeader__Description): 530px */
.lede {
  margin: var(--gap-desc) auto 0;
  max-width: min(34ch, 530px);
  font-size: var(--text);
  line-height: 1.75;
  color: color-mix(in srgb, var(--brown) 72%, transparent);
}

/* ---- Botões ------------------------------------------------------ */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: var(--gap-cta);
  /* laterais de 44px, um pouco além da variante "stretched" da Sawara:
     o CTA é a peça que mais precisa aparecer */
  padding: 17px 44px;
  border: 1px solid var(--gold);
  background: var(--brown);
  color: var(--cream);
  font-size: var(--caps-12);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.btn:hover,
.btn:focus-visible { background: var(--brown-deep); }

/* na faixa marrom do fechamento o botão inverte: ouro cheio e texto
   café. O contorno vazado de antes sumia sobre o marrom. */
.btn--gold {
  --sheen: rgba(255, 255, 255, 0.45);
  background: var(--gold);
  color: var(--brown-deep);
}

.btn--gold:hover,
.btn--gold:focus-visible { background: var(--gold-light); border-color: var(--gold-light); }

/* o glifo é o que diz "WhatsApp" sem o verde: 18px para ser lido */
.btn svg,
.sticky svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: none;
}

/* Brilho que atravessa os botões de tempos em tempos, como luz numa
   joia: o movimento chama o olho sem cor gritante. Fica atrás do texto
   (z-index -1 dentro do próprio botão) e some com prefers-reduced-motion. */
.btn::after,
.sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, var(--sheen, rgba(255, 236, 200, 0.28)) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: brilho 6s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes brilho {
  0% { transform: translateX(-100%); }
  22%, 100% { transform: translateX(100%); }
}

/* ---- Fios -------------------------------------------------------- */

.rules {
  margin: var(--gap-group) auto 0;
  padding: 0;
  list-style: none;
}

.rules li { font-size: var(--caps-11); }

.rules li + li { margin-top: var(--gap-item); }

/* traço dourado curto entre os itens, como no mockup */
.rules li + li::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto var(--gap-item);
  background: color-mix(in srgb, var(--gold) 60%, transparent);
}

.rules--gold li { color: var(--gold-deep); }

/* frase curta embaixo do rótulo, na seção do banho: volta para caixa
   baixa e corpo de texto, senão herda o tracking da caixa alta */
.rules p {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--brown) 68%, transparent);
}

/* título seguido direto de fios, sem eyebrow nem texto */
.display + .rules { margin-top: var(--gap-group); }

/* ---- Lockup da marca ----------------------------------------------
   SVG + texto porque o arquivo da logo tem 150x150 px e o
   "Joias Personalizadas" fica ilegível. Trocar por <img> quando
   chegar o vetor da MGT. */

.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--gold);
  line-height: 1;
}

.lockup__gem {
  width: 2.3em;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.lockup__name {
  margin-top: 0.5em;
  font-family: var(--serif);
  font-size: 1.65em;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
}

.lockup__tag {
  margin-top: 0.75em;
  font-size: max(0.5em, 8.5px);
  line-height: 1;
}

/* ---- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--cream);
}

.hero__photo {
  width: 100%;
  height: clamp(290px, 40vh, 480px);
  object-fit: cover;
  /* foto retrato numa caixa paisagem: a largura manda e só o eixo Y
     corta; 45% mantém pescoço, clavícula e pingente no quadro */
  object-position: 50% 45%;
}

/* sem véu escuro: o mockup mantém o topo claro e quente */
.hero__lockup {
  position: absolute;
  top: clamp(18px, 3.6vw, 32px);
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(12px, 2.9vw, 15px);
  color: var(--gold-deep);
  text-shadow: 0 1px 10px rgba(253, 250, 245, 0.75);
}

.hero__lockup .lockup__gem {
  filter: drop-shadow(0 1px 8px rgba(253, 250, 245, 0.8));
}

/* ---- Galeria ------------------------------------------------------
   Vem logo depois do botão da abertura: quem chega do anúncio lê,
   vê as peças e decide.
   Como no mockup: a foto do meio é a mais alta e as laterais são
   menores e simétricas. Com align-items:center o pico fica no meio
   da faixa, o que conversa com o texto centralizado. */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  align-items: center;
  gap: var(--gap-grid);
  /* sem respiro em cima: a faixa da abertura já termina com o dela */
  padding: 0 var(--gutter) var(--section);
  background: var(--cream);
}

.gallery figure { margin: 0; }

.gallery img {
  width: 100%;
  object-fit: cover;
}

.gallery figure:nth-child(1) img { aspect-ratio: 3 / 3.7; }
.gallery figure:nth-child(2) img { aspect-ratio: 3 / 4.5; }
.gallery figure:nth-child(3) img { aspect-ratio: 3 / 3.7; }

/* No celular as três lado a lado ficavam com 98 a 110px de largura:
   miniatura, não se vê a peça. Até 640px a do meio vira a foto grande
   do topo e as outras duas dividem a linha de baixo. */
@media (max-width: 640px) {
  .gallery {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .gallery figure:nth-child(2) {
    grid-column: 1 / -1;
    order: -1;
  }

  .gallery figure:nth-child(1) img,
  .gallery figure:nth-child(2) img,
  .gallery figure:nth-child(3) img { aspect-ratio: 4 / 5; }
}

/* ---- Fechamento --------------------------------------------------
   Respiro de 70px no celular e 80px a partir de 641px, não os 90/145
   da Sawara: a faixa marrom estava alta demais para título, botão e
   assinatura e ficou 20% mais baixa (pedido do Lucas). Sem reserva
   para a barra fixa: ela some quando o botão daqui aparece, e os 70px
   de baixo já são mais altos que ela (56px). */

.closing {
  padding: var(--section-xl) var(--gutter);
  background: var(--brown);
  color: var(--cream);
  text-align: center;
}

.closing .display {
  margin-inline: auto;
  color: var(--cream);
}

/* display:flex + width:max-content tira o lockup do fluxo inline;
   sem isso ele fica ao lado do botão em vez de embaixo */
.closing__mark {
  display: flex;
  width: max-content;
  margin: var(--gap-group) auto 0;
  font-size: 12px;
}

.closing__mark .lockup__name { font-size: 1.5em; }

.closing__handle {
  margin: var(--s-16) 0 0;
  font-size: var(--caps-10);
  color: color-mix(in srgb, var(--gold) 85%, transparent);
}

/* ---- Barra fixa -------------------------------------------------- */

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  padding: 0 var(--gutter) env(safe-area-inset-bottom, 0px);
  border-top: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  background: var(--brown-deep);
  color: var(--cream);
  font-size: var(--caps-12);
  text-decoration: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* script.js tira a barra enquanto outro botão de CTA está na tela:
   na primeira tela o botão e a barra, com o mesmo texto, ficavam
   empilhados. visibility só muda no fim, para o sumiço animar. */
.sticky--off {
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

/* respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ================================================================
   DESKTOP (1008px+, breakpoint da Sawara)

   A primeira versão só foi desenhada e conferida em 375px. No
   notebook, a coluna de celular esticada virava uma faixa de pele
   de 1351x307 e um campo de creme vazio. Aqui a composição muda:
   - introdução em duas colunas: foto | marca + texto + botão,
     tudo na primeira tela;
   - banho em duas colunas, com a foto do lado oposto;
   - fios da introdução viram linha;
   - a galeria ganha respiro em cima;
   - a barra fixa vira botão flutuante no canto.
   Abaixo de 1008px nada muda.
   ================================================================ */

@media (min-width: 1008px) {
  /* ---- Introdução -------------------------------------------------- */

  .intro {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: clamp(640px, 100vh, 920px);
  }

  /* hero vira static: foto e lockup passam a se posicionar pela
     .intro inteira. A foto preenche a metade esquerda e o lockup
     pousa sobre a coluna de texto, em creme, sem precisar de halo. */
  .hero { position: static; }

  .hero__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    /* retrato na metade esquerda: praticamente a foto inteira aparece */
    object-position: 50% 50%;
  }

  .hero__lockup {
    top: clamp(40px, 7vh, 64px);
    left: 75%;
    font-size: 15px;
    text-shadow: none;
  }

  .hero__lockup .lockup__gem { filter: none; }

  /* o topo reserva o espaço do lockup; o resto centraliza */
  .intro__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 180px clamp(48px, 5vw, 96px) var(--s-90);
  }

  /* fios em linha, com fio vertical entre eles.
     1ª tentativa (flex com wrap): o 3º item caía sozinho para a linha
     de baixo levando o fio junto. 2ª (grid de colunas iguais): cada
     coluna ficou com 152px e até "Folheado em ouro" quebrava, deixando
     "ouro" órfão. Agora os dois itens curtos nunca quebram; só o longo
     encolhe e quebra dentro do próprio espaço, se faltar largura. */
  .intro__text .rules {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 560px;
  }

  .intro__text .rules li {
    position: relative;
    flex: 0 0 auto;
    padding: 0 14px;
    white-space: nowrap;
  }

  /* O item longo fica sempre em duas linhas no desktop, quebrando no
     ponto certo: cada metade é um <span> que vira bloco aqui. Com
     text-wrap: balance a quebra saía certa, mas a caixa do item não
     encolhia junto e sobrava ~56px de vão depois do fio vertical. */
  .intro__text .rules li:last-child span { display: block; }

  .intro__text .rules li + li { margin-top: 0; }

  .intro__text .rules li + li::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 30px;
    margin: 0;
    transform: translateY(-50%);
  }

  /* ---- Banho: duas colunas, foto à direita --------------------------- */

  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
  }

  /* a figura estica com a linha do grid; a imagem preenche por absolute
     (altura em % de item esticado não é confiável em todo navegador) */
  .split .bleed { position: relative; }

  .split .bleed img {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .split--reverse .bleed { order: 2; }

  .split .band {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ---- Galeria ------------------------------------------------------------ */

  /* aqui a abertura termina na borda da foto, sem faixa de creme
     embaixo: a galeria traz o próprio respiro */
  .gallery {
    max-width: 1180px;
    margin-inline: auto;
    padding-top: var(--section);
  }

  /* ---- Barra fixa vira botão flutuante ------------------------------------ */

  .sticky {
    left: auto;
    right: 32px;
    bottom: 32px;
    min-height: var(--sticky-h);
    padding: 0 32px;
    border: 1px solid var(--gold);
    box-shadow: 0 12px 32px rgba(42, 30, 24, 0.22);
  }

  /* no canto, o botão só desce um pouco enquanto some */
  .sticky--off { transform: translateY(16px); }
}

/* ================================================================
   CELULAR E TABLET (até 1007px): a marca sai de cima da foto

   Com o mostruário real da MGT no topo, o lockup pousava sobre as
   duas primeiras fileiras de anéis: cobria produto e ficava ilegível,
   dourado sobre dourado. Até 1007px ele sobe para uma faixa própria
   acima da foto. No desktop ele já fica na coluna de texto.
   ================================================================ */

@media (max-width: 1007px) {
  .hero {
    display: flex;
    flex-direction: column;
  }

  .hero__lockup {
    order: -1;
    position: static;
    transform: none;
    align-self: center;
    padding: 18px 0 16px;
    font-size: 11px;
    color: var(--gold-deep);
    text-shadow: none;
  }

  .hero__lockup .lockup__gem { filter: none; }

  /* O texto da abertura é a legenda da foto, não uma faixa nova: leva
     o vão de grupo, não o de seção, e o botão sobe 50px na 1ª tela. */
  .intro__text { padding-top: var(--gap-group); }
}