/* ==========================================================================
   Monster Ofertas
   Valores tipográficos e de cor extraídos do design original (largura-base
   1425px). As medidas fluidas usam tamanho/1425*100 em vw, então em telas de
   1425px o resultado bate com o original e abaixo disso escala junto.
   ========================================================================== */

/* ---------- Fontes ---------- */
@font-face {
  font-family: "Monster Titulo";
  src: url("../fonts/titulo-400.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Monster Titulo";
  src: url("../fonts/titulo-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Monster Texto";
  src: url("../fonts/texto-400.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Monster Botao";
  src: url("../fonts/botao-400.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Monster Botao";
  src: url("../fonts/botao-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Cores retiradas do original. Mantidas em hexadecimal exato para que a
     reprodução não escorregue de tom. */
  --azul: #004aad;
  --creme: #fffeef;
  --tinta-clara: #feffff;
  --tinta-corpo: #edf0f1;
  --tinta-apagada: #5d5d5d;
  --painel: #1b3451;
  --verde: #52cb60;
  --neon-rosa: #ff00ff;
  --neon-ciano: #00ffff;
  --ouro: #ab8115;

  --fundo: linear-gradient(to bottom right, var(--azul), var(--creme));

  /* Escala tipográfica.
     Atenção: no original o font-size declarado não é o tamanho que aparece na
     tela. Cada bloco de texto recebe um scale() de um ancestral, e o fator
     muda de bloco para bloco (0.885 no título de abertura, 0.576 no "POR QUE
     ENTRAR", 1.18 no corpo do painel). Os valores abaixo já são os tamanhos
     visuais medidos, e é por isso que "POR QUE ENTRAR" fica em 42.46px e não
     nos 73.74px que o CSS do Canva declara. */
  --t-hero:   clamp(2.375rem,  5.709vw, 5.085rem);  /* 81.36px */
  --t-titulo: clamp(1.75rem,   2.980vw, 2.654rem);  /* 42.46px */
  --t-md:     clamp(1.875rem,  3.396vw, 3.025rem);  /* 48.40px */
  --t-lead:   clamp(1.0625rem, 1.684vw, 1.500rem);  /* 24.00px */
  --t-painel: clamp(1.0625rem, 1.766vw, 1.573rem);  /* 25.16px */
  --t-card:   clamp(1rem,      1.497vw, 1.333rem);  /* 21.33px */
  --t-botao:  clamp(0.9375rem, 1.599vw, 1.424rem);  /* 22.79px */

  --largura: 1240px;
  --respiro: clamp(1.25rem, 3.5vw, 3rem);
}

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

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

body {
  margin: 0;
  font-family: "Monster Texto", system-ui, sans-serif;
  color: var(--tinta-corpo);
  background: var(--azul);
  line-height: 1.35;
}

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

a { color: inherit; }

h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--painel);
  color: var(--tinta-clara);
  padding: 0.75rem 1.25rem;
  z-index: 10;
}
.pular:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--tinta-clara);
  outline-offset: 3px;
}

/* ---------- Estrutura ---------- */
/* O conteúdo útil mede 1238px no original (x de 94 a 1332 na base de 1425).
   Somar o respiro ao max-width mantém essa medida exata nas telas largas e
   ainda garante margem lateral nas estreitas. */
.wrap {
  width: 100%;
  max-width: calc(1238px + 2 * var(--respiro));
  margin-inline: auto;
  padding-inline: var(--respiro);
}

/* Cada seção do original é um quadro de 1425x768, ou seja 53.9% da largura.
   Reproduzir essa proporção mantém o ritmo vertical da página. */
.secao {
  background: var(--fundo);
  min-height: min(53.895vw, 768px);
  display: grid;
  align-content: center;
  padding-block: clamp(2rem, 3vw, 3rem);
  overflow: hidden;
}

/* ---------- Tipografia ---------- */
.titulo {
  font-family: "Monster Titulo", system-ui, sans-serif;
  font-weight: 400;
  color: var(--tinta-clara);
  /* As quebras de linha vêm marcadas no HTML, como no layout original.
     Nada de text-wrap: balance aqui: ele reequilibra e desfaz essas quebras. */
}
.titulo strong { font-weight: 700; }

/* O entreletras é -0.054em em todos os títulos, tanto no original quanto aqui. */
.titulo--g  { font-size: var(--t-hero);   line-height: 1.0225; letter-spacing: -0.054em; }
.titulo--m,
.titulo--p  { font-size: var(--t-titulo); line-height: 1.0127; letter-spacing: -0.054em; }
.titulo--md { font-size: var(--t-md);     line-height: 1.0122; letter-spacing: -0.054em; }

/* O Canva posiciona o texto corrido glifo a glifo, com um leve fechamento de
   entreletras. Medido em três blocos diferentes, dá -0.021em. Sem isso as
   linhas ficam ~4% mais largas e quebram em pontos errados. */
.lead {
  font-size: var(--t-lead);
  line-height: 1.167;
  letter-spacing: -0.021em;
  color: #fff;
  max-width: 21em;
}
.lead--apagado { color: var(--tinta-apagada); }

/* ---------- Botão ---------- */
.botao {
  /* O contorno neon do original é feito com dois drop-shadows deslocados em
     diagonal, um rosa e um ciano. Fica no filtro para acompanhar o raio. */
  display: inline-block;
  padding: 0.86em 1.1em;
  border: 2px solid var(--tinta-clara);
  border-radius: 12px;
  background: var(--verde);
  color: #fff;
  font-family: "Monster Botao", system-ui, sans-serif;
  font-size: var(--t-botao);
  line-height: 1.37;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  filter:
    drop-shadow(0.386vw 0.270vw 0 var(--neon-rosa))
    drop-shadow(-0.386vw -0.270vw 0 var(--neon-ciano));
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              filter   220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1425px) {
  .botao {
    filter:
      drop-shadow(5.5px 3.85px 0 var(--neon-rosa))
      drop-shadow(-5.5px -3.85px 0 var(--neon-ciano));
  }
}

.botao:hover {
  transform: translateY(-2px);
  filter:
    drop-shadow(0.5vw 0.35vw 0 var(--neon-rosa))
    drop-shadow(-0.5vw -0.35vw 0 var(--neon-ciano));
}

@media (prefers-reduced-motion: reduce) {
  .botao { transition: none; }
  .botao:hover { transform: none; }
}

/* ---------- Abertura ---------- */
/* Colunas na medida do original: texto 503px, imagem 603px, vão de 123px. */
/* A abertura é ancorada no topo, não centrada: a marca fica junto à borda
   superior e a folga sobra embaixo, como no original. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 503fr) minmax(0, 603fr);
  align-items: start;
  gap: 9.93%;
}

/* O original deixa um vão largo entre a marca e o título: 134px na base
   de 1425, ou seja 9.4vw. */
.logo {
  width: clamp(9.5rem, 14.2vw, 12.65rem);
  height: auto;
  margin-bottom: clamp(1.5rem, 9.4vw, 8.4rem);
}

.hero__texto .lead { margin-top: clamp(1rem, 2.2vw, 1.75rem); }
.hero__texto .titulo--g { margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem); }

