/* frofertas — a vitrine pública.

   Mesma identidade do painel (fundo frio, laranja como única cor quente), com
   uma ideia própria: cada botão é um CUPOM. Recorte picotado nas laterais,
   canhoto colorido pela rede, tracejado separando os dois. A página existe para
   juntar gente que quer cupom — o formato diz isso antes de qualquer texto.

   A cor saturada só aparece no canhoto, e significa QUAL APLICATIVO. Mesma
   regra do resto do sistema: cor é informação, nunca decoração. */

:root{
  --breu:   #0a0c10;
  --carvao: #12151c;
  --fumaca: #1a1f29;
  --traco:  #232936;

  --giz:    #e9ecf2;
  --cinza:  #7e8798;
  --sombra: #4a5262;

  --brasa:  #ff6b1a;
  --ascua:  #ffb03a;

  --codigo: "Martian Mono", ui-monospace, Consolas, monospace;
  --texto:  Archivo, "Segoe UI", system-ui, sans-serif;
}

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

html{ color-scheme: dark }

body{
  margin: 0;
  min-height: 100vh;
  background: var(--breu);
  color: var(--giz);
  font: 400 16px/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
  /* brasa fraquinha vindo de cima, como um refletor sobre a banca */
  background-image: radial-gradient(120% 55% at 50% -10%, #1c1206 0%, transparent 60%);
  background-repeat: no-repeat;
}

a{ color: inherit }
h1, h2, h3, p, ol, ul{ margin: 0 }
/* Lista aqui é estrutura, não marcador: as lojas são chips e os passos têm o
   próprio número em bolinha. Sem este reset o navegador desenha o dele por
   cima — e nos passos apareceriam DOIS números. */
ol, ul{ padding: 0; list-style: none }

:focus-visible{ outline: 2px solid var(--ascua); outline-offset: 3px }

.palco{
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 0 1.1rem 3rem;
}


/* ── capa: banner, retrato, nome, chamada ─────────────────────────────── */

.capa{ text-align: center; margin-bottom: 2.25rem }

.capa-faixa{
  display: block;
  width: calc(100% + 2.2rem);
  margin: 0 -1.1rem;
  height: 9.5rem;
  object-fit: cover;
  /* desbota na base para o retrato pousar sem costura visível */
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.capa-vazia{
  height: 7rem;
  background: linear-gradient(160deg, #221507, #0d1016 70%);
}

.retrato{
  display: block;
  width: 6rem;
  height: 6rem;
  margin: -3.25rem auto 0;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--breu);
  outline: 2px solid var(--brasa);
  outline-offset: -5px;
  background: var(--carvao);
  position: relative;
}
.retrato-vazio{
  display: grid;
  place-items: center;
  font: 700 1.9rem/1 var(--codigo);
  letter-spacing: -.06em;
  color: var(--brasa);
}

.nome{
  margin-top: .9rem;
  font: 700 1.65rem/1 var(--codigo);
  letter-spacing: -.06em;
}
.nome-fr{ color: var(--brasa) }

.chamada{
  margin: .8rem auto 0;
  max-width: 27rem;
  color: var(--cinza);
  font-size: .95rem;
  text-wrap: pretty;
}


/* ── seção: o título com filete dos dois lados ────────────────────────── */

.grupo{ margin-bottom: 1.9rem }

.grupo-nome{
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .85rem;
  font: 600 .68rem/1 var(--codigo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sombra);
}
.grupo-nome::before,
.grupo-nome::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--traco);
}


/* ── o cupom ──────────────────────────────────────────────────────────── */

.bilhete{
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: center;
  gap: .9rem;
  margin-bottom: .65rem;
  padding: .8rem .95rem .8rem 0;
  background: var(--carvao);
  border: 1px solid var(--traco);
  border-radius: 12px;
  text-decoration: none;
  transition: transform .16s, border-color .16s, background .16s;
}

/* Os recortes laterais: dois círculos da cor do fundo mordendo a borda.
   É o que faz o retângulo virar cupom sem imagem nenhuma. */
.bilhete::before,
.bilhete::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--breu);
  border: 1px solid var(--traco);
  transform: translateY(-50%);
}
.bilhete::before{ left: -8px; clip-path: inset(0 0 0 50%) }
.bilhete::after { right: -8px; clip-path: inset(0 50% 0 0) }

