/* ==========================================================================
   AUÊ — O Jogo | Preguiça Games
   Índice:
   1. Cores e fontes
   2. Base
   3. Utilitários (títulos, adesivo, papel...)
   4. Botões
   5. Imagens / placeholders
   6. Cabeçalho e menu do celular
   7. Seções (hero, o auê, conteúdo do jogo + oferta, história, compra, rodapé)
   8. Animações
   ========================================================================== */

/* 1. CORES E FONTES ------------------------------------------------------- */
/* A fonte dos títulos ("Oferta do Dia") é declarada em fonts/oferta-do-dia.css */
:root {
  --blue: #36a8dc;
  --blue-deep: #1f8bc4;
  --green: #32a83d;
  --green-deep: #1f7a2a; /* verde mais escuro para textos sobre branco */
  --yellow: #fff000;
  --red: #e91e4d;
  --red-deep: #a80f35;   /* vermelho mais escuro para textos sobre rosa */
  --pink: #f5b9c7;
  --ink: #151515;
  --paper: #fffdf7;
  --white: #fff;
  --brand-white: #f7f7f5; /* branco da marca (o mesmo do logo da Preguiça Games) */

  --font-display: "Oferta do Dia", Impact, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-script: "Yellowtail", cursive;
  --font-signature: "Amsterdam Three", "Yellowtail", cursive; /* assinatura da Laura */

  --wave: 2.5rem; /* altura das ondas entre seções */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. BASE ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* tamanho base de todos os textos do site: 100% = normal, 93.75% = um pouco menor */
  font-size: 93.75%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blue);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, figure, ul, ol {
  margin: 0;
}

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

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

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--yellow);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 60;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3. UTILITÁRIOS ---------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
}

/* Fundo azul com o padrão oficial do calçadão (images/brand/calcadao.svg).
   O desenho ocupa a largura da seção e some aos poucos em direção ao rodapé dela. */
.bg-calcadao {
  position: relative;
  isolation: isolate;
  background-color: var(--blue);
}

.bg-calcadao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/brand/calcadao.svg") top center / max(100%, 760px) auto no-repeat;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 95%);
  mask-image: linear-gradient(#000 55%, transparent 95%);
  pointer-events: none;
}

