/* ===== Botoes de icone do cabecalho + dica (tooltip) =====
   Arquivo proprio porque o core.css esta no limite de 64 KiB da CentralCart.

   Botoes de icone (.btn-icone): todos iguais. Sem fundo em repouso; o fundo
   aparece so ao passar o mouse. Ao clicar, ou com o painel dele aberto, o
   icone ganha a cor do tema e o botao uma borda da mesma cor. Nada de
   "afundar" (scale/translate): o retorno do clique e a cor. */
.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: rgb(var(--foreground) / 0.8);
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-icone svg {
  width: 20px;
  height: 20px;
  transition: color 0.15s ease;
}

.btn-icone:hover {
  background: rgb(var(--foreground) / 0.08);
  color: rgb(var(--foreground));
}

.btn-icone:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.btn-icone:active,
.btn-icone[aria-expanded='true'],
.btn-icone[data-aberto] {
  border-color: hsl(var(--primary) / 0.55);
  background: hsl(var(--primary) / 0.08);
}

.btn-icone:active svg,
.btn-icone[aria-expanded='true'] svg,
.btn-icone[data-aberto] svg {
  color: hsl(var(--primary));
}

/* No cabecalho nenhum botao afunda ao clicar (a regra geral do core.css da
   scale(0.97) em todo botao). Os de texto (Entrar, Carrinho) ficam parados;
   o Entrar pinta o icone, como os de icone. */
header :is(button, a, .btn-primary, .btn-secondary):active {
  transform: none;
}

header .btn-secondary:active svg {
  color: hsl(var(--primary));
}

/* ===== Dica (tooltip) =====
   Uma so, criada pelo main.js para qualquer elemento com data-dica. Fundo
   escuro puxado para a cor do tema (16% dela sobre quase preto) e texto
   quase branco: contraste acima de 13:1 nos dois temas (o minimo do WCAG
   para texto pequeno e 4,5:1). A borda e a setinha levam a cor do tema. */