.bilhete:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--rede) 45%, var(--traco));
  background: var(--fumaca);
}
.bilhete:active{ transform: translateY(0) }

/* canhoto: a parte destacável, separada por picote */
.canhoto{
  display: grid;
  place-items: center;
  align-self: stretch;
  border-right: 1px dashed var(--traco);
  color: var(--rede);
}
.canhoto svg{ width: 22px; height: 22px; fill: currentColor; display: block }

.bilhete-texto{ display: flex; flex-direction: column; gap: .1rem; min-width: 0 }
.bilhete-rede{
  font: 600 .95rem/1.2 var(--texto);
  letter-spacing: -.01em;
}
.bilhete-acao{
  font: 400 .72rem/1.35 var(--codigo);
  letter-spacing: .02em;
  color: var(--sombra);
}

.bilhete-seta{
  color: var(--sombra);
  font-size: 1rem;
  transition: transform .16s, color .16s;
}
.bilhete:hover .bilhete-seta{ transform: translateX(3px); color: var(--rede) }


/* entrada escalonada: os cupons caem na mesa um atrás do outro */
@keyframes assentar{
  from{ opacity: 0; transform: translateY(10px) }
  to  { opacity: 1; transform: none }
}
.bilhete{
  opacity: 0;
  animation: assentar .45s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: var(--atraso, 0ms);
}


/* ── rodapé ───────────────────────────────────────────────────────────── */

.rodape{ margin-top: 2.5rem; text-align: center }
.rodape-marca{
  font: 400 .72rem/1 var(--codigo);
  letter-spacing: -.02em;
  color: var(--sombra);
}

.sem-nada{ padding: 3rem 0; text-align: center; color: var(--sombra) }


@media (max-width: 380px){
  .bilhete{ grid-template-columns: 3rem 1fr auto; gap: .7rem }
  .nome{ font-size: 1.4rem }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
  .bilhete{ opacity: 1 }
}


/* ── lojas: informação, não enfeite ───────────────────────────────────── */

/* A fileira de lojas e a mesma nas duas abas: na home leva para os cupons da
   loja, na aba de cupons e o filtro. So o estado muda. */
.lojas{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  margin-top: 1.1rem;
}
.loja-chip{
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .26rem .65rem;
  border: 1px solid var(--traco);
  border-radius: 99px;
  font: 400 .72rem/1.5 var(--codigo);
  letter-spacing: -.02em;
  color: var(--cinza);
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.loja-chip:hover{ border-color: var(--loja, var(--tracoo)); color: var(--giz) }
.loja-chip.atual{
  background: var(--fumaca);
  border-color: var(--loja, var(--tracoo));
  color: var(--giz);
}
.loja-chip b{
  font-size: .64rem;
  font-weight: 600;
  color: var(--sombra);
  font-variant-numeric: tabular-nums;
}
.loja-chip.atual b{ color: var(--loja, var(--brasa)) }


/* ── o texto: quem chega decide se entra, o buscador entende a página ── */

.prosa{
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--traco);
}
.prosa h2{
  margin: 2rem 0 .7rem;
  font: 600 1.02rem/1.3 var(--texto);
  letter-spacing: -.02em;
}
.prosa h2:first-child{ margin-top: 0 }
.prosa p{
  margin-bottom: .8rem;
  color: var(--cinza);
  font-size: .92rem;
  text-wrap: pretty;
}
.prosa strong{ color: var(--giz); font-weight: 600 }

.passos{ counter-reset: passo }
.passos li{
  position: relative;
  padding-left: 2rem;
  margin-bottom: .7rem;
  color: var(--cinza);
  font-size: .92rem;
}
.passos li::before{
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--traco);
  font: 600 .68rem/1 var(--codigo);
  color: var(--brasa);
}
.passos b{ color: var(--giz); font-weight: 600 }

.pergunta{
  border-bottom: 1px solid var(--traco);
  padding: .1rem 0;
}
.pergunta summary{
  padding: .75rem 1.6rem .75rem 0;
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.pergunta summary::-webkit-details-marker{ display: none }
.pergunta summary::after{
  content: "+";
  position: absolute;
  right: .2rem;
  top: .7rem;
  color: var(--brasa);
  font: 400 1.1rem/1 var(--codigo);
}
.pergunta[open] summary::after{ content: "\2212" }
.pergunta summary:hover{ color: var(--ascua) }
.pergunta p{ margin: 0 0 .9rem; font-size: .88rem }


/* ── rodapé ───────────────────────────────────────────────────────────── */

.aviso-afiliado{
  margin: 0 auto 1rem;
  max-width: 26rem;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--sombra);
  text-wrap: pretty;
}