/* Variante que cobre a seção inteira: usa calcadao-faixa.svg, uma faixa do padrão que se repete sem emenda */
.bg-calcadao--full::before {
  background-image: url("../images/brand/calcadao-faixa.svg");
  background-repeat: repeat-y;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Textura de papel amassado por cima da cor da seção (modo multiplicar: o branco do papel
   não muda a cor, só as dobras escurecem). Arquivo: images/brand/textura-papel (original em referencias) */
.bg-papel {
  background-image: url("../images/brand/textura-papel.jpg");
  background-image: image-set(url("../images/brand/textura-papel.webp") type("image/webp"), url("../images/brand/textura-papel.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  background-blend-mode: multiply;
}

/* Texto com contorno de adesivo. Ajuste --sticker (contorno), --sw (espessura) e --drop (sombra) */
.sticker {
  --sticker: var(--pink);
  --sw: 0.055em;
  --drop: var(--ink);
  color: var(--red);
  text-shadow:
    var(--sw) 0 0 var(--sticker),
    calc(var(--sw) * -1) 0 0 var(--sticker),
    0 var(--sw) 0 var(--sticker),
    0 calc(var(--sw) * -1) 0 var(--sticker),
    calc(var(--sw) * 0.7) calc(var(--sw) * 0.7) 0 var(--sticker),
    calc(var(--sw) * -0.7) calc(var(--sw) * 0.7) 0 var(--sticker),
    calc(var(--sw) * 0.7) calc(var(--sw) * -0.7) 0 var(--sticker),
    calc(var(--sw) * -0.7) calc(var(--sw) * -0.7) 0 var(--sticker),
    calc(var(--sw) * 0.92) calc(var(--sw) * 0.38) 0 var(--sticker),
    calc(var(--sw) * -0.92) calc(var(--sw) * 0.38) 0 var(--sticker),
    calc(var(--sw) * 0.38) calc(var(--sw) * 0.92) 0 var(--sticker),
    calc(var(--sw) * -0.38) calc(var(--sw) * 0.92) 0 var(--sticker),
    calc(var(--sw) * 0.92) calc(var(--sw) * -0.38) 0 var(--sticker),
    calc(var(--sw) * -0.92) calc(var(--sw) * -0.38) 0 var(--sticker),
    calc(var(--sw) * 0.38) calc(var(--sw) * -0.92) 0 var(--sticker),
    calc(var(--sw) * -0.38) calc(var(--sw) * -0.92) 0 var(--sticker),
    0 calc(var(--sw) * 2.2) 0 var(--drop);
}

.sticker--on-pink {
  --sticker: var(--white);
}

/* Sombra dura de quadrinho para textos claros */
.stamp {
  text-shadow:
    0.04em 0.06em 0 var(--ink),
    -0.02em 0.02em 0 var(--ink),
    0.02em -0.01em 0 var(--ink);
}

/* Papel branco com bordas levemente irregulares */
.paper {
  background: var(--paper);
  clip-path: polygon(0 3%, 32% 0, 100% 1.5%, 99.4% 97%, 64% 100%, 0.5% 98.5%);
}

.section-title {
  font-size: clamp(2.4rem, 6.5vw, 4.75rem);
  text-wrap: balance;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--yellow);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.eyebrow--red {
  background: var(--red);
  color: var(--white);
}

.tape {
  position: absolute;
  z-index: 2;
  width: 6rem;
  height: 1.75rem;
  background: rgb(255 240 0 / 0.8);
}

/* 4. BOTÕES --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.5rem;
  padding: 0.1em 1.75rem 0;
  border: 4px solid;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s;
}

.btn:hover {
  transform: translateY(-2px) rotate(-1deg);
}

.btn:active {
  transform: translateY(2px);
}

/* Textura de papel amassado dentro dos botões (mesmo arquivo do fundo das seções).
   As cores de cada botão usam background-color para a textura continuar por cima. */
.btn,
.menu-toggle,
.polaroids__next {
  background-image: url("../images/brand/textura-papel.jpg");
  background-image: image-set(url("../images/brand/textura-papel.webp") type("image/webp"), url("../images/brand/textura-papel.jpg") type("image/jpeg"));
  background-position: center 40%;
  background-size: 26rem auto;
  background-blend-mode: multiply;
}

.btn .icon {
  width: 1em;
  height: 1em;
  stroke-width: 3;
  transition: translate 0.2s;
}

.btn:hover .icon {
  translate: 2px 0;
}

.btn--primary {
  background-color: var(--green);
  border-color: var(--yellow);
  color: var(--white);
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.28);
}

.btn--primary:hover {
  background-color: #2c9a36;
}

.btn--secondary {
  background-color: var(--white);
  border-color: var(--ink);
  color: var(--ink);
}

.btn--secondary:hover {
  background-color: var(--yellow);
}

.btn--sm {
  min-height: 2.75rem;
  padding-inline: 1.25rem;
  border-width: 3px;
  font-size: 1.125rem;
  white-space: nowrap;
}

.btn--lg {
  min-height: 4rem;
  padding-inline: 1.5rem;
  border-width: 5px;
  font-size: 1.4rem;
}

.btn--block {
  width: 100%;
}

/* 5. IMAGENS / PLACEHOLDERS ----------------------------------------------- */
/* Quando a imagem existe na pasta, ela cobre o placeholder automaticamente (ver js/main.js) */
.media {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

/* <picture> (quando houver mais de um formato) não interfere no layout */
.media picture {
  display: contents;
}

.media img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.js .media img {
  visibility: hidden;
}

.media.has-image img {
  visibility: visible;
}

.media.has-image {
  background: transparent;
}

.media.has-image .media__ph {
  display: none;
}

.media__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  text-align: center;
  container-type: inline-size;
  background-image: repeating-linear-gradient(-45deg, transparent 0 12px, rgb(21 21 21 / 0.06) 12px 24px);
}

.media__ph::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed currentColor;
  border-radius: 10px;
  opacity: 0.35;
}

.media__ph .icon {
  width: 2rem;
  height: 2rem;
  opacity: 0.8;
}

.media__ph strong {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.media__ph small {
  display: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

@container (min-width: 11rem) {
  .media__ph small { display: block; }
}

@container (min-width: 14rem) {
  .media__ph strong { font-size: 1.5rem; }
}

.media--yellow { background: var(--yellow); }

/* Proporções das imagens (largura / altura) */
.r-polaroid { aspect-ratio: 4 / 5; }

/* 6. CABEÇALHO E MENU DO CELULAR ------------------------------------------ */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: 1rem;
  transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s;
}

/* Ao rolar, o cabeçalho ganha fundo azul com o calçadão (mesma escala do topo da página) */
.header.is-scrolled {
  padding-block: 0.5rem;
  background:
    url("../images/brand/calcadao.svg") top center / max(100%, 760px) auto no-repeat,
    var(--blue);
  box-shadow: 0 3px 0 0 var(--ink);
}

.header.menu-open {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header__cta {
  display: none;
}

/* Logo da Preguiça Games (altura definida em --h) */
.logo {
  --h: 60px;
  display: inline-block;
  height: var(--h);
  transition: height 0.3s;
}

.header.is-scrolled .logo {
  --h: 52px;
}

.logo > img {
  width: auto;
  height: 100%;
}

.nav {
  display: none;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav a {
  position: relative;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0.04em 0.06em 0 var(--ink), -0.02em 0.02em 0 var(--ink);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background-color: var(--yellow);
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle .icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 3;
}

.menu-toggle .icon--close,
.menu-toggle[aria-expanded="true"] .icon--open {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon--close {
  display: block;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 7rem 1.5rem 2.5rem;
  overflow-y: auto;
  background: var(--yellow);
  visibility: hidden;
  clip-path: circle(0% at calc(100% - 3rem) 3rem);
  transition: clip-path 0.45s var(--ease), visibility 0s 0.45s;
}

.mobile-menu.is-open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 3rem) 3rem);
  transition: clip-path 0.45s var(--ease);
}

.mobile-menu nav li {
  opacity: 0;
  translate: -24px 0;
  transition: opacity 0.3s, translate 0.3s var(--ease);
}

.mobile-menu.is-open nav li {
  opacity: 1;
  translate: 0 0;
}

.mobile-menu.is-open nav li:nth-child(1) { transition-delay: 0.12s; }
.mobile-menu.is-open nav li:nth-child(2) { transition-delay: 0.18s; }
.mobile-menu.is-open nav li:nth-child(3) { transition-delay: 0.24s; }
.mobile-menu.is-open nav li:nth-child(4) { transition-delay: 0.3s; }

.mobile-menu nav a {
  display: block;
  padding-block: 0.25rem;
  font-family: var(--font-display);
  font-size: 2.5rem;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-decoration: none;
  text-transform: uppercase;
}

/* espaço entre os links e o botão de compra */
.mobile-menu > .btn {
  margin-top: 2.5rem;
}

.mobile-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.mobile-menu__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  word-break: break-all;
}

/* 7. SEÇÕES --------------------------------------------------------------- */

/* --- Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 7rem;
}

.hero__grid {
  display: grid;
  align-items: center;
  gap: 3.5rem 2.5rem;
  padding-bottom: 5rem;
}

.hero__title span {
  display: block;
  font-size: clamp(2.8rem, 9.6vw, 5rem);
}

/* "chegou!" em destaque, levemente inclinado */
.hero__title .hero__chegou {
  display: inline-block;
  margin-top: 0.1em;
  transform: rotate(-4deg);
  transform-origin: left center;
}

.hero__paper {
  position: relative;
  max-width: 42rem;
  margin-top: 2rem;
  filter: drop-shadow(6px 8px 0 rgb(21 21 21 / 0.22));
}

/* Fita amarela no meio da borda de cima dos quadros brancos.
   O ângulo de cada uma é definido no index.html com style="--tilt:..." */
.tape--center {
  top: -0.9rem;
  left: 50%;
  translate: -50% 0;
  transform: rotate(var(--tilt, -4deg));
}

.hero__paper .paper {
  padding: 1.5rem;
  transform: rotate(-1deg);
}

.hero__lead {
  color: var(--green-deep);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
}

.hero__visual {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  padding-block: 1.5rem;
}

/* Logo do AUÊ em destaque. Para aumentar ou diminuir, ajuste o max-width do .hero__visual.
   A sombra fica dentro do próprio logo-aue.svg (só no "AUÊ", sem o "O JOGO"). */
.hero__brand img {
  width: 100%;
  height: auto;
  transform: rotate(-4deg);
}

/* Onda no topo da seção: a seção sobe sobre a anterior e a borda de cima vira uma onda.
   O fundo (cor ou calçadão) continua dentro da curva. Use .wave-top ou .wave-top--flip */
.wave-top,
.wave-top--flip {
  --wave-pad: var(--wave);
  margin-top: calc(var(--wave) * -1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 64%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 32C120 8 240 8 360 32s240 24 360 0 240-24 360 0 240 24 360 0V64H0z%27/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat, linear-gradient(#000 0 0) 0 var(--wave) / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 64%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 32C120 8 240 8 360 32s240 24 360 0 240-24 360 0 240 24 360 0V64H0z%27/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat, linear-gradient(#000 0 0) 0 var(--wave) / 100% 100% no-repeat;
}

.wave-top--flip {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 64%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M1440 32C1320 8 1200 8 1080 32s-240 24-360 0-240-24-360 0-240 24-360 0V64h1440z%27/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat, linear-gradient(#000 0 0) 0 var(--wave) / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 64%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M1440 32C1320 8 1200 8 1080 32s-240 24-360 0-240-24-360 0-240 24-360 0V64h1440z%27/%3E%3C/svg%3E") top / 100% var(--wave) no-repeat, linear-gradient(#000 0 0) 0 var(--wave) / 100% 100% no-repeat;
}

/* --- O AUÊ --- */
.about {
  position: relative;
  overflow: hidden;
  padding: calc(4rem + var(--wave-pad, 0px)) 0 calc(6.5rem + var(--wave)); /* espaço extra embaixo: a onda da seção azul sobe por cima */
  background-color: var(--brand-white);
}

.about__grid {
  display: grid;
  align-items: center;
  gap: 4rem 2.5rem;
}

.chip-red {
  display: inline-block;
  padding: 0.25rem 0.75rem 0;
  border-radius: 0.375rem;
  background: var(--red);
  color: var(--white);
  transform: rotate(-2deg);
}

.about__text {
  max-width: 58ch;
  margin-top: 2rem;
  font-size: 1.125rem;
  line-height: 1.7;
}

.about__text p + p {
  margin-top: 1.25rem;
}

.about mark {
  background: linear-gradient(transparent 58%, var(--pink) 58%);
  color: inherit;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.truco-word {
  color: var(--red);
  font-family: var(--font-display);
  font-size: 1.6em;
  letter-spacing: 0.01em;
  line-height: 0;
  text-transform: uppercase;
}

/* Caixa do jogo. Para aumentar ou diminuir, ajuste o max-width abaixo */
.about__box {
  position: relative;
  width: 100%;
  max-width: 19rem;
  margin-inline: auto;
}

.about__box img {
  width: 100%;
  height: auto;
  filter: drop-shadow(10px 14px 0 rgb(21 21 21 / 0.3));
  transform: rotate(5deg);
}

.about__sparks {
  position: absolute;
  left: -2rem;
  top: -1rem;
  width: 3.5rem;
  height: 2.5rem;
  transform: rotate(-30deg);
}

.about__statement {
  max-width: 56rem;
  margin-top: 4rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 0.95;
  text-wrap: balance;
}

.about__statement span {
  color: var(--red);
}

/* --- Conteúdo do jogo (lista + colagem de fotos) --- */
.how {
  padding-block: calc(5rem + var(--wave-pad, 0px)) 5rem;
}

.contents {
  margin-top: 4rem; /* vem logo depois das fotos */
  display: grid;
  grid-template-areas: "title art" "list list";
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
}

.contents__title { grid-area: title; }
.contents__list { grid-area: list; }

/* desenho das cartas, em traço preto (para deixar branco, acrescente filter: invert(1)) */
.contents__art {
  grid-area: art;
  width: clamp(5rem, 14vw, 14rem);
  height: auto;
  rotate: 8deg;
}

.contents__title {
  color: var(--yellow);
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  line-height: 1;
}

.contents__list {
  margin-top: 1.25rem;
  padding-left: 1.5rem;
  list-style: disc;
  font-size: clamp(1.0625rem, 2.4vw, 1.75rem);
  line-height: 1.45;
}

.contents__list ul {
  padding-left: 1.75rem;
  list-style: circle;
}

.contents__list strong { font-weight: 700; }

@media (min-width: 768px) {
  .contents__list { padding-left: 4.5rem; }
}

@media (min-width: 1024px) {
  .contents {
    grid-template-areas: "title art" "list art";
    grid-template-columns: auto 1fr;
    column-gap: 3rem;
  }
  .contents__art { justify-self: start; }
}

.collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 1.5rem 1rem;
}

/* no celular as fotos largas ocupam a linha inteira e vão para o fim */
.c-aue,
.c-pracla { grid-column: span 2; order: 1; }

.collage__item img {
  width: 100%;
  height: auto;
  rotate: var(--r, 0deg);
  filter: drop-shadow(6px 10px 10px rgb(21 21 21 / 0.28));
  transition: rotate 0.3s var(--ease), scale 0.3s var(--ease);
}

.collage__item:hover img {
  rotate: 0deg;
  scale: 1.04;
}

.c-manual { --r: 2deg; }
.c-aberta { --r: -4deg; }
.c-frente { --r: 0deg; }
.c-aue    { --r: 0deg; }
.c-verso  { --r: 0deg; }
.c-pracla { --r: 0deg; }

.how__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 4rem;
  text-align: center;
  font-weight: 500;
}

.how__footer p {
  font-size: 0.8125rem;
}

.how__file {
  margin-top: -0.5rem;
  font-size: 0.8125rem;
  opacity: 0.75;
}

/* --- Oferta Black November (dentro de "Conteúdo do jogo") --- */
.offer {
  margin-top: 5rem;
  text-align: center;
}

.offer__stock {
  max-width: 64rem;
  margin-inline: auto;
}

.offer__tag {
  width: fit-content;
  margin: 0 0 -0.4rem 1rem;
  color: var(--yellow);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1;
  text-align: left;
  rotate: -2deg;
}

.offer__strip {
  position: relative;
  filter: drop-shadow(6px 8px 0 rgb(21 21 21 / 0.22)); /* mesma sombra do quadro do topo */
  max-width: 64rem;
  margin-inline: auto;
  padding: 1.5rem 1.25rem;
  background: var(--white);
  color: var(--green-deep);
  font-size: clamp(1.125rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  rotate: -1.5deg;
}

.offer__title {
  margin-top: 4rem;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: 1;
  text-wrap: balance;
}

.offer__grid {
  display: grid;
  align-items: center;
  gap: 2.5rem;
  margin-top: 3rem;
}

.offer__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--yellow);
  line-height: 0.9;
  rotate: -4deg;
}

.offer__price small {
  font-size: 0.3em;
}

.offer__from,
.offer__to {
  white-space: nowrap;
}

.offer__from {
  font-size: clamp(3rem, 9vw, 4.5rem);
}

.offer__to {
  font-size: clamp(5rem, 17vw, 8rem);
}

.offer__text {
  max-width: 30rem;
  margin: 2rem auto 0;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  rotate: -4deg;
}

.offer__coupon {
  margin-top: 1.5rem;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 700;
  text-transform: uppercase;
  rotate: -4deg;
}

.offer__coupon strong {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 3px dashed var(--ink);
  border-radius: 0.5rem;
  background: var(--yellow);
  user-select: all; /* um clique seleciona o cupom inteiro */
}

.offer__side {
  position: relative;
  display: grid;
  justify-items: center;
}

/* balão de fala */
.offer__bubble {
  position: relative;
  max-width: 19rem;
  padding: 2.25rem 2.5rem;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  rotate: -5deg;
}

.offer__bubble::before,
.offer__bubble::after {
  content: "";
  position: absolute;
  left: 30%;
  top: 100%;
  width: 1.75rem;
  height: 2.25rem;
  clip-path: polygon(0 0, 100% 0, 15% 100%);
}

.offer__bubble::before {
  margin-top: -1px;
  background: var(--ink);
  translate: -2px 0;
  scale: 1.35;
  transform-origin: top;
}

.offer__bubble::after {
  margin-top: -6px;
  background: var(--white);
}

.offer__art {
  width: min(15rem, 60%);
  height: auto;
  margin-top: 0.5rem;
  margin-left: 30%;
  rotate: 4deg;
}

.offer__cta {
  margin-top: 3rem;
}

.offer__zap {
  margin-top: 1rem;
}

.offer__zap .offer__strip {
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .offer__cta .btn { min-width: 26rem; }
}

@media (min-width: 1024px) {
  .offer__grid { grid-template-columns: 1fr 1fr; }
  .offer__deal { padding-left: 2rem; }
}

/* --- Nossa história --- */
.story {
  position: relative;
  overflow: hidden;
  padding-block: calc(5rem + var(--wave-pad, 0px)) 5rem;
  background-color: var(--pink);
}

.story__grid {
  display: grid;
  gap: 3.5rem 4rem;
}

.story__photo {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}

.story__sticky {
  position: relative;
}

/* tucanos embaixo das polaroids (aparece a partir de 1024px, onde sobra espaço) */
.story__art {
  display: none;
  width: 13rem;
  height: auto;
  margin: 10rem auto 0; /* centralizado embaixo das polaroids */
  rotate: -6deg;
}

.polaroid {
  position: relative;
  padding: 0.75rem 0.75rem 1rem;
  background: var(--white);
  outline: 1px solid rgb(21 21 21 / 0.08); /* contorno bem leve para separar as fotos da pilha */
  transform: rotate(-3deg);
}

/* Pilha de polaroids (o JS define a posição de cada foto em data-pos) */
.polaroids {
  position: relative;
  display: grid;
}

.polaroids > .polaroid {
  grid-area: 1 / 1;
  transition: transform 0.6s var(--ease), opacity 0.45s, translate 0.3s var(--ease), rotate 0.3s var(--ease);
}

/* enquanto o dedo arrasta, a foto acompanha sem atraso */
.polaroids > .polaroid.is-dragging { transition: none; }

html:not(.js) .polaroids > .polaroid + .polaroid { display: none; }

.polaroid[data-pos="0"] { z-index: 3; transform: rotate(-3deg); }
.polaroid[data-pos="1"] { z-index: 2; transform: translate(10px, 6px) rotate(4deg); }
.polaroid[data-pos="2"] { z-index: 1; transform: translate(-8px, 10px) rotate(-8deg); }
.polaroid[data-pos="hidden"] { z-index: 0; opacity: 0; transform: rotate(2deg); }

/* foto da frente saindo para o lado antes de ir para o fundo da pilha */
.polaroid.is-out {
  z-index: 4;
  opacity: 0;
  transform: translate(70%, -4%) rotate(16deg);
}

.polaroid.is-out-left {
  z-index: 4;
  opacity: 0;
  transform: translate(-70%, -4%) rotate(-16deg);
}

.polaroids__next {
  position: absolute;
  right: -0.75rem;
  bottom: -1rem;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background-color: var(--yellow);
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}

.polaroids__next:hover { transform: rotate(-8deg) scale(1.08); }
.polaroids__next .icon { width: 1.4rem; height: 1.4rem; stroke-width: 3; }
.polaroids .polaroid { cursor: pointer; }

.tape--top {
  top: -1rem;
  left: 50%;
  width: 7rem;
  height: 2rem;
  translate: -50% 0;
  transform: rotate(2deg);
}

.polaroid figcaption {
  padding-top: 0.75rem;
  font-family: var(--font-script);
  font-size: 1.875rem;
  line-height: 1.2;
  text-align: center;
}

.stamp {
  position: absolute;
  right: -0.75rem;
  top: -2rem;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 0 var(--ink);
  transform: rotate(12deg);
}

.stamp b {
  display: block;
  font-size: 1.875rem;
  font-weight: 400;
}

.stamp small {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.place {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.375rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
}

.place .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.5;
}

.story__text {
  max-width: 62ch;
  margin-top: 2rem;
  font-size: 1.125rem;
  line-height: 1.7;
}

.story__text p + p {
  margin-top: 1.5rem;
}

.hl {
  color: var(--red-deep);
  font-weight: 700;
}

.story__quote {
  margin-top: 2rem;
  font-size: clamp(2.4rem, 6vw, 3.75rem);
  line-height: 1;
}

.story__quote span {
  color: var(--green-deep);
}

.story__note {
  position: relative;
  margin-top: 2.5rem;
  filter: drop-shadow(5px 6px 0 rgb(21 21 21 / 0.18));
}

.story__note .paper {
  padding: 1.75rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.7;
  transform: rotate(1deg);
}

.sign {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 2.5rem;
}

.sign__ask {
  font-size: 2.25rem;
}

.sign__name {
  color: var(--red);
  font-family: var(--font-signature);
  margin-left: clamp(1.5rem, 9vw, 7rem); /* assinatura embaixo e mais à direita do "Bora jogar junto?" */
  font-size: clamp(2.5rem, 10vw, 4.25rem);
  line-height: 1.6; /* espaço para as voltas altas da fonte */
  white-space: nowrap;
  transform: rotate(-6deg);
}

/* --- Chamada final (compra) --- */
.cta {
  position: relative;
  overflow: hidden;
  padding-top: calc(5rem + var(--wave-pad, 0px));
}

.cta__inner {
  max-width: 64rem;
}

.cta__title img {
  width: 100%;
  height: auto;
  filter: drop-shadow(6px 8px 0 rgb(21 21 21 / 0.25));
}

.cta__actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.cta__buttons {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.chips li {
  padding: 0.375rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
}

.cta__sparks,
.cta__squiggle {
  position: absolute;
  display: none;
  color: var(--yellow);
}

.cta__sparks { left: -0.5rem; top: -2.5rem; width: 4rem; height: 2.75rem; transform: rotate(-12deg); }
.cta__squiggle { right: -1rem; top: 0; width: 6rem; height: 1.5rem; }

/* Parede de lambe-lambe: a imagem se repete na horizontal e a seção corta a parte de baixo.
   --tile = altura da imagem inteira (4 fileiras de pôsteres); height = quanto da parede aparece. */
.wall {
  --tile: 19rem;
  position: relative;
  height: 12rem;
  margin-top: 5rem;
}

.wall__paper {
  position: absolute;
  left: -10%;
  top: 1.5rem;
  width: 120%;
  height: var(--tile);
  background-color: var(--red);
  background-image: url("../images/brand/parede-lambe.webp");
  background-image: image-set(
    url("../images/brand/parede-lambe.avif") type("image/avif"),
    url("../images/brand/parede-lambe.webp") type("image/webp")
  );
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-position: center top;
  box-shadow: 0 -8px 0 0 rgb(21 21 21 / 0.2);
  transform: rotate(-3deg);
}

/* --- Rodapé --- */
.footer {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--white);
}

.footer__stripe {
  display: flex;
  height: 0.75rem;
}

.footer__stripe span { flex: 1; }
.footer__stripe span:nth-child(1) { background: var(--blue); }
.footer__stripe span:nth-child(2) { background: var(--green); }
.footer__stripe span:nth-child(3) { background: var(--yellow); }
.footer__stripe span:nth-child(4) { background: var(--red); }
.footer__stripe span:nth-child(5) { background: var(--pink); }

.footer__grid {
  display: grid;
  gap: 3rem;
  padding-block: 4rem;
}

.logo--footer {
  --h: 96px;
}

.footer__about {
  max-width: 24rem;
  margin-top: 1.5rem;
  color: rgb(255 255 255 / 0.75);
  font-size: 0.875rem;
  line-height: 1.7;
}

.footer__about strong {
  color: var(--white);
}

.footer__credits {
  display: grid;
  gap: 0.25rem;
  margin-top: 1rem;
  color: rgb(255 255 255 / 0.75);
  font-size: 0.8125rem;
}

.footer__credits strong {
  color: var(--white);
  font-weight: 600;
}

.footer__credits a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__title {
  color: var(--yellow);
  font-size: 1.5rem;
}

.footer__links {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.footer__links a,
.footer__contact a {
  color: rgb(255 255 255 / 0.8);
  text-decoration: none;
  transition: color 0.2s;
}

.footer__links a:hover,
.footer__contact a:hover {
  color: var(--yellow);
}

.footer__contact {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  word-break: break-all;
}

.footer__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.1);
  transition: background-color 0.2s, color 0.2s;
}

.footer__contact a:hover .footer__icon {
  background: var(--yellow);
  color: var(--ink);
}

.footer__bottom {
  border-top: 1px solid rgb(255 255 255 / 0.15);
  color: rgb(255 255 255 / 0.6);
  font-size: 0.75rem;
}

.footer__bottom .container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1.5rem;
}

