/* Revela · loja temática.
   Assinatura: caixa e rolo de filme. Manchete de cartaz, polaroides e a
   perfuração de 35 mm em cima e embaixo do hero.
   Caixa de filme: amarelo, vermelho de etiqueta, preto. Contorno de 2px e
   sombra chapada de 5px, sem desfoque. Aresta viva. Texto sobre o
   vermelho é PRETO (5,1:1); branco ali reprova. Vermelho
   nunca é texto sobre o amarelo (2,8:1). */
:root {
  /* coluna de conteúdo de até 1160px, centralizada; o fundo de cada faixa
     continua indo de borda a borda */
  --lado: max(20px, calc((100% - 1160px) / 2));
  --amarelo: #FFC51E;
  --creme: #FFF4D6;
  --vermelho: #EC3426;   /* preto nele: 5,1:1. O #E4261C dava 4,1 e reprovava */
  --preto: #111111;
  --suave: #4A4231;     /* 7,6:1 no creme, 6,9:1 no amarelo */
  --linha: 2px solid var(--preto);
  --sombra: 5px 5px 0 var(--preto);
  --disp: 'Archivo Black', Impact, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--creme); color: var(--preto); font: 400 15.5px/1.6 var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--vermelho); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--disp); font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: -.01em; }
h2 { font-size: clamp(34px, 4.4vw, 64px); }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border: var(--linha); box-shadow: var(--sombra); font: 700 15px/1 var(--mono); text-transform: uppercase; white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--preto); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--preto); }
.btn-vermelho { background: var(--vermelho); color: var(--preto); }
.btn-preto { background: var(--preto); color: var(--amarelo); }

/* fita de aviso que corre */
.fita { overflow: hidden; background: var(--preto); color: var(--amarelo); border-bottom: var(--linha); }
.fita-trilho { display: flex; gap: 48px; width: max-content; padding: 9px 0; font-weight: 700; font-size: 13px; text-transform: uppercase; animation: corre 26s linear infinite; }
.fita-trilho span::before { content: "\25CF"; margin-right: 48px; color: var(--vermelho); }
@keyframes corre { to { transform: translateX(-50%); } }

.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 14px var(--lado); background: var(--amarelo); border-bottom: var(--linha); }
.marca { padding-block: 7px; font: 400 30px/1 var(--disp); letter-spacing: -.02em; }
.marca span { color: var(--vermelho); }
.menu { display: flex; gap: 24px; margin-left: auto; font-weight: 700; text-transform: uppercase; font-size: 14px; }
.menu a { border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--preto); }
.sacola-bt { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: var(--linha); background: var(--creme); box-shadow: 3px 3px 0 var(--preto); font-weight: 700; font-size: 15px; }
.sacola-bt i { font-size: 19px; }

.adesivo { display: inline-block; padding: 8px 14px; background: var(--preto); color: var(--amarelo); font-weight: 700; font-size: 13px; text-transform: uppercase; transform: rotate(-3deg); }
/* era letra vazada (só contorno): sem preenchimento não há contraste a
   medir, e no celular ela some. Agora é tinta cheia com sombra chapada */

.loja { padding: clamp(48px, 6vw, 88px) var(--lado); }
.loja-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.abas { display: flex; flex-wrap: wrap; gap: 8px; }
.abas button { padding: 9px 14px; border: var(--linha); background: var(--creme); font-weight: 700; font-size: 13px; text-transform: uppercase; }
.abas button[aria-selected="true"] { background: var(--preto); color: var(--amarelo); }

.produtos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.prod { position: relative; display: flex; flex-direction: column; padding: 12px; background: #fff; border: var(--linha); box-shadow: var(--sombra); transition: transform .15s, box-shadow .15s; }
.prod:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--preto); }
.prod:nth-child(3n+2) { background: var(--amarelo); }
.prod[hidden] { display: none; }
.prod img { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--linha); }
.etq { position: absolute; top: 22px; left: 22px; z-index: 1; padding: 5px 9px; background: var(--vermelho); border: var(--linha); font-weight: 700; font-size: 12px; text-transform: uppercase; transform: rotate(-4deg); }
.prod h3 { margin-top: 14px; font-size: 19px; }
.prod-pe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.preco { font-weight: 700; font-size: 17px; }
.add { padding: 9px 12px; border: var(--linha); background: var(--preto); color: var(--amarelo); font-weight: 700; font-size: 12.5px; text-transform: uppercase; white-space: nowrap; }
.add:hover { background: var(--vermelho); color: var(--preto); }

