/* ==========================================================================
   RR STORE — Colatina/ES · Link na bio
   Conceito: "A SALA DOURADA" — a página é a sala da loja: parede preta,
   filete duplo de ouro, porta em ARCO e a luz linear do teto.
   Toda a geometria vem de duas formas reais da marca: o arco da porta
   (foto do interior) e o círculo do medalhão (logo). Nada de border-radius
   uniforme: ARCO para o que emoldura, canto curto para o que se toca.
   ========================================================================== */

/* ------------------------------- TOKENS ---------------------------------- */
:root{
  /* ouro amostrado do medalhão e dos cartazes do feed */
  --gold-1:#F3E2AC;   /* brilho especular da coroa */
  --gold-2:#D9B65C;   /* corpo do ouro (traço do monograma) */
  --gold-3:#A9822F;   /* sombra do metal */
  --gold-4:#5E4514;   /* ouro gravado, quase marrom */

  /* preto de cena: 8% de luminância com matiz 38° da própria marca */
  --bg:#0B0A07;
  --bg-2:#100E0A;
  --surface:#16130D;
  --surface-2:#1E1A12;

  --text:#F7F2E7;
  --muted:#A99E88;
  --border:rgba(217,182,92,.16);
  --border-2:rgba(217,182,92,.34);

  /* luz-chave a 285°: luminária linear do teto da loja.
     Todo deslocamento de sombra é +X pequeno / +Y maior. Sem exceção. */
  --sh:38 45% 4%;
  --elev-1:1px 2px 3px hsl(var(--sh)/.55), 2px 8px 18px hsl(var(--sh)/.35);
  --elev-2:1px 3px 6px hsl(var(--sh)/.60), 3px 14px 32px hsl(var(--sh)/.45);
  --elev-3:2px 4px 8px hsl(var(--sh)/.65), 4px 22px 52px hsl(var(--sh)/.55);
  --realce:inset 0 1px 0 rgba(255,240,200,.22);

  /* ARCO — a porta branca do fundo da loja virou sistema.
     O arco largo (portal) é do MAPA: é ali que o vão da porta faz sentido
     literal, porque o conteúdo por dentro é claro. Em card com foto ele
     viraria abóbada e comeria o topo da imagem, então ali entra o arco curto. */
  --arco:54px 54px 10px 10px;
  --arco-in:53px 53px 9px 9px;
  --arco-sm:30px 30px 8px 8px;
  --portal:84px 84px 8px 8px;
  --portal-in:83px 83px 7px 7px;
  --r-toque:10px;          /* o que se toca não é moldura: canto curto */

  --s1:6px; --s2:10px; --s3:16px; --s4:22px; --s5:32px; --s6:46px; --s7:66px;

  --wrap:600px;
  --ease:cubic-bezier(.2,.9,.25,1);

  /* filete duplo de ouro: o anel duplo do medalhão virado moldura */
  --filete:linear-gradient(160deg,var(--gold-1) 0%,var(--gold-3) 30%,#2A2318 58%,var(--gold-4) 82%,var(--gold-2) 100%);
}

/* ------------------------------- RESET ----------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-x:hidden;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a,button{touch-action:manipulation}
/* height:auto é obrigatório: o atributo height do HTML (que existe para
   reservar o espaço e evitar layout shift) vence o aspect-ratio do CSS. */
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure,blockquote{margin:0}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}

.wrap{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-left:calc(20px + env(safe-area-inset-left));
  padding-right:calc(20px + env(safe-area-inset-right));
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--gold-2);color:#17130A;padding:12px 18px;font-weight:700;border-radius:var(--r-toque)}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}

/* ----------------------------- TIPOGRAFIA -------------------------------- */
/* Playfair Display: serifa transicional de alto contraste — é a própria
   letra do monograma RR. Archivo: grotesca neutra que carrega preço,
   endereço e botão sem disputar com ela. Duas famílias, quatro pesos. */