/* --- Telas a partir de 640px (celular grande / tablet) --- */
@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
  .header__cta { display: inline-flex; }
  .eyebrow { font-size: 0.875rem; }
  .btn--lg { padding-inline: 2rem; font-size: 1.75rem; }

  .hero { padding-top: 9rem; }
  .hero__paper .paper { padding: 1.75rem 2.25rem; }
  .hero__lead { font-size: 1.25rem; }
  .hero__ctas { flex-flow: row wrap; align-items: stretch; }
  .hero__visual { max-width: 26rem; }
  :root { --wave: 4rem; }

  .about { padding-top: calc(6rem + var(--wave-pad, 0px)); }
  .about__text { font-size: 1.25rem; }
  .about__box { max-width: 22rem; }
  .about__statement { margin-top: 6rem; }

  .how { padding-block: calc(7rem + var(--wave-pad, 0px)) 7rem; }


  .story { padding-block: calc(7rem + var(--wave-pad, 0px)) 7rem; }
  .polaroid { padding: 1rem 1rem 1.25rem; }
  .stamp { right: -3.75rem; top: -5.75rem; width: 9.5rem; height: 9.5rem; }
  .stamp b { font-size: 2.6rem; }
  .stamp small { font-size: 1.15rem; }
  .story__note .paper { padding-inline: 2.25rem; }

  .cta { padding-top: calc(7rem + var(--wave-pad, 0px)); }
  .cta__buttons { flex-direction: row; align-items: center; justify-content: center; width: auto; }
  .wall { --tile: 28rem; height: 18rem; margin-top: 6rem; }

  .footer__bottom .container { flex-direction: row; justify-content: space-between; }
}