/* ── abas: grupos e cupons ────────────────────────────────────────────── */

.abas-publicas{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  margin: 0 0 1.75rem;
  padding: .25rem;
  background: var(--carvao);
  border: 1px solid var(--traco);
  border-radius: 11px;
}
.aba-publica{
  padding: .55rem;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font: 600 .8rem/1.2 var(--codigo);
  letter-spacing: -.02em;
  color: var(--sombra);
  transition: background .15s, color .15s;
}
.aba-publica:hover{ color: var(--cinza) }
.aba-publica.atual{ background: var(--fumaca); color: var(--giz) }


/* ── cabeçalho da lista ───────────────────────────────────────────────── */

.cabecalho-lista{ text-align: center; margin-bottom: 1.1rem }
.titulo-lista{ font: 700 1.45rem/1.15 var(--texto); letter-spacing: -.03em }
.sub-lista{ margin-top: .3rem; font: 400 .8rem/1 var(--codigo); color: var(--sombra) }
.sub-lista i{ color: var(--traco); font-style: normal; margin: 0 .2rem }


/* ── a página de um cupom ─────────────────────────────────────────────── */

.migalhas{
  margin-bottom: .9rem;
  font: 400 .74rem/1 var(--codigo);
  color: var(--sombra);
}
.migalhas a{ text-decoration: none }
.migalhas a:hover{ color: var(--giz) }
.migalhas span{ margin: 0 .3rem; color: var(--traco) }

.ficha-cupom{
  background: var(--carvao);
  border: 1px solid var(--traco);
  border-top: 3px solid var(--loja, var(--brasa));
  border-radius: 12px;
  padding: 1.4rem 1.25rem;
  margin-bottom: 2rem;
}
.alerta-velho{
  margin-bottom: 1.1rem;
  padding: .65rem .8rem;
  background: rgba(232, 86, 74, .1);
  border: 1px solid rgba(232, 86, 74, .3);
  border-radius: 8px;
  font-size: .84rem;
  color: var(--cinza);
}
.alerta-velho strong{ color: #e8564a }

.ficha-loja{
  font: 600 .66rem/1 var(--codigo);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--loja, var(--sombra));
  margin-bottom: .5rem;
}
.ficha-condicao{
  font: 700 1.5rem/1.2 var(--texto);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ficha-selos{
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .8rem;
}
.ficha-quando{ margin-left: auto; font: 400 .72rem/1 var(--codigo); color: var(--sombra) }

.caixa-codigo{
  margin: 1.4rem 0 .8rem;
  padding: .9rem;
  background: var(--breu);
  border: 2px dashed var(--traco);
  border-radius: 10px;
  text-align: center;
}
.etiqueta-codigo{
  display: block;
  font: 600 .6rem/1 var(--codigo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sombra);
  margin-bottom: .5rem;
}
.caixa-codigo code{
  font: 700 1.5rem/1 var(--codigo);
  letter-spacing: -.04em;
  color: var(--ascua);
  user-select: all;      /* um toque seleciona o código inteiro */
}

.botao-loja{
  display: block;
  width: 100%;
  padding: .8rem;
  background: var(--brasa);
  color: #170a02;
  border: none;
  border-radius: 9px;
  font: 700 .92rem/1.2 var(--texto);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.botao-loja:hover{ background: var(--ascua) }
.botao-loja:disabled{ background: var(--fumaca); color: var(--sombra); cursor: default }

.aviso-copia{
  margin-top: .7rem;
  text-align: center;
  font: 400 .82rem/1.4 var(--texto);
  color: var(--ascua);
  opacity: 0;
  transition: opacity .2s;
}
.aviso-copia.aparece{ opacity: 1 }

.sem-codigo-nota{ margin: 1.1rem 0 .8rem; font-size: .88rem; color: var(--cinza) }

.ficha-texto{ margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--traco) }
.ficha-texto h2{ font: 600 .95rem/1.3 var(--texto); margin-bottom: .6rem }
.ficha-texto a{ color: var(--ascua); overflow-wrap: anywhere }

.irmaos{ margin-bottom: 2rem }
.mais-loja{ text-align: center; font-size: .85rem }
.mais-loja a{ color: var(--ascua); text-decoration: none }
.mais-loja a:hover{ text-decoration: underline }


/* ── rodapé com os caminhos internos ──────────────────────────────────── */

.rodape-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem .9rem;
  margin-bottom: 1rem;
}
.rodape-links a{
  font-size: .76rem;
  color: var(--sombra);
  text-decoration: none;
}
.rodape-links a:hover{ color: var(--cinza) }