.dica {
  --dica-fundo: color-mix(in srgb, hsl(var(--primary)) 16%, #0b0b0d);
  position: fixed;
  z-index: 100;
  max-width: 240px;
  width: max-content;
  padding: 6px 10px;
  border: 1px solid hsl(var(--primary) / 0.45);
  border-radius: 8px;
  background: var(--dica-fundo);
  color: #fafafa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.9);
}

.dica[data-visivel] {
  opacity: 1;
}

.dica::after {
  content: '';
  position: absolute;
  left: var(--dica-seta, 50%);
  width: 8px;
  height: 8px;
  background: var(--dica-fundo);
  border: 1px solid hsl(var(--primary) / 0.45);
  transform: translateX(-50%) rotate(45deg);
}

.dica[data-lado='baixo']::after {
  top: -5px;
  border-right: 0;
  border-bottom: 0;
}

.dica[data-lado='cima']::after {
  bottom: -5px;
  border-left: 0;
  border-top: 0;
}

@media (hover: none) {
  .dica { display: none; }
}

/* Painel de ajustes: continua rolando por dentro quando nao cabe na tela,
   mas sem a barra de rolagem aparente. */
.ajustes-painel {
  scrollbar-width: none;
}

.ajustes-painel::-webkit-scrollbar {
  display: none;
}
/* Menu de suporte: usa o painel de ajustes (.ajustes-painel, core.css) para
   ter o mesmo visual e a mesma posicao. So estes detalhes sao dele: um
   pouco mais largo (cabe o e-mail), a marca de cada rede e a setinha. */
@media (min-width: 480px) {
  .suporte-painel { width: 256px; }
}

.suporte-marca {
  width: 20px;
  height: 20px;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.suporte-seta {
  flex: none;
  color: rgb(var(--muted-foreground));
  transition: color 0.15s ease;
}

.ajustes-opcao:hover .suporte-seta {
  color: rgb(var(--foreground));
}

.suporte-email {
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* ===== Cupom e brinde: expandir e recolher =====
   O painel nasce da aba: a largura cresce de 0 ate a medida dele e a aba
   vai sendo empurrada junto; ao fechar, ele se recolhe de volta. O
   conteudo tem largura fixa (min-width), entao nao se reorganiza durante a
   animacao: so vai sendo revelado. Substitui o fade do core.css. */
.cupom-painel,
.brinde-cartao {
  overflow-x: hidden;
  animation: none;
  transition:
    width 0.32s cubic-bezier(0.22, 0.8, 0.24, 1),
    padding 0.32s cubic-bezier(0.22, 0.8, 0.24, 1),
    opacity 0.2s ease,
    visibility 0s;
}

.cupom-painel > * { min-width: 132px; }
.brinde-cartao > * { min-width: 144px; }

.cupom-painel[data-fechado],
.brinde-cartao[data-fechado] {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    width 0.26s cubic-bezier(0.4, 0, 0.6, 1),
    padding 0.26s cubic-bezier(0.4, 0, 0.6, 1),
    opacity 0.2s ease 0.06s,
    border-width 0s 0.26s,
    visibility 0s 0.26s;
}

.cupom-painel[data-sem-transicao],
.brinde-cartao[data-sem-transicao] {
  transition: none;
}

/* Aba do cupom na pagina inicial: fica fora da tela ate a pessoa chegar na
   primeira lista de produtos ou clicar em "Explorar produtos" (main.js
   marca data-revelado). Entra deslizando da borda. */
:root:has([data-hero]) .cupom-widget {
  transition: translate 0.4s cubic-bezier(0.22, 0.8, 0.24, 1), visibility 0s;
}

:root:has([data-hero]) .cupom-widget:not([data-revelado]) {
  translate: -110% 0;
  visibility: hidden;
  transition: none;
}

:root:has([data-hero]) .cupom-widget:not([data-revelado]) .cupom-aba {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .cupom-painel,
  .brinde-cartao,
  .cupom-painel[data-fechado],
  .brinde-cartao[data-fechado],
  :root:has([data-hero]) .cupom-widget {
    transition: none;
  }
}

:root[data-menos-animacao='sim'] :is(.cupom-painel, .brinde-cartao, .cupom-widget) {
  transition: none !important;
}
/* ===== Cabecalho das categorias =====
   Traco curto na cor do tema, nome em caixa alta na fonte do site, a
   contagem, uma linha fina ate a borda e "Ver categoria" no fim. */
.cat-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cat-cabeca-traco {
  width: 22px;
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: hsl(var(--primary));
}

.cat-cabeca-titulo {
  min-width: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: anywhere;
}

.cat-cabeca-qtd {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: hsl(var(--primary));
  font-variant-numeric: tabular-nums;
}

.cat-cabeca-linha {
  flex: 1;
  min-width: 16px;
  height: 1px;
  background: rgb(var(--foreground) / 0.1);
}

.cat-cabeca-ver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--muted-foreground));
  transition: color 0.18s ease;
}

.cat-cabeca-ver svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.cat-cabeca-ver:hover {
  color: hsl(var(--primary));
}

.cat-cabeca-ver:hover svg {
  transform: translateX(3px);
}

.cat-cabeca-ver:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
  border-radius: 4px;
}

/* No celular o "Ver categoria" vira so a seta, para o nome caber. */
@media (max-width: 639px) {
  .cat-cabeca { gap: 10px; }
  .cat-cabeca-ver span { display: none; }
  .cat-cabeca-ver svg { width: 18px; height: 18px; }
}
/* ===== Voltar ao topo subindo =====
   Enquanto a pagina sobe (main.js marca data-subindo), o botao fica no
   visual normal, mesmo com o mouse em cima, e o anel aparece esvaziando
   ate o topo. No hover comum ele enche de cor e o anel some (core.css). */