/* --- Telas a partir de 768px (tablet) --- */
@media (min-width: 768px) {
  .header { padding-block: 1.5rem; }

  /* colagem livre: cada foto posicionada em % da área (esquerda, topo, largura), algumas sobrepostas */
  /* ocupa a largura da tela, mas para de crescer em 1500px (senão com zoom reduzido as fotos ficam enormes) */
  .collage { position: relative; display: block; width: min(100vw, 1500px); margin-left: calc(50% - min(50vw, 750px)); aspect-ratio: 1891 / 820; }
  .collage__item { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
  .c-manual { --x: 9%;   --y: 0%;  --w: 10%; }
  .c-aberta { --x: 24%;  --y: 10%; --w: 17%; }
  .c-frente { --x: 9.5%; --y: 33%; --w: 17%; z-index: 1; }
  .c-aue    { --x: 30%;  --y: 40%; --w: 26%; }
  .c-pracla { --x: 67%;  --y: 22%; --w: 28%; }
  .c-verso  { --x: 51%;  --y: 13%; --w: 19.5%; z-index: 2; }


  .cta__sparks, .cta__squiggle { display: block; }

  .footer__grid { grid-template-columns: 5fr 3fr 4fr; }
}

/* --- Telas a partir de 1024px (notebook / desktop) --- */
@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
  .nav { display: block; }
  .logo { --h: 76px; }
  .header.is-scrolled .logo { --h: 56px; }
  .menu-toggle, .mobile-menu { display: none; }

  .hero { padding-top: 8.5rem; }
  .hero__title span { font-size: clamp(3rem, 4.5vw, 4rem); }
  .hero__grid { grid-template-columns: 3fr 2fr; padding-bottom: 7rem; }
  .hero__ctas { flex-wrap: nowrap; }
  .hero__ctas .btn { white-space: nowrap; }
  .hero__visual { max-width: 30rem; }

  .about__grid { grid-template-columns: 7fr 5fr; }



  .story__grid { grid-template-columns: 5fr 7fr; }
  .story__photo { max-width: 25rem; margin: 0 auto 0 -1rem; padding-top: 2.5rem; } /* encostada à esquerda, longe do texto */
  .story__sticky { position: sticky; top: 7rem; }
  .story__art { display: block; }
}