.hero__h1,.secao__h2,.cartaz__nome,.preco,.feature__h2,.cat__n,.num__v{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:700;
}
.ouro{
  background:linear-gradient(158deg,var(--gold-1) 0%,var(--gold-2) 42%,var(--gold-3) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rotulo{
  display:flex;align-items:center;gap:var(--s2);
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:var(--s3);
}
.rotulo i{flex:1;height:1px;background:linear-gradient(90deg,var(--border-2),transparent)}
/* coroa do logo como marcador de seção — substitui bullet e eyebrow espaçado */
.coroa{width:15px;height:11px;flex:none;fill:var(--gold-2)}

.secao{padding:var(--s7) 0}
.secao__h2{
  font-size:clamp(2.05rem,9.5vw,2.75rem);line-height:1.02;letter-spacing:-.02em;
  margin-bottom:var(--s3);
}
.secao__intro{color:var(--muted);margin-bottom:var(--s5);max-width:34ch}

/* barra de luz: a luminária linear do teto da loja separa os blocos */
.luz{position:relative;height:1px;transform:scaleX(0);transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--gold-3) 18%,var(--gold-1) 50%,var(--gold-3) 82%,transparent)}
.luz::after{content:"";position:absolute;inset:0 0 auto 0;height:70px;pointer-events:none;
  background:radial-gradient(62% 100% at 50% 0%, rgba(217,182,92,.11), transparent 72%)}
.is-in .luz,.luz.is-in{animation:acende .7s var(--ease) forwards}
@keyframes acende{to{transform:scaleX(1)}}