.lojas li a{ text-decoration: none }
.lojas li:hover{ border-color: var(--tracoo) }
.sem-nada a{ color: var(--ascua) }


/* ── chamado para o grupo, na página do cupom ─────────────────────────────
   Fica logo abaixo do botão, no momento em que a pessoa já pegou o que veio
   buscar — é quando ela está mais disposta a entrar. A frase é verdade: o
   robô publica no grupo primeiro e no site depois. */

.chamado-grupo{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .8rem;
  align-items: start;
  margin-top: 1.4rem;
  padding: .95rem 1.1rem;
  background: linear-gradient(135deg, rgba(255, 107, 26, .1), transparent 65%);
  border: 1px solid rgba(255, 107, 26, .28);
  border-radius: 10px;
}
.chamado-sino{ font-size: 1.1rem; line-height: 1.3 }
.chamado-titulo{
  font: 600 .92rem/1.35 var(--texto);
  letter-spacing: -.01em;
  color: var(--giz);
}
.chamado-texto{
  margin-top: .25rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--cinza);
}
.chamado-botao{
  grid-column: 2;
  justify-self: start;
  margin-top: .7rem;
  padding: .42rem .85rem;
  background: var(--brasa);
  border-radius: 7px;
  font: 700 .8rem/1 var(--texto);
  color: #170a02;
  text-decoration: none;
  transition: background .15s;
}
.chamado-botao:hover{ background: var(--ascua) }

@media (max-width: 380px){
  .chamado-grupo{ grid-template-columns: 1fr }
  .chamado-sino{ display: none }
  .chamado-botao{ grid-column: 1; justify-self: stretch; text-align: center }
}

/* A capa e a mesma em todas as paginas: encolher ela nas internas fazia o
   site parecer outro. Um tamanho so. */
.capa-alvo{ display: block; text-decoration: none }
.nome a{ text-decoration: none }


/* ── o cupom na lista ─────────────────────────────────────────────────────
   Um cupom picotado, e o canhoto É o botão: clicar nele copia o código e leva
   à loja. Clicar no corpo abre os detalhes. O desenho já prometia isso — a
   parte que se destaca é a que você leva. */

.cupons{ display: grid; gap: .6rem; margin-bottom: 2rem }

.cupom-card{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--carvao);
  border: 1px solid var(--traco);
  border-left: 3px solid var(--loja, var(--traco));
  border-radius: 10px;
  transition: border-color .16s, background .16s;
}
.cupom-card:hover{
  background: var(--fumaca);
  border-color: color-mix(in oklab, var(--loja) 40%, var(--traco));
  border-left-color: var(--loja);
}
.cupom-card.velho{ opacity: .55 }
.cupom-card.velho:hover{ opacity: 1 }

.cupom-corpo{
  display: grid;
  gap: .15rem;
  min-width: 0;
  padding: .8rem .95rem;
  text-decoration: none;
}