/* 8. ANIMAÇÕES ------------------------------------------------------------ */
/* Entrada do hero ao abrir a página (--d = atraso) */
@keyframes enter {
  from { opacity: 0; translate: 0 40px; }
}

@keyframes pop-in {
  from { opacity: 0; scale: 0.3; }
}

@keyframes float {
  50% { translate: 0 -12px; }
}

.enter {
  animation: enter 0.75s var(--ease) both;
  animation-delay: var(--d, 0s);
}

.enter-pop {
  animation: pop-in 0.6s var(--spring) both;
  animation-delay: var(--d, 0s);
}

.float {
  animation: float 7s ease-in-out infinite;
}

/* Elementos que aparecem ao rolar a página (o JS adiciona .is-visible) */
.js .reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease), scale 0.6s var(--spring);
  transition-delay: var(--d, 0s);
}

.js .reveal--pop { scale: 0.4; translate: 0 0; }
.js .reveal--zoom { scale: 0.92; }

.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal { opacity: 1; translate: none; scale: none; }
}


/* --- Só no celular (até 639px). Ajustes que não valem para tablet e computador --- */
@media (max-width: 639px) {
  .hero__title { text-align: center; }

  .hero__visual { max-width: 15rem; }
  .about__box { max-width: 13rem; } /* caixa do jogo em "Aqui a memória falha" */
  .story__photo { max-width: 17rem; } /* pilha de polaroids */
  .polaroid figcaption { font-size: 1.45rem; }

  /* selo "100% independente": mais acima e para fora, sem cobrir as fotos */
  .stamp { right: -2rem; top: -5rem; width: 7rem; height: 7rem; }
  .stamp b { font-size: 1.85rem; }
  .stamp small { font-size: 0.85rem; }

  /* chamada final: botões menores e os 3 selos brancos numa linha só */
  .cta__buttons { align-items: center; }
  .cta__buttons .btn {
    min-height: 3.25rem;
    padding-inline: 1.5rem;
    border-width: 4px;
    font-size: 1.15rem;
  }
  .chips { flex-wrap: nowrap; gap: 0.3rem; font-size: min(0.6875rem, 2.75vw); }
  .chips li { padding: 0.3rem 0.45rem; white-space: nowrap; }

  /* calçadão: as seções azuis ficam mais altas no celular, então todas usam a faixa que se
     repete sem emenda (o desenho grande acabava no meio da seção) */
  .bg-calcadao::before {
    background-image: url("../images/brand/calcadao-faixa.svg");
    background-repeat: repeat-y;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* no celular as fotos passam arrastando: sai o botão amarelo */
  .polaroids { touch-action: pan-y; }
  .polaroids__next { display: none; }

  /* "Estoque limitado!" acima do quadro branco, sem ser coberto */
  .offer__tag { position: relative; z-index: 3; margin-bottom: 2.5rem; }

  .hero__ctas { align-items: center; }
  .hero__ctas .btn {
    min-height: 3.25rem;
    padding-inline: 1.5rem;
    border-width: 4px;
    font-size: 1.15rem;
  }
}