.hero__midia {
  display: grid;
  justify-items: center;
  gap: clamp(1.25rem, 3.9vw, 3.5rem);
}

/* No original esses dois botões medem 543x92 e, no bloco de contato, o botão é
   mais largo que a coluna de texto: por isso a medida vem da página, não da
   coluna. */
.hero__midia .botao,
.contato__texto .botao {
  width: min(38.1vw, 543px);
  min-width: fit-content; /* em larguras intermediárias o rótulo não quebra */
  padding-block: 1.26em;
}

.moldura {
  margin: 0;
  width: 100%;
  aspect-ratio: 603 / 522;
  border: clamp(3px, 0.42vw, 6px) solid var(--ouro);
  border-radius: clamp(12px, 1.7vw, 24px);
  overflow: hidden;
}
.moldura img,
.moldura picture {
  width: 100%;
  height: 100%;
  display: block;
}
.moldura img { object-fit: cover; object-position: center 44%; }

/* ---------- Por que entrar ---------- */
/* Print 378px, painel 712px, vão 122px, como no original. */
.motivos__grid {
  display: grid;
  grid-template-columns: minmax(0, 378fr) minmax(0, 712fr);
  align-items: center;
  gap: 9.85%;
}

.motivos__print {
  width: 100%;
  border-radius: clamp(8px, 1vw, 14px);
}

.painel {
  background: var(--painel);
  border-radius: clamp(10px, 1.2vw, 18px);
  padding: clamp(1.5rem, 3.4vw, 3rem);
}

.painel .titulo { margin-bottom: clamp(1rem, 2.6vw, 2rem); }

.painel__intro,
.painel__fecho,
.checks li {
  font-size: var(--t-painel);
  line-height: 1.172;
  letter-spacing: -0.021em;
  color: var(--tinta-corpo);
}