/* -------------------------------- HERO ----------------------------------- */
.hero{
  position:relative;overflow:hidden;
  padding:calc(env(safe-area-inset-top) + 34px) 0 var(--s6);
  background:
    radial-gradient(88% 52% at 50% -6%, rgba(217,182,92,.22) 0%, rgba(169,130,47,.07) 45%, transparent 72%),
    linear-gradient(#100E0A,var(--bg));
}
/* ---- PLANOS DE PROFUNDIDADE DO HERO ----
   01 fundo e luz · 02 a sala · 03 o produto · 04 o medalhão · 05 tipo e CTA
   Regra de foco: quanto mais ao fundo, mais desfoque. Tipografia, preço,
   endereço e CTA nunca recebem blur.                                       */

/* PLANO 02 — a sala real da loja. O desfoque não é maquiagem: é o plano de
   fundo de uma cena, e é ele que dá a sensação de estar dentro da loja. */
.hero__sala{
  position:absolute;top:-6%;left:50%;width:158%;max-width:780px;z-index:0;
  transform:translate(-50%,var(--py,0));
  pointer-events:none;
  opacity:.30;
  filter:blur(15px) saturate(.78);
  -webkit-mask-image:radial-gradient(70% 58% at 50% 32%, #000 8%, rgba(0,0,0,.42) 56%, transparent 80%);
  mask-image:radial-gradient(70% 58% at 50% 32%, #000 8%, rgba(0,0,0,.42) 56%, transparent 80%);
}
.hero__sala img{width:100%}

/* halo da luminária: mesma faixa quente do teto da loja */
.hero__luz{
  position:absolute;inset:-14% -20% auto -20%;height:60%;pointer-events:none;z-index:1;
  background:radial-gradient(46% 62% at 50% 0%, rgba(243,226,172,.13), transparent 68%);
}

/* PLANO 03 — o produto do combo de R$ 99,90, cortado pela borda da tela.
   Fica ATRÁS da tipografia de propósito: é profundidade, não decoração. */
.hero__produto{
  position:absolute;top:14px;right:-52px;width:152px;z-index:1;
  transform:translateY(var(--pp,0)) rotate(-3.5deg);
  pointer-events:none;
  opacity:.58;
  filter:blur(.7px);
  -webkit-mask-image:radial-gradient(72% 60% at 62% 42%, #000 14%, rgba(0,0,0,.55) 56%, transparent 84%);
  mask-image:radial-gradient(72% 60% at 62% 42%, #000 14%, rgba(0,0,0,.55) 56%, transparent 84%);
}
.hero__produto img{width:100%}
/* grão discreto — a arte do feed é impressa, não vetorial */
.hero__grao{
  position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* VÉU — fica entre o produto e a tipografia. Sem ele a camisa branca sobe o
   fundo atrás da headline e o contraste cai de 17:1 para ~3,6:1. É o véu que
   permite ter foto atrás do texto sem perder legibilidade. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(84% 42% at 44% 56%, rgba(11,10,7,.90) 0%, rgba(11,10,7,.52) 54%, transparent 86%),
    linear-gradient(180deg, transparent 52%, rgba(11,10,7,.72) 88%, var(--bg) 100%);
}

/* PLANOS 04 e 05 — medalhão, tipografia e CTA. Sempre nítidos, sempre na frente. */
.hero__in{position:relative;z-index:2;text-align:center}

/* medalhão: o círculo do logo com o anel duplo real da marca */
.selo{position:relative;width:108px;height:108px;margin:0 auto var(--s4)}
.selo img{width:100%;height:100%;border-radius:50%}
.selo__anel{
  position:absolute;inset:-9px;border-radius:50%;
  background:conic-gradient(from 210deg,transparent 0deg,var(--gold-1) 42deg,var(--gold-3) 96deg,transparent 168deg,transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
}
/* O anel do logo da dhdesignia gira em looping infinito. Aqui ele dá UMA
   volta na entrada e para: a identidade de movimento desta página é "a luz
   que acende", não "a luz que roda o dia inteiro". A curva da página faz a
   luz correr rápido e assentar. */
.hero .selo__anel{animation:voltaLuz 1.5s var(--ease) .3s 1 backwards}
@keyframes voltaLuz{
  from{transform:rotate(-30deg);opacity:0}
  25% {opacity:1}
  to  {transform:rotate(330deg);opacity:1}
}
/* a face do medalhão inclina com o cursor — objeto de metal ganha superfície.
   Só com mouse; o JS escreve os ângulos. */
.selo img{transition:transform .18s var(--ease)}
.selo::after{ /* sombra de contato: cola o medalhão na parede */
  content:"";position:absolute;left:12%;right:6%;bottom:-13px;height:20px;
  background:radial-gradient(58% 100% at 48% 0%,hsl(var(--sh)/.75),transparent 72%);
  filter:blur(7px);
}

.hero__eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-2);margin-bottom:var(--s3);
}
.hero__h1{
  font-size:clamp(2.7rem,13.6vw,3.9rem);line-height:.98;letter-spacing:-.025em;
  margin-bottom:var(--s3);
}
.hero__h1 .line{display:block;overflow:hidden}
.hero__sub{color:var(--muted);margin:0 auto var(--s4);max-width:30ch;font-size:.97rem}

/* faixa de fatos — só dados verificáveis do perfil, em uma linha só:
   três chips soltos e centralizados ficavam escalonados e sujos */
.fatos{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:400px;margin:0 auto var(--s5);
  border:1px solid var(--border);border-radius:var(--r-toque);
  background:var(--surface);overflow:hidden;
}
.fato{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 6px;font-size:.68rem;color:var(--muted);line-height:1.25;text-align:center;
}
.fato + .fato{border-left:1px solid var(--border)}
.fato b{color:var(--text);font-weight:700;font-size:.83rem}
.fato .pt{display:none}

.hero__acoes{display:grid;gap:var(--s2)}

/* ------------------------------- BOTÕES ---------------------------------- */
/* Todo botão tem duas linhas: o verbo e o que acontece depois do toque. */
.btn{
  position:relative;display:flex;align-items:center;gap:var(--s3);
  width:100%;min-height:62px;padding:0 var(--s3) 0 var(--s4);
  border-radius:var(--r-toque);text-align:left;overflow:hidden;
  transition:transform .09s ease,box-shadow .09s ease,background .15s ease;
}
.btn__txt{display:flex;flex-direction:column;min-width:0;flex:1}
.btn__txt strong{font-size:.93rem;font-weight:700;letter-spacing:.06em;line-height:1.15;text-transform:uppercase}
.btn__txt small{font-size:.755rem;font-weight:400;line-height:1.3;opacity:.78;margin-top:2px}
.btn .ico{width:22px;height:22px;flex:none;fill:currentColor}
.btn .ico--seta{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.btn:active{transform:translateY(2px)}

/* ============================================================
   CTA PRIMÁRIO — "o ouro pega a luz"

   O botão é uma peça de metal na parede escura, sob a mesma luminária
   que ilumina a página. Por isso nada aqui pisca, pulsa ou dá zoom:
   o que se move é a LUZ sobre o metal, e o metal quando é pressionado.
   Quatro comportamentos, cada um com uma função:
     1. entrada  — a luz cruza a peça uma única vez
     2. ponteiro — o ouro reflete onde o cursor está (só mouse)
     3. toque    — o metal afunda e a luz escorrega para a borda de baixo
     4. pulso    — um clarão nasce exatamente no ponto tocado
   ============================================================ */
.btn--primary{
  color:#17130A;
  background:linear-gradient(160deg,#F0DCA0 0%,#D9B65C 44%,#B08F3C 100%);
  box-shadow:var(--elev-3),var(--realce),inset 0 -1px 0 rgba(60,42,10,.4);
  transition:transform .12s var(--ease),box-shadow .18s var(--ease);
}
/* o conteúdo fica acima das camadas de luz */
.btn__txt,.btn .ico{position:relative;z-index:2}
.btn__brilho{z-index:1}

/* 2. REFLEXO DO PONTEIRO — o metal responde à posição da luz.
      Só em aparelho com mouse: no celular quem faz esse papel é o toque. */
.btn--primary::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(140px 140px at var(--mx,50%) var(--my,50%),
             rgba(255,251,236,.5), rgba(255,251,236,0) 72%);
  opacity:0;transition:opacity .24s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover::before{opacity:1}
  .btn--primary:hover{transform:translateY(-1px)}
  .btn--primary:hover .ico--seta{transform:translateX(3px)}
}

/* 3. TOQUE — a peça afunda 2px e encolhe quase nada. O realce sai do topo
      e vai para a base: sob luz de cima, uma superfície pressionada acende
      a borda oposta. É física, não enfeite. */
.btn--primary:active{
  transform:translateY(2px) scale(.988);
  box-shadow:var(--elev-1),
             inset 0 -1px 0 rgba(255,240,200,.30),
             inset 0 2px 4px rgba(60,42,10,.38);
}
.btn--primary:active .ico--seta{transform:translateX(3px)}
.btn .ico--seta{transition:transform .16s var(--ease)}

/* 4. PULSO DE LUZ — nasce no ponto exato do toque (js/main.js escreve --rx/--ry)
      e se abre uma vez. Confirma que o toque foi reconhecido. */
.btn--primary::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:var(--rx,50%);top:var(--ry,50%);
  width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,251,236,.95),rgba(255,251,236,0) 70%);
  opacity:0;
}
.btn--primary.is-tocado::after{animation:pulsoLuz .56s var(--ease)}
/* a luz se abre rápido (é luz) mas só apaga no fim — sem o degrau de
   opacidade no meio, a curva da página apaga o pulso em 120ms e ele vira
   um piscar em vez de um clarão que atravessa a peça */
@keyframes pulsoLuz{
  0%  {opacity:.85;transform:scale(1)}
  40% {opacity:.46}
  100%{opacity:0;transform:scale(18)}
}

.btn--primary .btn__txt small{opacity:.72}

/* 1. ENTRADA — brilho especular cruzando a peça uma vez, com a curva da
      página. Entra depois do botão já formado, nunca em laço. */
.btn__brilho{position:absolute;top:0;left:-65%;width:42%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,248,225,.62),transparent);transform:skewX(-18deg)}
.is-in .btn__brilho{animation:brilha .9s var(--ease) .22s 1}
.hero .btn__brilho{animation:brilha .9s var(--ease) 1.05s 1}
@keyframes brilha{from{left:-65%}to{left:135%}}