.revelacao { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(48px, 6vw, 88px) var(--lado); background: var(--vermelho); border-block: var(--linha); }
.rev-txt p { margin-top: 16px; font-size: 16.5px; font-weight: 700; }
.quadros { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 30px 0 32px; border: var(--linha); background: var(--preto); gap: 2px; }
.quadros li { padding: 16px 14px 18px; background: var(--creme); font-weight: 700; font-size: 14px; line-height: 1.35; }
.quadros strong { display: block; margin-bottom: 8px; font: 400 34px/1 var(--disp); color: var(--vermelho); -webkit-text-stroke: 1.5px var(--preto); }
.rev-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--linha); box-shadow: 10px 10px 0 var(--preto); }

.rodape { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 24px var(--lado) 96px; background: var(--preto); color: var(--creme); font-size: 13px; }
.rodape .marca { font-size: 24px; color: var(--amarelo); }

.sacola { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); height: 100%; max-height: none; margin: 0; border: 0; border-left: var(--linha); background: var(--creme); color: var(--preto); display: none; flex-direction: column; }
.sacola[open] { display: flex; animation: entra .3s cubic-bezier(.16,1,.3,1); }
.sacola::backdrop { background: rgba(17, 17, 17, .5); }
@keyframes entra { from { transform: translateX(40px); opacity: 0; } }
.sacola-cab { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: var(--amarelo); border-bottom: var(--linha); }
.sacola-cab h2 { font-size: 30px; }
.fecha { display: grid; place-items: center; width: 40px; height: 40px; border: var(--linha); background: var(--creme); font-size: 18px; }
.sacola-itens { list-style: none; flex: 1; overflow: auto; padding: 6px 20px; }
.sacola-itens li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: var(--linha); }
.sacola-itens img { width: 64px; height: 64px; object-fit: cover; border: var(--linha); }
.si-nome { font-weight: 700; font-size: 14px; line-height: 1.3; }
.si-preco { font-size: 13.5px; color: var(--suave); }
.qtd { display: flex; align-items: center; border: var(--linha); background: #fff; }
.qtd button { width: 30px; height: 30px; border: 0; background: transparent; font-weight: 700; }
.qtd span { min-width: 20px; text-align: center; font-weight: 700; }
.sacola-vazia { padding: 28px 20px; color: var(--suave); }
.sacola-pe { display: grid; gap: 14px; padding: 18px 20px 22px; border-top: var(--linha); }
.total { display: flex; justify-content: space-between; font-size: 17px; font-weight: 700; }
.sacola-pe .btn { justify-content: center; }

/* ---------- hero cartaz: a manchete atravessa a largura toda, e embaixo
   um leque de três polaroides ---------- */
.hero { padding: clamp(36px, 5vw, 64px) var(--lado) clamp(48px, 6vw, 80px); background: var(--amarelo); border-bottom: var(--linha); }
.hero h1 { margin-top: 20px; font-size: clamp(38px, 6.2vw, 88px); line-height: .96; }
.hero h1 em { display: block; font-style: normal; color: var(--preto); text-shadow: 4px 4px 0 var(--vermelho); }
.hero-base { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: var(--linha); }
.hero-sub { margin-bottom: 28px; max-width: 40ch; color: var(--suave); font-size: 16.5px; }
.leque { position: relative; height: clamp(250px, 26vw, 330px); }
.pol { position: absolute; width: 42%; padding: 10px 10px 0; background: #fff; border: var(--linha); box-shadow: 7px 7px 0 var(--preto); }
.pol img { width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--linha); }
.pol figcaption { padding: 8px 2px 10px; font-weight: 700; font-size: 13px; text-align: center; }
.pol-1 { left: 0; top: 8%; transform: rotate(-7deg); z-index: 1; }
.pol-2 { left: 29%; top: 0; transform: rotate(2deg); z-index: 2; }
.pol-3 { right: 0; top: 12%; transform: rotate(8deg); z-index: 1; }

/* ---------- assinatura: perfuração de filme 35 mm em cima e embaixo do hero ---------- */
.hero { position: relative; padding-top: calc(clamp(36px, 5vw, 64px) + 26px); padding-bottom: calc(clamp(48px, 6vw, 80px) + 26px); }
.hero::before, .hero::after { content: ""; position: absolute; left: 0; right: 0; height: 26px; background-color: var(--preto); background-image: repeating-linear-gradient(90deg, transparent 0 12px, var(--amarelo) 12px 26px, transparent 26px 34px); background-size: 100% 10px; background-position: 0 50%; background-repeat: repeat-x; }
.hero::before { top: 0; }
.hero::after { bottom: 0; }

@media (max-width: 1000px) { .produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .hero-base { grid-template-columns: minmax(0, 1fr); }
  .leque { height: 62vw; max-height: 330px; }
  .revelacao { grid-template-columns: minmax(0, 1fr); }
  .produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .menu { display: none; }
  .nav { justify-content: space-between; }
  .prod-pe { flex-direction: column; align-items: stretch; }
  .quadros { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) { .produtos { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fita-trilho { animation: none; } * { transition: none !important; } .sacola[open] { animation: none; } }