/* Os parágrafos do painel medem 504px no original: 20.03em nesse corpo.
   Na lista, o recuo do ✅ entra por fora dessa medida. */
.painel__intro,
.painel__fecho { max-width: 20.03em; }

/* O font-size precisa estar aqui na própria lista: sem ele o `em` do max-width
   resolveria contra os 16px herdados e a medida sairia pela metade. */
.checks {
  font-size: var(--t-painel);
  max-width: calc(20.03em + 1.85em);
}

.checks { margin-top: clamp(1rem, 2.2vw, 1.85rem); }
.checks li { padding-left: 1.85em; position: relative; }
.checks li + li { margin-top: 0.15em; }
.checks li::before {
  content: "✅";
  position: absolute;
  left: 0;
}

.emoji { font-style: normal; }

.painel__fecho { margin-top: clamp(1rem, 2.2vw, 1.85rem); }

.painel .botao { margin-top: clamp(1.25rem, 2.8vw, 2.25rem); }

/* ---------- Categorias ---------- */
.categorias .titulo { margin-bottom: clamp(1.5rem, 4vw, 3.25rem); }

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.44rem);
}

.card {
  position: relative;
  aspect-ratio: 292 / 392;
  border-radius: clamp(10px, 1.1vw, 16px);
  overflow: hidden;
  isolation: isolate;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--foco, 50%);
}

/* Véu escuro que sustenta o nome da categoria, como no original. */
.card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 54%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.card__nome {
  position: absolute;
  left: clamp(0.6rem, 1.1vw, 1rem);
  bottom: clamp(0.5rem, 0.9vw, 0.85rem);
  z-index: 1;
  font-size: var(--t-card);
  line-height: 1.078;
  color: var(--tinta-corpo);
}

/* ---------- Contato ---------- */
/* Texto 503px, cupom 639px, vão 105px. */
.contato__grid {
  display: grid;
  grid-template-columns: minmax(0, 503fr) minmax(0, 639fr);
  align-items: center;
  gap: 8.5%;
}

.contato__texto .titulo { margin-bottom: clamp(1.5rem, 3.6vw, 2.75rem); }

.contato__cupom { width: 100%; }

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--painel);
  padding-block: 1.15rem;
  font-size: 0.875rem;
}
.rodape__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
}
.rodape a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ==========================================================================
   Entrada dos elementos (AOS)
   O deslocamento padrão do AOS é de 100px, forte demais para este layout.
   Aqui ele cai para 36px, o suficiente para dar direção ao movimento sem
   fazer o bloco "voar" para dentro da tela.
   ========================================================================== */

[data-aos="fade-up"]    { transform: translate3d(0, 36px, 0); }
[data-aos="fade-left"]  { transform: translate3d(36px, 0, 0); }
[data-aos="fade-right"] { transform: translate3d(-36px, 0, 0); }

/* Dentro do painel são linhas curtas em sequência: 36px viraria um solavanco
   a cada linha. 20px dá o mesmo sentido de subida com bem menos agitação. */
.painel [data-aos="fade-up"] { transform: translate3d(0, 20px, 0); }

/* Rede de segurança: vale para movimento reduzido no sistema e também para o
   caso de o aos.js não carregar. Sem isso a página ficaria em branco, porque
   o CSS do AOS zera a opacidade de tudo que tem data-aos. */
.sem-animacao [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Telas menores. O original troca para um layout empilhado, com os cards
   um por linha; a reconstrução segue o mesmo arranjo.
   ========================================================================== */

@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hero__grid,
  .motivos__grid,
  .contato__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__grid {
    gap: 1.93%;
}
  .motivos__grid {
    gap: 0.85%;
}
  .contato__grid {
      gap: 1.5%;
  }
  .lead { max-width: none; }

  .hero__midia { justify-items: stretch; }

  .moldura { aspect-ratio: 1 / 1; }

  .motivos__print {
    max-width: 20rem;
    margin-inline: auto;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 19rem;
    margin-inline: auto;
  }

  .contato__texto { text-align: left; }

  /* A medida em vw dos botões só faz sentido no layout de duas colunas.
     Empilhado, eles ocupam a largura toda. */
  .botao,
  .hero__midia .botao,
  .contato__texto .botao {
    display: block;
    width: 100%;
    min-width: 0; /* empilhado, o rótulo pode quebrar em duas linhas */
  }

  /* Empilhado não há lado de onde entrar: o movimento lateral vira vertical,
     como no resto da página. Também evita barra de rolagem horizontal. */
  [data-aos="fade-left"],
  [data-aos="fade-right"] { transform: translate3d(0, 36px, 0); }
}