.btn--ghost{
  color:var(--text);background:var(--surface);
  border:1px solid var(--border-2);box-shadow:var(--elev-1);
}
.btn--ghost .ico{fill:none;stroke:var(--gold-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn--ghost:active{background:var(--surface-2)}

.btn--compact{min-height:54px;padding:0 var(--s3);gap:var(--s2)}
.btn--compact .btn__txt strong{font-size:.85rem}
.btn--compact .btn__txt small{font-size:.72rem}

/* ---------------------------- FAIXA DE SELOS ----------------------------- */
/* Os quatro selos são copy da própria loja (post dos 2.000 seguidores). */
/* ---- FAIXA DE PROMOÇÃO (letreiro) ----
   Mesma mecânica do ticker da dhdesignia: dois conjuntos idênticos correndo
   de 0 a -50%, sem emenda. Lá a faixa é vermelha e sólida; aqui ela é ESCURA
   com o texto em ouro — uma faixa dourada cheia brigaria com o CTA primário,
   e nada pode disputar com ele. O separador é a coroa do logo. */
.faixa{
  position:relative;overflow:hidden;padding:11px 0;
  background:linear-gradient(180deg,#14110C,#0E0C08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* filete de ouro em cima e embaixo — as duas linhas do anel do medalhão */
.faixa::before,.faixa::after{
  content:"";position:absolute;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold-4) 14%,var(--gold-3) 50%,var(--gold-4) 86%,transparent);
}
.faixa::before{top:0}
.faixa::after{bottom:0}

.faixa__trilho{display:flex;width:max-content;will-change:transform}
.faixa__trilho.is-correndo{animation:faixaCorre 30s linear infinite}
.faixa:hover .faixa__trilho{animation-play-state:paused}
@keyframes faixaCorre{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
.faixa__set{display:flex;align-items:center;gap:16px;padding-right:16px;white-space:nowrap;flex:0 0 auto}
.f-item{font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-2)}
.f-coroa{width:13px;height:10px;fill:var(--gold-4);flex:none}

/* continuidade: as faixas nao tem linha divisoria, elas dissolvem no fundo */
.selos{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 14%,var(--bg-2) 86%,var(--bg) 100%)}
.selos__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;padding-block:0;background:var(--border)}
.selos__grid > *{background:var(--bg-2);padding:var(--s4) var(--s3);text-align:center}
.selo-i .ico{width:24px;height:24px;margin:0 auto 9px;fill:none;stroke:var(--gold-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.selo-i strong{display:block;font-size:.83rem;font-weight:700;letter-spacing:.04em}
.selo-i span{display:block;font-size:.73rem;color:var(--muted);margin-top:2px}

/* ------------------------------ CARTAZES --------------------------------- */
.cartazes{display:grid;gap:var(--s5)}

.cartaz{position:relative;padding:1.5px;border-radius:var(--arco);background:var(--filete);box-shadow:var(--elev-2)}
.cartaz__in{border-radius:var(--arco-in);overflow:hidden;background:var(--surface)}
.cartaz__foto{position:relative;aspect-ratio:1;overflow:hidden;background:#0D0B08}
.cartaz__foto--larga{aspect-ratio:16/9}
.cartaz__foto img{width:100%;height:100%;object-fit:cover;object-position:center}
.cartaz__foto::after{ /* vinheta: a foto entra na sala, não flutua */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,7,.30) 0%,transparent 30%,rgba(11,10,7,.72) 100%);
}
/* a etiqueta mora embaixo: em cima ela brigaria com a curva do arco */
.tag{
  position:absolute;bottom:var(--s3);left:var(--s3);z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(11,10,7,.74);border:1px solid var(--border-2);color:var(--gold-1);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.tag--ouro{background:linear-gradient(160deg,#F0DCA0,#C9A44E);color:#17130A;border-color:transparent}
.tag .coroa{width:13px;height:10px;fill:currentColor}

.cartaz__corpo{padding:var(--s4) var(--s4) var(--s4)}
.cartaz__nome{font-size:1.42rem;line-height:1.12;margin-bottom:var(--s2)}
.atributos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s4)}
.atributos li{
  font-size:.72rem;color:var(--muted);
  padding:4px 9px;border:1px solid var(--border);border-radius:5px;background:var(--bg-2);
}
.cartaz__pe{display:grid;gap:var(--s3);align-items:end}

/* preço: o maior elemento do card, igual aos cartazes do feed.
   Moeda e centavos alinham pelo TOPO do numeral (sobrescrito), que é como
   a própria loja estampa "R$ 99,90" na arte. */
/* width:max-content é necessário: o "carimbo" do preço é um scale, e sobre
   uma caixa de largura total ele cresceria 58px para fora do card */
.preco{display:flex;align-items:flex-start;gap:5px;width:max-content;max-width:100%}
.preco__cur{font-size:1.1rem;font-weight:700;color:var(--gold-3);margin-top:.34em;line-height:1}
.preco__int{font-size:3.55rem;line-height:.86;letter-spacing:-.035em}
.preco__cent{font-size:1.35rem;line-height:1;margin-top:.28em}
.preco--duplo{display:grid;gap:4px;width:max-content;max-width:100%}
.preco--duplo .l{display:block;font-size:1.85rem;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}

.ressalva{
  display:flex;gap:var(--s2);margin-top:var(--s5);
  padding:var(--s3);border-radius:var(--r-toque);
  background:var(--bg-2);border:1px solid var(--border);
  font-size:.8rem;color:var(--muted);
}
.ressalva .ico{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--gold-3);stroke-width:1.7;stroke-linecap:round}

/* ------------------------- DENTRO DA LOJA (feature) ---------------------- */
.feature{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 10%,var(--bg-2) 90%,var(--bg) 100%)}
.feature__foto{
  position:relative;border-radius:var(--arco);overflow:hidden;
  margin-bottom:var(--s5);box-shadow:var(--elev-2);border:1.5px solid transparent;
  background:var(--filete);padding:1.5px;
}
.feature__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--arco-in)}
.feature__h2{font-size:clamp(1.95rem,8.6vw,2.5rem);line-height:1.04;margin-bottom:var(--s3)}
.feature p{color:var(--muted);margin-bottom:var(--s4)}
/* a frase que a própria loja publicou, tratada como inscrição */
.inscricao{
  position:relative;padding:var(--s4) 0 var(--s4) var(--s4);
  border-left:1px solid var(--border-2);margin-bottom:var(--s5);
}
.inscricao q{
  display:block;quotes:none;
  font-family:"Playfair Display",Georgia,serif;font-size:1.08rem;line-height:1.5;
  color:var(--text);font-style:italic;
}
.inscricao cite{
  display:block;font-style:normal;font-size:.7rem;font-weight:700;
  letter-spacing:.2em;color:var(--gold-3);margin-top:var(--s2);
}