.voltar-topo[data-subindo],
.voltar-topo[data-subindo]:hover {
  background: rgb(var(--background) / 0.78);
  color: hsl(var(--primary));
  translate: 0 0;
}

.voltar-topo[data-subindo] .voltar-topo-progresso,
.voltar-topo[data-subindo]:hover .voltar-topo-progresso {
  stroke: hsl(var(--primary));
}

.voltar-topo[data-subindo] .voltar-topo-trilha,
.voltar-topo[data-subindo]:hover .voltar-topo-trilha {
  stroke: rgb(var(--foreground) / 0.12);
}

.voltar-topo[data-subindo] .voltar-topo-seta {
  animation: voltar-topo-sobe 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Um so impulso para cima, sem repetir. */
@keyframes voltar-topo-sobe {
  0% { translate: 0 0; }
  40% { translate: 0 -3px; }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .voltar-topo[data-subindo] .voltar-topo-seta { animation: none; }
}
/* ===== Ranking no cabecalho =====
   No molde dos botoes do cabecalho (btn-secondary): mesma altura, cantos,
   borda e fundo. Tres lugares lado a lado, cada um com a coroa na cor da
   medalha (ouro, prata, bronze) sobre a foto/inicial e o nome ao lado. */
.ranking-mini {
  align-items: center;
  gap: 4px;
  /* 44px, a altura dos botoes de icone ao lado: sobra ar entre as coroas e
     a borda de cima. */
  height: 44px;
  padding: 0 6px;
  border: 1px solid rgb(var(--foreground) / 0.15);
  border-radius: var(--radius);
  background: transparent;
  min-width: 0;
  transition: border-color 0.15s ease;
}

.ranking-mini:hover { border-color: rgb(var(--foreground) / 0.3); }

.ranking-mini:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.ranking-mini-item {
  --medalha: #f2c54b;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 0 8px;
}

/* Ordem de podio na tela: 2o, 1o no meio, 3o (no HTML segue 1, 2, 3 para o
   leitor de tela ler a colocacao certa). Divisorias antes do 1o e do 3o. */
.ranking-mini-1 { order: 2; border-left: 1px solid rgb(255 255 255 / 0.08); }
.ranking-mini-2 { order: 1; --medalha: #d9dde3; }
.ranking-mini-3 { order: 3; --medalha: #d9a276; border-left: 1px solid rgb(255 255 255 / 0.08); }

.ranking-mini-rosto {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  /* Desce o circulo para a coroa caber sem encostar na borda de cima. */
  margin-top: 8px;
  border: 2px solid var(--medalha);
  border-radius: 50%;
  background: #18181b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  color: var(--medalha);
}

.ranking-mini-rosto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.ranking-mini-coroa {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 12px;
  height: 12px;
  translate: -50% 0;
  color: var(--medalha);
  fill: var(--medalha);
}

.ranking-mini-nome {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: rgb(var(--foreground));
}

.ranking-mini-1 .ranking-mini-nome { color: var(--medalha); }

/* O 1o, no meio, um pouco maior e mais alto: como o degrau do podio. */
.ranking-mini-1 .ranking-mini-rosto {
  width: 24px;
  height: 24px;
  margin-top: 8px;
  font-size: 11px;
}

.ranking-mini-1 .ranking-mini-coroa {
  top: -10px;
  width: 13px;
  height: 13px;
}
/* De 1024 a 1279px o cabecalho aperta: ficam coroa e foto; o nome vai
   para a dica ao passar o mouse. */
@media (max-width: 1279px) {
  .ranking-mini-nome { display: none; }
  .ranking-mini-item { padding: 0 6px; }
}

/* Entrada: quando o ranking aparece (o podio do banner saiu da tela, ou a
   pagina nao tem podio), os tres lugares surgem um depois do outro e as
   coroas caem no lugar. Enquanto ele esta escondido a animacao fica
   desligada, entao ela roda de novo a cada vez que ele volta. */
.ranking-mini-item {
  animation: ranking-surge 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ranking-mini-coroa {
  animation: ranking-coroa 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Entra primeiro o 1o (no meio), depois o 2o e o 3o, como num podio. */
.ranking-mini-2 { animation-delay: 0.1s; }
.ranking-mini-3 { animation-delay: 0.18s; }
.ranking-mini-1 .ranking-mini-coroa { animation-delay: 0.1s; }
.ranking-mini-2 .ranking-mini-coroa { animation-delay: 0.2s; }
.ranking-mini-3 .ranking-mini-coroa { animation-delay: 0.28s; }

:root:has(.banner-podio):not([data-podio-fora]) :is(.ranking-mini-item, .ranking-mini-coroa) {
  animation: none;
}

@keyframes ranking-surge {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ranking-coroa {
  from { opacity: 0; translate: -50% -8px; rotate: -20deg; }
  to { opacity: 1; translate: -50% 0; rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-mini-item,
  .ranking-mini-coroa { animation: none; }
}

:root[data-menos-animacao='sim'] :is(.ranking-mini-item, .ranking-mini-coroa) { animation: none; }

/* ===== Borda animada dos cards (com o mouse em cima) =====
   Uma borda de 2px com um degrade conico que gira em volta do card (3s por
   volta): duas "caudas" de luz, cada uma saindo do prata, passando pela cor
   do tema e terminando num branco translucido, com trechos transparentes
   entre elas. Parado, o card fica so com a borda normal. --angle precisa do
   @property para poder ser animado. */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

article.package::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 30;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    #c9ced6 60deg,
    hsl(var(--primary)) 120deg,
    rgb(255 255 255 / 0.25) 170deg,
    transparent 180deg,
    #c9ced6 240deg,
    hsl(var(--primary)) 300deg,
    rgb(255 255 255 / 0.25) 350deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

article.package:hover::before {
  opacity: 1;
  animation: borda-gira 3s linear infinite;
}

@keyframes borda-gira {
  to { --angle: 360deg; }
}
/* O reflexo que cruza o card: uma faixa de luz prateada com um toque da cor
   do tema, passando uma vez ao entrar o mouse. */
article.package::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 29;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgb(255 255 255 / 0.14) 46%,
    hsl(var(--primary) / 0.12) 50%,
    rgb(255 255 255 / 0.06) 54%,
    transparent 62%
  );
  translate: -120% 0;
  opacity: 0;
}

article.package:hover::after {
  animation: cromo-reflexo 0.9s cubic-bezier(0.25, 0.8, 0.3, 1) both;
}

@keyframes cromo-reflexo {
  from { translate: -120% 0; opacity: 1; }
  to { translate: 120% 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  article.package:hover::before,
  article.package:hover::after { animation: none; }
}

:root[data-menos-animacao='sim'] article.package:hover::before,
:root[data-menos-animacao='sim'] article.package:hover::after { animation: none; }
/* Botoes com borda do cabecalho (perfil, Entrar): sem o fundo claro, so a
   borda, como a busca e o ranking. No hover a borda clareia. */
header .btn-secondary {
  background-color: transparent;
}

header .btn-secondary:hover {
  background-color: transparent;
  border-color: rgb(var(--foreground) / 0.3);
}
/* ===== Rodape em colunas ===== */
.rodape-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
  padding: 40px 0 32px;
}

.rodape-marca { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .rodape-grade { grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 32px; }
  .rodape-marca { grid-column: auto; }
}

.rodape-descricao {
  max-width: 380px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: rgb(var(--muted-foreground));
}

.rodape-coluna {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.rodape-titulo {
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--muted-foreground));
}

.rodape-coluna > a,
.rodape-coluna > button {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: rgb(var(--foreground) / 0.82);
  text-align: left;
  transition: color 0.15s ease;
}

.rodape-coluna > a:hover,
.rodape-coluna > button:hover { color: hsl(var(--primary)); }

.rodape-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Redes no molde dos botoes de icone da loja: quadrado de cantos
   arredondados, so a borda; no hover borda e icone na cor do tema. */
.rodape .rede-social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(var(--foreground) / 0.15);
  border-radius: var(--radius);
  background: transparent;
  transition: border-color 0.15s ease;
}

.rodape .rede-social > span {
  width: 18px;
  height: 18px;
  background: rgb(var(--foreground));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.15s ease;
}

.rodape .rede-social:hover { border-color: hsl(var(--primary)); }
.rodape .rede-social:hover > span { background: hsl(var(--primary)); }

.rodape .rede-social:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

.rodape-barra { border-top: 1px solid rgb(var(--foreground) / 0.06); }

.rodape-barra-conteudo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 16px 0 10px;
  font-size: 12px;
  color: rgb(var(--muted-foreground));
}

.rodape-barra-conteudo a:hover { color: hsl(var(--primary)); }
.rodape-sep { margin: 0 6px; opacity: 0.5; }

.rodape-tebex {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  font-size: 11px;
  line-height: 1.5;
  color: rgb(var(--muted-foreground) / 0.8);
}

.rodape-tebex svg { flex: none; opacity: 0.8; }
/* ===== Foto do card carregando =====
   Enquanto a foto baixa, o quadrado mostra o brilho de "carregando" (o
   mesmo do .skeleton da loja) e a foto fica invisivel: sem aparecer pela
   metade, de cima para baixo. Quando chega inteira (onload no
   package-card.html), ela surge num fade curto e o brilho para. */
.card-foto-caixa {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 37%, rgba(255, 255, 255, 0.04) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

.card-foto-caixa:has(.card-foto[data-carregada]) {
  background: none;
  animation: none;
}

.card-foto {
  opacity: 0;
}

.card-foto[data-carregada] {
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.5s ease, filter 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card-foto-caixa { animation: none; }
}
/* Esgotado: a foto continua meio apagada (opacity-80 no package-card). */
.card-foto[data-carregada].opacity-80 { opacity: 0.8; }

/* ===== Tempo da oferta (card de produto) =====
   Plaquinha no molde da placa de preco do card: cantos arredondados, borda
   fina e fundo escuro. Relogio na cor do tema, "Acaba em" apagado, o tempo
   com os numeros em destaque e as unidades (h, m, s) mais apagadas, e a
   barra fina na base esvaziando com o ciclo da oferta. */
.card-oferta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 12px 0;
  padding: 7px 10px 9px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 10px;
  background: #0b0b0d;
  font-size: 11px;
  line-height: 1;
}

@media (min-width: 640px) {
  .card-oferta { margin: 12px 16px 0; font-size: 12px; }
}

.card-oferta-icone {
  width: 14px;
  height: 14px;
  flex: none;
  color: hsl(var(--primary));
}

.card-oferta-rotulo {
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--muted-foreground));
  white-space: nowrap;
}

.card-oferta-tempo {
  margin-left: auto;
  white-space: nowrap;
  color: rgb(var(--muted-foreground));
  font-variant-numeric: tabular-nums;
}

.card-oferta-tempo b {
  font-weight: 700;
  color: rgb(var(--foreground));
}

.card-oferta-barra {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgb(255 255 255 / 0.06);
}

.card-oferta-barra > span {
  display: block;
  height: 100%;
  background: hsl(var(--primary));
}

/* Card estreito (celular e 3 ou 4 colunas): fica o relogio e o tempo; o
   "Acaba em" sai para caber. */
@media (max-width: 1279px) {
  .card-oferta-rotulo { display: none; }
}
/* Celular bem estreito (card de ~120px): so o tempo, centralizado. */
@media (max-width: 380px) {
  .card-oferta { margin: 8px 8px 0; padding: 7px 6px 9px; justify-content: center; }
  .card-oferta-icone { display: none; }
  .card-oferta-tempo { margin-left: 0; }
}