.cupom-loja{
  font: 600 .62rem/1 var(--codigo);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--loja, var(--sombra));
}
.cupom-valor{
  font: 700 1.25rem/1.1 var(--codigo);
  letter-spacing: -.05em;
  color: var(--giz);
  margin-top: .1rem;
}
.cupom-condicao{
  font-size: .82rem;
  line-height: 1.4;
  color: var(--cinza);
  overflow-wrap: anywhere;
}
/* Sem valor extraído, a condição vira o destaque: é tudo que existe. */
.cupom-condicao.sozinha{
  font: 500 1.02rem/1.3 var(--texto);
  letter-spacing: -.01em;
  color: var(--giz);
  margin-top: .15rem;
}
.cupom-rodape{
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.cupom-quando{
  margin-left: auto;
  font: 400 .68rem/1 var(--codigo);
  color: var(--sombra);
}

/* O canhoto vai de borda a borda do card: é filho direto do card, não do
   corpo, então o picote e as mordidas caem exatamente no fio da borda. Foi
   isso que ficou torto quando ele morava dentro do link com padding. */
.cupom-canhoto{
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .2rem;
  min-width: 7rem;
  padding: .8rem 1rem;
  background: none;
  border: none;
  border-left: 2px dashed var(--traco);
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cupom-canhoto::before,
.cupom-canhoto::after{
  content: "";
  position: absolute;
  left: -8px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--breu);
  border: 1px solid var(--traco);
}
.cupom-canhoto::before{ top: -8px }
.cupom-canhoto::after{ bottom: -8px }

.cupom-card:hover .cupom-canhoto{ border-left-color: var(--loja) }
.cupom-canhoto:hover{ background: rgba(255, 107, 26, .08) }
.cupom-canhoto.inerte{ cursor: default }
.cupom-canhoto.inerte:hover{ background: none }

.canhoto-rotulo{
  font: 600 .55rem/1 var(--codigo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sombra);
}
.canhoto-codigo{
  font: 700 .88rem/1.15 var(--codigo);
  letter-spacing: -.04em;
  color: var(--ascua);
  text-align: center;
  overflow-wrap: anywhere;
}
.cupom-canhoto.sem-codigo .canhoto-codigo{ font-size: .78rem; color: var(--cinza) }
.canhoto-acao{
  font: 600 .58rem/1 var(--codigo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sombra);
  transition: color .15s;
}
.cupom-canhoto:hover .canhoto-acao{ color: var(--brasa) }
.cupom-canhoto.copiado .canhoto-acao{ color: #4ecb96 }
.cupom-canhoto.copiado .canhoto-acao::before{ content: "✓ " }

/* O aviso do "copiado, indo para a loja" nasce dentro do card, no rodapé. */
.aviso-card{
  grid-column: 1 / -1;
  margin: 0;
  padding: .5rem .95rem .7rem;
  font-size: .78rem;
  color: var(--ascua);
  opacity: 0;
  transition: opacity .2s;
}
.aviso-card.aparece{ opacity: 1 }


@media (max-width: 420px){
  /* No celular o canhoto desce e o picote vira horizontal, como um cupom que
     se dobra em vez de rasgar de lado. */
  .cupom-card{ grid-template-columns: 1fr }
  .cupom-corpo{ padding-bottom: .6rem }
  .cupom-canhoto{
    border-left: none;
    border-top: 2px dashed var(--traco);
    grid-auto-flow: column;
    justify-content: center;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
    padding: .65rem 1rem .75rem;
  }
  .cupom-canhoto::before{ top: -8px; left: -8px }
  .cupom-canhoto::after{ top: -8px; bottom: auto; left: auto; right: -8px }
  .cupom-card:hover .cupom-canhoto{ border-top-color: var(--loja) }
}


/* ── a página de um cupom ─────────────────────────────────────────────── */

.migalhas{
  margin-bottom: .9rem;
  font: 400 .74rem/1 var(--codigo);
  color: var(--sombra);
}
.migalhas a{ text-decoration: none }
.migalhas a:hover{ color: var(--giz) }
.migalhas span{ margin: 0 .3rem; color: var(--traco) }

.ficha-cupom{
  background: var(--carvao);
  border: 1px solid var(--traco);
  border-top: 3px solid var(--loja, var(--brasa));
  border-radius: 12px;
  padding: 1.4rem 1.25rem;
  margin-bottom: 2rem;
}
.alerta-velho{
  margin-bottom: 1.1rem;
  padding: .65rem .8rem;
  background: rgba(232, 86, 74, .1);
  border: 1px solid rgba(232, 86, 74, .3);
  border-radius: 8px;
  font-size: .84rem;
  color: var(--cinza);
}
.alerta-velho strong{ color: #e8564a }

.ficha-loja{
  font: 600 .66rem/1 var(--codigo);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--loja, var(--sombra));
  margin-bottom: .5rem;
}
.ficha-condicao{
  font: 700 1.5rem/1.2 var(--texto);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.ficha-selos{
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .8rem;
}
.ficha-quando{ margin-left: auto; font: 400 .72rem/1 var(--codigo); color: var(--sombra) }

.caixa-codigo{
  margin: 1.4rem 0 .8rem;
  padding: .9rem;
  background: var(--breu);
  border: 2px dashed var(--traco);
  border-radius: 10px;
  text-align: center;
}
.etiqueta-codigo{
  display: block;
  font: 600 .6rem/1 var(--codigo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sombra);
  margin-bottom: .5rem;
}
.caixa-codigo code{
  font: 700 1.5rem/1 var(--codigo);
  letter-spacing: -.04em;
  color: var(--ascua);
  user-select: all;      /* um toque seleciona o código inteiro */
}

.botao-loja{
  display: block;
  width: 100%;
  padding: .8rem;
  background: var(--brasa);
  color: #170a02;
  border: none;
  border-radius: 9px;
  font: 700 .92rem/1.2 var(--texto);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.botao-loja:hover{ background: var(--ascua) }
.botao-loja:disabled{ background: var(--fumaca); color: var(--sombra); cursor: default }

.aviso-copia{
  margin-top: .7rem;
  text-align: center;
  font: 400 .82rem/1.4 var(--texto);
  color: var(--ascua);
  opacity: 0;
  transition: opacity .2s;
}
.aviso-copia.aparece{ opacity: 1 }

.sem-codigo-nota{ margin: 1.1rem 0 .8rem; font-size: .88rem; color: var(--cinza) }

.ficha-texto{ margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--traco) }
.ficha-texto h2{ font: 600 .95rem/1.3 var(--texto); margin-bottom: .6rem }
.ficha-texto a{ color: var(--ascua); overflow-wrap: anywhere }

.irmaos{ margin-bottom: 2rem }
.mais-loja{ text-align: center; font-size: .85rem }
.mais-loja a{ color: var(--ascua); text-decoration: none }
.mais-loja a:hover{ text-decoration: underline }


/* ── rodapé com os caminhos internos ──────────────────────────────────── */

.rodape-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem .9rem;
  margin-bottom: 1rem;
}
.rodape-links a{
  font-size: .76rem;
  color: var(--sombra);
  text-decoration: none;
}
.rodape-links a:hover{ color: var(--cinza) }

.lojas li a{ text-decoration: none }
.lojas li:hover{ border-color: var(--tracoo) }
.sem-nada a{ color: var(--ascua) }


/* ── chamado para o grupo, na página do cupom ─────────────────────────────
   Fica logo abaixo do botão, no momento em que a pessoa já pegou o que veio
   buscar — é quando ela está mais disposta a entrar. A frase é verdade: o
   robô publica no grupo primeiro e no site depois. */

.chamado-grupo{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .8rem;
  align-items: start;
  margin-top: 1.4rem;
  padding: .95rem 1.1rem;
  background: linear-gradient(135deg, rgba(255, 107, 26, .1), transparent 65%);
  border: 1px solid rgba(255, 107, 26, .28);
  border-radius: 10px;
}
.chamado-sino{ font-size: 1.1rem; line-height: 1.3 }
.chamado-titulo{
  font: 600 .92rem/1.35 var(--texto);
  letter-spacing: -.01em;
  color: var(--giz);
}
.chamado-texto{
  margin-top: .25rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--cinza);
}
.chamado-botao{
  grid-column: 2;
  justify-self: start;
  margin-top: .7rem;
  padding: .42rem .85rem;
  background: var(--brasa);
  border-radius: 7px;
  font: 700 .8rem/1 var(--texto);
  color: #170a02;
  text-decoration: none;
  transition: background .15s;
}
.chamado-botao:hover{ background: var(--ascua) }

@media (max-width: 380px){
  .chamado-grupo{ grid-template-columns: 1fr }
  .chamado-sino{ display: none }
  .chamado-botao{ grid-column: 1; justify-self: stretch; text-align: center }
}

/* A capa e a mesma em todas as paginas: encolher ela nas internas fazia o
   site parecer outro. Um tamanho so. */
.capa-alvo{ display: block; text-decoration: none }
.nome a{ text-decoration: none }


/* ── o cupom na lista ─────────────────────────────────────────────────────
   Um cupom picotado de verdade: o código fica atrás do picote, como o canhoto
   que se destaca. Cupom SEM código não ganha canhoto — não há o que destacar —
   e isso mostra de longe quais dão para copiar agora. */

.cupons{ display: grid; gap: .6rem; margin-bottom: 2rem }

.cupom-card{
  position: relative;
  background: var(--carvao);
  border: 1px solid var(--traco);
  border-left: 3px solid var(--loja, var(--traco));
  border-radius: 10px;
  transition: transform .16s, border-color .16s, background .16s;
}
.cupom-card:hover{
  transform: translateY(-2px);
  background: var(--fumaca);
  border-color: color-mix(in oklab, var(--loja) 40%, var(--traco));
  border-left-color: var(--loja);
}
.cupom-card.velho{ opacity: .55 }
.cupom-card.velho:hover{ opacity: 1 }

.cupom-link{
  display: grid;
  grid-template-columns: 1fr;
  text-decoration: none;
  padding: .8rem .95rem;
}
.cupom-card.com-canhoto .cupom-link{
  grid-template-columns: 1fr auto;
  padding-right: 0;
}

.cupom-corpo{ display: grid; gap: .15rem; min-width: 0 }

.cupom-loja{
  font: 600 .62rem/1 var(--codigo);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--loja, var(--sombra));
}
.cupom-valor{
  font: 700 1.25rem/1.1 var(--codigo);
  letter-spacing: -.05em;
  color: var(--giz);
  margin-top: .1rem;
}
.cupom-condicao{
  font-size: .82rem;
  line-height: 1.4;
  color: var(--cinza);
  overflow-wrap: anywhere;
}
/* Sem valor extraído, a condição vira o destaque: é tudo que existe. */
.cupom-condicao.sozinha{
  font: 500 1.02rem/1.3 var(--texto);
  letter-spacing: -.01em;
  color: var(--giz);
  margin-top: .15rem;
}
.cupom-rodape{
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.cupom-quando{
  margin-left: auto;
  padding-right: .2rem;
  font: 400 .68rem/1 var(--codigo);
  color: var(--sombra);
}

/* O canhoto: picote vertical com as mordidas em cima e embaixo. */
.cupom-canhoto{
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .25rem;
  min-width: 6.5rem;
  padding: 0 1rem;
  border-left: 2px dashed var(--traco);
}
.cupom-canhoto::before,
.cupom-canhoto::after{
  content: "";
  position: absolute;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--breu);
  border: 1px solid var(--traco);
}
.cupom-canhoto::before{ top: -7px }
.cupom-canhoto::after{ bottom: -7px }