/* ------------------------------ CATEGORIAS ------------------------------- */
.cats{border-top:1px solid var(--border)}
.cat{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) 0;border-bottom:1px solid var(--border);
  transition:background .12s ease,padding-left .16s var(--ease);
}
.cat:nth-child(even){background:rgba(217,182,92,.022)}
.cat:active{background:rgba(217,182,92,.06);padding-left:6px}
.cat__n{
  font-size:1.55rem;line-height:1;color:transparent;flex:none;width:2.1ch;
  -webkit-text-stroke:1px var(--gold-3);
}
.cat__txt{flex:1;min-width:0}
.cat__txt strong{display:block;font-size:1.02rem;font-weight:600}
.cat__txt span{display:block;font-size:.78rem;color:var(--muted)}
.cat .ico{width:19px;height:19px;flex:none;fill:none;stroke:var(--gold-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}

/* --------------------------------- PROVA --------------------------------- */
.prova{background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 10%,var(--bg-2) 90%,var(--bg) 100%)}
/* ---- CARROSSEL DO FEED ----
   Mecânica emprestada do carrossel da dhdesignia: trilho duplicado correndo
   em looping por CSS, arraste por ponteiro, pílula "ARRASTE" com ponto vivo.
   A APARÊNCIA é desta marca: arco pequeno e filete de ouro, sem a inclinação
   3D deles — aquilo é assinatura da marca deles, não desta. */
.carrossel{margin-bottom:var(--s4)}

.pilula{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:var(--s3);padding:6px 12px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.pilula__ponto{
  width:7px;height:7px;border-radius:50%;background:var(--gold-2);flex:none;
  animation:pontoVivo 1.9s ease-in-out infinite;
}
@keyframes pontoVivo{
  0%,100%{opacity:.45;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.25)}
}
.pilula__acao{color:var(--gold-2)}
.pilula__acao span{letter-spacing:.04em}

.carrossel__janela{
  position:relative;overflow:hidden;cursor:grab;
  /* as pontas dissolvem na parede em vez de serem cortadas a faca */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.carrossel__janela.is-arrastando{cursor:grabbing}
.carrossel__janela.is-arrastando .post{pointer-events:none}

.carrossel__trilho{display:flex;width:max-content;will-change:transform}
.carrossel__trilho.is-correndo{animation:feedCorre 42s linear infinite}
.carrossel__janela:hover .carrossel__trilho,
.carrossel__janela.is-parado .carrossel__trilho{animation-play-state:paused}
@keyframes feedCorre{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}

.post{
  position:relative;flex:0 0 auto;
  width:132px;height:176px;margin-right:var(--s2);
  border-radius:var(--arco-sm);overflow:hidden;
  border:1px solid var(--border-2);box-shadow:var(--elev-1);
  background:var(--surface);
}
.post img{width:100%;height:100%;object-fit:cover}
.post::after{ /* mesma vinheta dos cartazes: a foto senta no plano */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(11,10,7,.55) 100%);
}
.post:active{transform:translateY(1px)}