.canhoto-rotulo{
  font: 600 .55rem/1 var(--codigo);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sombra);
}
.canhoto-codigo{
  font: 700 .88rem/1.1 var(--codigo);
  letter-spacing: -.04em;
  color: var(--ascua);
  text-align: center;
  overflow-wrap: anywhere;
}
.cupom-card:hover .cupom-canhoto{ border-left-color: var(--loja) }


@media (max-width: 420px){
  /* No celular o canhoto vai para baixo: o picote vira horizontal, como um
     cupom que se dobra em vez de se rasgar de lado. */
  .cupom-card.com-canhoto .cupom-link{ grid-template-columns: 1fr; padding-right: .95rem }
  .cupom-canhoto{
    border-left: none;
    border-top: 2px dashed var(--traco);
    grid-auto-flow: column;
    justify-content: center;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
    margin-top: .7rem;
    padding: .6rem 0 0;
  }
  .cupom-canhoto::before{ top: -7px; left: -7px }
  .cupom-canhoto::after{ top: -7px; bottom: auto; left: auto; right: -7px }
  .cupom-card:hover .cupom-canhoto{ border-top-color: var(--loja) }
}


/* ── selos: o mesmo vocabulário na lista e na ficha ───────────────────── */

.selo, .selo-velho, .selo-vivo{
  padding: .12rem .4rem;
  border-radius: 4px;
  font: 600 .6rem/1.5 var(--codigo);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.selo{ background: var(--fumaca); color: var(--cinza); border: 1px solid var(--traco) }
.selo-velho{ background: rgba(232, 86, 74, .12); color: #e8564a; border: 1px solid rgba(232, 86, 74, .32) }
.selo-vivo{ background: rgba(63, 178, 127, .12); color: #4ecb96; border: 1px solid rgba(63, 178, 127, .35) }