.post--fim{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(168deg,var(--surface-2),var(--surface));
  text-align:center;
}
.post--fim::after{display:none}
.post__mais{
  font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.9rem;line-height:1;
  background:linear-gradient(158deg,var(--gold-1),var(--gold-2) 45%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.post__rot{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.35}
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.num{padding:var(--s3);border:1px solid var(--border);border-radius:var(--r-toque);background:var(--surface)}
.num__v{display:block;font-size:1.85rem;line-height:1.05;letter-spacing:-.02em}
.num__l{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}

/* ------------------------------ LOCALIZAÇÃO ------------------------------ */
/* ---- MAPA ----
   O mapa é o vão iluminado da parede: moldura em arco com filete de ouro,
   conteúdo claro por dentro. Não é filtrado — a marca do Google fica como
   ela é, e o contraste com o preto é intencional, não acidente. */
.mapa{margin:0 0 var(--s4)}
.mapa__moldura{
  /* mesmo arco da placa logo acima: os dois blocos leem como um par —
     a porta e o que se vê através dela */
  position:relative;padding:1.5px;border-radius:var(--portal);
  background:var(--filete);box-shadow:var(--elev-2);
  /* overflow + translateZ: sem os dois o documento do iframe pinta por cima
     do border-radius e o arco não recorta o mapa */
  overflow:hidden;transform:translateZ(0);
}
.mapa__frame{
  display:block;width:100%;height:252px;border:0;
  border-radius:var(--portal-in);background:#1B1710;
  /* travado até o visitante liberar: o dedo rola a página, não o mapa */
  pointer-events:none;
}
.mapa.is-livre .mapa__frame{pointer-events:auto}
/* oclusão nas bordas: encaixa o vão claro na parede escura */
.mapa__moldura::after{
  content:"";position:absolute;inset:1.5px;border-radius:var(--portal-in);
  pointer-events:none;z-index:2;
  box-shadow:inset 0 0 22px 6px rgba(11,10,7,.34);
}

.mapa__capa{
  position:absolute;inset:1.5px;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  border-radius:var(--portal-in);
  background:linear-gradient(180deg,rgba(11,10,7,.58),rgba(11,10,7,.80));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  color:var(--text);text-align:center;padding:var(--s4);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.mapa.is-livre .mapa__capa{opacity:0;transform:scale(1.04);pointer-events:none}
.mapa__capa:active{transform:scale(.985)}
.mapa__pino{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:linear-gradient(160deg,#F0DCA0,#D9B65C 46%,#B08F3C);
  box-shadow:var(--elev-2),var(--realce);
}
.mapa__pino svg{width:22px;height:16px;fill:#17130A}
/* a coroa assenta uma vez quando a seção entra — mesmo gesto do medalhão */
.is-in .mapa__pino{animation:assenta .62s var(--ease) .18s backwards}
@keyframes assenta{
  0%{transform:translateY(-14px) scale(.86);opacity:0}
  60%{transform:translateY(0) scale(1.04);opacity:1}
  100%{transform:none;opacity:1}
}
.mapa__txt strong{display:block;font-size:.9rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.mapa__txt small{display:block;font-size:.76rem;color:var(--muted);margin-top:3px}

.local__nota{display:flex;gap:var(--s2);font-size:.8rem;color:var(--muted);margin-bottom:var(--s4)}
.local__nota .ico{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--gold-3);stroke-width:1.7;stroke-linecap:round}
.local__acoes{display:grid;gap:var(--s2)}

/* --------------------------------- REDES --------------------------------- */
.redes{display:grid;gap:var(--s2)}
.rede{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-radius:var(--r-toque);
  background:var(--surface);border:1px solid var(--border);
}
.rede:active{background:var(--surface-2)}
.rede .ico{width:22px;height:22px;flex:none;fill:var(--gold-2)}
.rede__txt{flex:1}
.rede__txt strong{display:block;font-size:.92rem;font-weight:600}
.rede__txt span{display:block;font-size:.76rem;color:var(--muted)}
.rede .ico--seta{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------- RODAPÉ -------------------------------- */
.rodape{
  text-align:center;padding:var(--s6) 0 calc(var(--s7) + 76px);
  border-top:1px solid var(--border);background:var(--bg);
}
.rodape__selo{width:64px;height:64px;margin:0 auto var(--s3);border-radius:50%;border:1px solid var(--border-2)}
.rodape__nome{font-size:.78rem;font-weight:700;letter-spacing:.24em;color:var(--gold-2);margin-bottom:var(--s2)}
.rodape p{font-size:.8rem;color:var(--muted);line-height:1.7}
.rodape .assina{margin-top:var(--s4);font-size:.72rem;color:#8A8172}  /* 5,15:1 sobre o fundo */

/* ------------------------------- CTA FIXO -------------------------------- */
.fixo{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px calc(14px + env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-right));
  background:linear-gradient(180deg,rgba(11,10,7,.72),rgba(11,10,7,.97));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--border-2);
  transform:translateY(120%);transition:transform .34s var(--ease);
}
.fixo.is-on{transform:translateY(0)}
.fixo .btn{max-width:var(--wrap);margin-inline:auto;min-height:58px}
/* a luz cruza a barra fixa UMA vez, na primeira vez que ela sobe.
   Sem a classe is-estreou ela não repete a cada rolagem para cima e para baixo. */
.fixo .btn__brilho{animation:none}
.fixo.is-estreou .btn__brilho{animation:brilha .9s var(--ease) .16s 1}

/* ------------------------------- ANIMAÇÃO -------------------------------- */
/* Identidade de movimento: "a luz que acende". Nada desliza de lado;
   os blocos resolvem do escuro para o claro, com o filete acendendo antes.
   Só opacity e transform — e o alvo observado nunca é recortado. */
[data-anim]{opacity:0}
[data-anim="up"]{transform:translateY(14px)}
[data-anim="mask"]{opacity:1}
[data-anim="mask"] > span{display:block;transform:translateY(104%)}
[data-anim="selo"]{transform:scale(1.14) rotate(-3deg);filter:blur(6px)}
[data-anim="preco"]{transform:scale(1.18);transform-origin:left bottom}

@keyframes entra{to{opacity:1;transform:none}}
@keyframes sobe{to{transform:none}}
@keyframes carimba{to{opacity:1;transform:none;filter:blur(0)}}

.hero [data-anim]{animation:entra .62s var(--ease) var(--d,0s) forwards}
.hero [data-anim="selo"]{animation:carimba .66s var(--ease) var(--d,0s) forwards}
.hero [data-anim="mask"]{animation:none}
.hero [data-anim="mask"] > span{animation:sobe .68s var(--ease) var(--d,0s) forwards}

.is-in[data-anim="up"]{animation:entra .58s var(--ease) var(--d,0s) forwards}
.is-in[data-anim="preco"]{animation:entra .42s var(--ease) var(--d,.26s) forwards}
.is-in[data-anim="mask"] > span{animation:sobe .62s var(--ease) var(--d,0s) forwards}

@media (prefers-reduced-motion:reduce){
  [data-anim]{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  [data-anim="mask"] > span{transform:none!important;animation:none!important}
  .luz{transform:scaleX(1)!important;animation:none!important}
  /* a luz decorativa sai; o FEEDBACK DE TOQUE fica, porque não é enfeite:
     é como o usuário sabe que o botão respondeu */
  .btn__brilho{display:none}
  .btn--primary::after,.btn--primary::before{display:none}
  .btn--primary:active{transform:translateY(2px)!important}
  /* parallax desligado; os planos ficam, porque são composição e não movimento */
  .hero__sala{transform:translate(-50%,0)!important}
  .hero__produto{transform:rotate(-3.5deg)!important}
  /* a capa do mapa continua funcionando: só perde o assentamento da coroa */
  .mapa__pino{animation:none!important}
  .mapa__capa{transition:none!important}
  /* o letreiro para de correr, mas o texto continua legível parado */
  .faixa__trilho{animation:none!important}
  .pilula__ponto{animation:none!important;opacity:1}
  .selo__anel{animation:none!important;opacity:1}
  .selo img{transition:none!important}
  /* o carrossel perde o autoplay e vira rolagem horizontal manual —
     o conteúdo continua todo acessível, só não anda sozinho */
  .carrossel__trilho{animation:none!important;transform:none!important}
  .carrossel__janela{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ------------------------------ DESKTOP ---------------------------------- */
/* O desktop ganha respiro e duas colunas onde faz sentido. Continua sendo
   o mesmo produto: nada estica, a coluna de leitura não cresce. */
@media (min-width:700px){
  :root{--wrap:680px}
  .hero{padding-top:calc(env(safe-area-inset-top) + 56px)}
  .selo{width:150px;height:150px}
  .hero__h1{font-size:4.4rem}
  /* um único CTA no hero: coluna só, largura contida para não esticar */
  .hero__acoes{max-width:440px;margin-inline:auto}
  .selos__grid{grid-template-columns:repeat(4,1fr)}
  .cartazes{gap:var(--s6)}
  .cartaz__corpo{padding:var(--s5)}
  .cartaz__pe{grid-template-columns:auto 1fr;gap:var(--s4)}
  .cartaz__pe .btn{max-width:330px;justify-self:end}
  .feature__foto img{aspect-ratio:16/9}
  .mapa__frame{height:330px}
  .local__acoes{grid-template-columns:1fr 1fr}
  .redes{grid-template-columns:1fr}
  .secao__h2{font-size:3rem}
}

/* "COMPRAR NO WHATSAPP" quebrava em duas linhas abaixo de ~380px.
   Aperta o tracking do rótulo, nunca a altura do botão nem o corpo do texto. */
@media (max-width:380px){
  .btn__txt strong{letter-spacing:.03em;font-size:.895rem}
}

/* telas muito estreitas: nada de reduzir botão nem corpo de texto */
@media (max-width:359px){
  :root{--s7:52px;--s6:38px}
  .selo{width:104px;height:104px}
  .hero__h1{font-size:2.4rem}
  .preco__int{font-size:3.1rem}
  .btn{padding-left:var(--s3)}
  .btn__txt small{font-size:.72rem}
}

/* telas baixas: encolhe o hero para o CTA caber na primeira dobra */
@media (max-width:699px) and (max-height:700px){
  .hero{padding-top:calc(env(safe-area-inset-top) + 20px);padding-bottom:var(--s5)}
  .selo{width:96px;height:96px;margin-bottom:var(--s3)}
  .hero__h1{font-size:2.5rem}
  .hero__sub{margin-bottom:var(--s3)}
  .fatos{margin-bottom:var(--s4)}
}