/* oferta.css (Dicas): estilos da página de oferta. Nas /ofertas/ geradas entra como /oferta.css?v=; no oferta.html
   aberto no Vite dev, pelo link /src/dicas/css/oferta.css (o gerador troca um pelo outro). */

/* Pele do Dicas (spec 4.10): os valores dos tokens --h-* da home (public/css/home.css), sem carregar a folha dela. */
:root {
  --of-navy: #0f1d3a;
  --of-tinta: #0f1419;
  --of-slate: #3d4a63;
  --of-creme: #fef9f3;
  --of-laranja: #ff6b35;
  --of-amarelo: #ffd23f;
  --of-verde: #0f7a3d;
  --of-bolha: #e9f7ec;
  --of-feat: #eef2fb;
  --of-linha: rgba(15, 29, 58, 0.18);
  --of-fundo: var(--of-creme); /* o esmaecido da descrição e os recortes do ticket terminam nele */
  --of-display: Montserrat, "Source Sans Pro", system-ui, sans-serif;
  --of-texto: Archivo, "Source Sans Pro", system-ui, sans-serif;
  --of-mao: Caveat, Georgia, serif; /* sem cursive: no Windows vira Comic Sans enquanto a Caveat não carrega */
}

/* O molde traz style="background: #ffffff" no <body> (o Sonar ainda depende dele); só o !important passa por cima. */
body {
  background: var(--of-creme) !important;
}

.deal-page-container {
  font-family: var(--of-texto);
  color: var(--of-tinta);
}

/* Colunas: uma abaixo de 1024 px, duas a partir daí (foto ≈ 48%, conteúdo ≈ 52%, spec 4.1) */
.deal-layout.oferta-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 32px;
}

.oferta-colunas .oferta-foto {
  min-width: 0;
}

.oferta-colunas .oferta-foto .deal-img-wrapper {
  position: relative;
  top: auto;
  max-width: 520px;
  max-height: none;
  margin: 0 auto;
}

.oferta-colunas .oferta-foto .deal-img-wrapper:not(.cupom-logo-loja) {
  background: #fff;
  border: 1px solid var(--of-linha);
  border-radius: 14px;
  padding: 16px;
  box-sizing: border-box;
}

.oferta-colunas .oferta-foto #deal-image {
  max-height: 520px;
}

/* Celular (spec 3 e 4.2): preço e botão visíveis sem rolar a 375×812. A foto (a única ou a principal da galeria) tem
   altura fixa desde a primeira pintura, inteira dentro dela; uma foto em pé não empurra o botão para baixo da dobra,
   nem com as miniaturas e um título de duas linhas. O logo da página só cupom já tem a altura dele. */
@media (max-width: 767px) {
  /* O styles.css (até 768 px) põe width: 100%, height: auto e object-fit: contain com !important nessas fotos, e isso
     vence o height: 100% inline do #deal-image e qualquer altura sem !important daqui: sem ele a foto nasce com 0 de
     altura e empurra a página quando carrega. O !important neste seletor, mais forte que o de lá, segura os 240 px. */
  .oferta-colunas .oferta-foto .deal-img-wrapper:not(.cupom-logo-loja) #deal-image,
  .oferta-colunas .oferta-foto .gallery-main img {
    height: 240px !important;
    max-height: 240px;
  }

  /* O styles.css reserva 400 px para a principal da galeria; aqui ela fica com a altura da foto. */
  .oferta-colunas .oferta-foto .gallery-main {
    min-height: 0;
  }
}

@media (min-width: 1024px) {
  .deal-layout.oferta-colunas {
    grid-template-columns: minmax(0, 48fr) minmax(0, 52fr);
    gap: 32px;
  }

  /* O quadro da foto fica parado enquanto a coluna da direita rola (e cresce com o "Ler mais"). */
  .oferta-colunas .oferta-foto {
    position: sticky;
    top: 100px;
  }

  .oferta-colunas .oferta-foto .deal-img-wrapper {
    max-width: none;
  }

  .oferta-colunas .oferta-foto #deal-image {
    max-height: 560px;
  }
}

/* Coluna do conteúdo. Abaixo de 1024 px a descrição e o histórico descem para depois do compartilhar, para o
   preço e o botão aparecerem sem rolar (spec 4.2). */
.oferta-colunas .oferta-conteudo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (max-width: 1023px) {
  .oferta-conteudo > #editor-insights {
    order: 1;
    margin-top: 16px;
  }

  .oferta-conteudo > .oferta-hist-lugar {
    order: 2;
  }
}

.oferta-hist-lugar:empty {
  display: none;
}

/* Selo da loja */
.oferta-conteudo .oferta-loja {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--of-navy);
  color: #fff;
  font: 700 0.75rem/1.4 var(--of-display);
  text-decoration: none;
}

.oferta-conteudo .oferta-loja:hover,
.oferta-conteudo .oferta-loja:focus-visible {
  background: #1d3463;
}

/* Título */
.oferta-conteudo .oferta-titulo {
  margin: 10px 0 12px;
  font: 800 1.35rem/1.2 var(--of-display);
  color: var(--of-navy);
}

.oferta-conteudo .oferta-titulo a {
  color: inherit;
  text-decoration: none;
}

.oferta-conteudo .oferta-titulo a:hover {
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .oferta-conteudo .oferta-titulo {
    font-size: 1.65rem;
  }
}

/* Linha "Postado por Cecília · há 2 h" */
.oferta-conteudo .oferta-meta {
  justify-content: flex-start;
  gap: 12px;
  margin: 4px 0 14px;
  padding: 0;
  border: 0;
  font-size: 0.85rem;
  color: var(--of-slate);
}

.oferta-conteudo .oferta-assina-nome {
  font: 400 1.25rem/1 var(--of-mao);
  color: var(--of-verde);
}

/* Compartilhar só com ícones */
.oferta-conteudo .oferta-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

/* Descrição e "Ler mais" (spec 4.4). O recorte é em linhas inteiras: o espaço entre parágrafos é uma linha, e o
   teto é 5 ou 6 linhas. Só vale com a classe oferta-js, posta pelo script colado depois do bloco; sem JS a
   descrição aparece inteira e o botão some. */
.oferta-conteudo #editor-insights-content.oferta-desc {
  --desc-lh: 1.6;
  scroll-margin-top: 87px; /* os 75 px do .main-header fixo e um respiro, para o "Ler menos" não parar embaixo dele */
  font-size: 1rem;
  line-height: var(--desc-lh);
  color: var(--of-slate);
}

.oferta-conteudo #editor-insights-content .oferta-desc-texto > * {
  margin: 0;
}

.oferta-conteudo #editor-insights-content .oferta-desc-texto > * + * {
  margin-top: calc(var(--desc-lh) * 1em);
}

.oferta-conteudo #editor-insights-content .oferta-desc-texto li {
  margin: 0;
  line-height: inherit;
}

.oferta-js .oferta-desc--recorte .oferta-desc-texto {
  position: relative;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.oferta-js .oferta-desc--recorte:not(.oferta-desc--aberta) .oferta-desc-texto {
  max-height: calc(var(--desc-lh) * 5em);
}

.oferta-js .oferta-desc--recorte:not(.oferta-desc--aberta) .oferta-desc-texto::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--desc-lh) * 1em);
  background: linear-gradient(rgba(254, 249, 243, 0), var(--of-fundo));
  pointer-events: none;
}

@media (min-width: 1024px) {
  .oferta-js .oferta-desc--recorte:not(.oferta-desc--aberta) .oferta-desc-texto {
    max-height: calc(var(--desc-lh) * 6em);
  }
}

.oferta-desc .oferta-lermais {
  display: none;
}

.oferta-js .oferta-desc .oferta-lermais {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 2px 0;
  border: 0;
  background: none;
  font: 800 0.875rem/1.4 var(--of-display);
  color: var(--of-navy);
  cursor: pointer;
}

.oferta-desc .oferta-lermais i {
  display: inline-block;
  font-style: normal;
  transition: transform 0.25s ease;
}

.oferta-desc .oferta-lermais[aria-expanded="true"] i {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .oferta-js .oferta-desc--recorte .oferta-desc-texto,
  .oferta-desc .oferta-lermais i {
    transition: none;
  }
}

/* Votos ao lado do "Postado por" (spec 4.5): os botões e o placar da home, numa pílula branca. */
.oferta-conteudo .oferta-meta {
  flex-wrap: wrap;
}

.oferta-votos .promo-card-reactions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--of-linha);
  border-radius: 999px;
  background: #fff;
}

.oferta-votos [data-reaction] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--of-slate);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.oferta-votos [data-reaction]:disabled {
  cursor: default;
}

/* Até o voto os emojis ficam em cinza, como nos cartões da home. */
.oferta-votos [data-reaction] .home-emoji {
  filter: grayscale(1);
  opacity: 0.7;
}

.oferta-votos [data-reaction][aria-pressed="true"] {
  background: var(--of-bolha);
}

.oferta-votos [data-reaction][aria-pressed="true"] .home-emoji {
  filter: none;
  opacity: 1;
}

.oferta-votos [data-reaction] > * {
  display: inline-block;
}

/* O pulinho do voto: só no clique de quem visita (a classe vem do oferta.js), nunca na carga. */
.oferta-votos [data-reaction].oferta-voto--pulo > * {
  animation: oferta-voto-pulo 0.35s ease;
}

@keyframes oferta-voto-pulo {
  40% {
    transform: scale(1.35);
  }

  100% {
    transform: scale(1);
  }
}

.oferta-votos [data-reaction-score] {
  min-width: 28px;
  font: 800 0.875rem/1 var(--of-display);
  text-align: center;
  color: var(--of-verde);
}

/* Preço (spec 4.1, item 5): o atual grande, o antigo riscado, o selo de desconto e a nota pequena embaixo. */
.oferta-conteudo .price-container-braddeals {
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 14px;
}

.oferta-conteudo .price-current-braddeals {
  font: 800 1.75rem/1.1 var(--of-display);
  letter-spacing: -0.02em;
  color: var(--of-navy);
}

.oferta-conteudo .price-old-braddeals {
  font: 400 1.05rem/1.2 var(--of-texto);
  color: #7a8499;
}

.oferta-conteudo .price-save-braddeals {
  padding: 2px 8px;
  border-radius: 6px;
  background: #fff1e8;
  font: 700 0.9rem/1.3 var(--of-texto);
  color: #c2410c;
}

.oferta-preco-nota {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--of-slate);
}

.oferta-preco-nota .price-shipping-braddeals {
  display: inline;
  min-height: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

@media (min-width: 1024px) {
  .oferta-conteudo .price-current-braddeals {
    font-size: 2rem;
  }
}

/* Botão principal em pílula laranja e, colada à direita, a pílula do cupom; os tickets descem para a linha toda. */
.oferta-conteudo .deal-actions-row {
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

.oferta-conteudo .btn-get-deal-braddeals.btn-half-width {
  flex: 0 1 auto;
  width: auto;
  min-width: 220px;
  min-height: 0;
  padding: 14px 36px;
  border-radius: 999px;
  background: var(--of-laranja);
  box-shadow: 0 2px 0 rgba(15, 29, 58, 0.18);
  font: 800 1rem/1.2 var(--of-display);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.oferta-conteudo .btn-get-deal-braddeals.btn-half-width:hover {
  background: var(--of-laranja);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.35);
}

.oferta-conteudo .btn-get-deal-braddeals.btn-half-width:active {
  transform: translateY(0);
}

.oferta-conteudo #deal-cupom-section {
  flex: 0 1 auto;
  width: auto;
}

.oferta-conteudo #deal-cupom-section.oferta-cupons--tickets,
.oferta-conteudo #deal-cupom-section.oferta-cupons--instrucao {
  flex-basis: 100%;
}

.oferta-copiar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 6px 14px;
  border: 1.5px solid var(--of-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--of-navy);
  font: 800 0.95rem/1.2 var(--of-display);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.oferta-copiar-textos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.oferta-copiar-rotulo {
  font: 700 0.6rem/1.2 var(--of-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--of-slate);
}

/* O código guarda a classe de sempre (cupom-code-inline); o styles.css o corta em 178 px, aqui ele cabe inteiro. */
.oferta-copiar .cupom-code-inline {
  max-width: none;
  font: inherit;
  letter-spacing: 0.02em;
}

.oferta-copiar.copiado,
.oferta-ticket-codigo.copiado {
  border-color: var(--of-verde);
  background: var(--of-verde);
  color: #fff;
}

.oferta-copiar,
.oferta-ticket-codigo {
  position: relative;
}

/* "Copiado ✓" cobre o conteúdo, que segue no layout (só invisível): a pílula e o ticket não mudam de tamanho. */
.oferta-copiado-texto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  font: 800 0.875rem/1 var(--of-display);
  white-space: nowrap;
}

.oferta-copiar.copiado > .oferta-copiado-texto,
.oferta-ticket-codigo.copiado > .oferta-copiado-texto {
  visibility: visible;
}

.oferta-copiar.copiado > :not(.oferta-copiado-texto),
.oferta-ticket-codigo.copiado > :not(.oferta-copiado-texto) {
  visibility: hidden;
}

/* A região que o leitor de tela ouve: fora da tela, sem ocupar lugar. */
.oferta-copiado-aviso {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Tickets (spec 4.3): desconto à esquerda, regras no meio, a pílula do código à direita e o canhoto recortado. */
.oferta-filtro {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.oferta-filtro-rotulo {
  flex: 0 0 auto;
  margin-right: 2px;
  font: 700 0.78rem/1 var(--of-display);
  color: var(--of-slate);
}

.oferta-filtro-opcao {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid var(--of-linha);
  border-radius: 999px;
  background: #fff;
  color: var(--of-tinta);
  font: 600 0.8rem/1.2 var(--of-texto);
  white-space: nowrap;
  cursor: pointer;
}

.oferta-filtro-opcao[aria-pressed="true"] {
  border-color: var(--of-navy);
  background: var(--of-navy);
  color: #fff;
}

.oferta-tickets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oferta-ticket {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--of-linha);
  border-radius: 12px;
  background: #fff;
  animation: oferta-ticket-entra 0.4s ease both;
}

.oferta-ticket[hidden] {
  display: none;
}

.oferta-ticket::before,
.oferta-ticket::after {
  content: "";
  position: absolute;
  left: 100px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--of-linha);
  border-radius: 50%;
  background: var(--of-fundo);
}

.oferta-ticket::before {
  top: -8px;
}

.oferta-ticket::after {
  bottom: -8px;
}

/* Entram em sequência, 60 ms entre um e outro; do 6º em diante, junto com o 5º. */
.oferta-ticket:nth-child(2) {
  animation-delay: 0.06s;
}

.oferta-ticket:nth-child(3) {
  animation-delay: 0.12s;
}

.oferta-ticket:nth-child(4) {
  animation-delay: 0.18s;
}

.oferta-ticket:nth-child(n + 5) {
  animation-delay: 0.24s;
}

@keyframes oferta-ticket-entra {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.oferta-ticket-desconto {
  font: 800 1.35rem/1 var(--of-display);
  text-align: center;
  color: var(--of-laranja);
}

.oferta-ticket-desconto small {
  display: block;
  margin-top: 3px;
  font: 700 0.62rem/1 var(--of-texto);
  letter-spacing: 0.06em;
  color: var(--of-slate);
}

.oferta-ticket-corpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.oferta-ticket-regra {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--of-slate);
}

.oferta-ticket-selo {
  display: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--of-verde);
  color: #fff;
  font: 800 0.62rem/1.4 var(--of-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.oferta-ticket--selo {
  border-color: var(--of-verde);
  box-shadow: 0 0 0 2px var(--of-bolha);
}

.oferta-ticket--selo .oferta-ticket-selo {
  display: inline-block;
}

.oferta-ticket-codigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1.5px solid var(--of-navy);
  border-radius: 999px;
  background: #fff;
  color: var(--of-navy);
  font: 800 0.875rem/1.2 var(--of-display);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.oferta-ticket-instrucao {
  max-width: 180px;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--of-slate);
}

.oferta-conteudo .cupom-instrucao {
  min-height: 0;
  border-radius: 12px;
}

/* Compartilhar: ícones redondos sem título, um traço e a pílula do grupo (spec 4.1, item 7, e 4.6). */
.oferta-conteudo .oferta-social {
  gap: 8px;
}

.oferta-social .btn-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.15s ease;
}

/* O X é preto; o styles.css ainda pinta o azul antigo com !important. */
.oferta-social .btn-share-twitter {
  background: var(--of-tinta) !important;
}

.oferta-social .btn-share-copy {
  border: 1px solid var(--of-linha);
  background: var(--of-feat) !important;
  color: var(--of-navy);
}

.oferta-social .btn-share-copy.copied {
  background: var(--of-verde) !important;
  color: #fff;
}

.oferta-social-sep {
  width: 1px;
  height: 22px;
  margin: 0 4px;
  background: var(--of-linha);
}

.oferta-grupo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border: 1px solid rgba(15, 122, 61, 0.25);
  border-radius: 999px;
  background: var(--of-bolha);
  color: var(--of-verde);
  font: 800 0.82rem/1.2 var(--of-display);
  text-decoration: none;
  transition: transform 0.15s ease;
}

.oferta-grupo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
}

.oferta-grupo-icone svg {
  width: 16px;
  height: 16px;
}

.oferta-social .btn-share-icon:hover,
.oferta-grupo:hover {
  transform: translateY(-2px);
}

/* No celular a pílula do grupo vai para uma linha própria, abaixo dos ícones. */
@media (max-width: 767px) {
  .oferta-social-sep {
    flex-basis: 100%;
    height: 0;
    margin: 0;
  }
}

/* Histórico de preço (spec 4.7): régua do verde (barato, à esquerda) ao vermelho (caro, à direita). O marcador
   ocupa a largura da régua e anda por transform: a posição final é o padrão daqui, e a classe de partida, posta
   pelo script só quando vai animar, o leva ao canto caro. O balão se desloca o mesmo tanto dentro de si mesmo,
   para não sair da régua nas pontas. */
.oferta-hist {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--of-linha);
}

.oferta-hist-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 8px;
}

.oferta-hist-titulo {
  margin: 0;
  font: 800 0.9rem/1.3 var(--of-display);
  color: var(--of-navy);
}

.oferta-hist-frase {
  font: 600 0.82rem/1.3 var(--of-texto);
  color: var(--of-verde);
}

.oferta-hist--expirada .oferta-hist-frase {
  color: var(--of-slate);
}

.oferta-hist-regua {
  position: relative;
  height: 10px;
  margin: 34px 0 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f7a3d, #ffd23f 45%, #e5484d);
}

.oferta-hist--expirada .oferta-hist-regua {
  filter: grayscale(0.6);
}

.oferta-hist-marcador {
  position: absolute;
  inset: 0;
  transform: translateX(var(--pos));
  pointer-events: none;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.oferta-hist--partida .oferta-hist-marcador {
  transform: translateX(100%);
}

.oferta-hist-ponto {
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 4px solid var(--of-navy);
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.oferta-hist-balao {
  position: absolute;
  bottom: 18px;
  left: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--of-navy);
  color: #fff;
  font: 700 0.75rem/1.3 var(--of-display);
  white-space: nowrap;
  transform: translateX(calc(var(--pos) * -1));
}

.oferta-hist-extremos {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--of-slate);
}

.oferta-hist-max {
  text-align: right;
}

.oferta-hist-extremos b {
  display: block;
  font: 800 0.875rem/1.3 var(--of-display);
  color: var(--of-tinta);
}

/* Todos os compartilhar iguais: o styles.css antigo estica o WhatsApp (flex: 1 e padding de botão retangular). */
.oferta-social .btn-share-icon.btn-share-whatsapp {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}

/* Só cupom (spec 4.3): o "Como usar" no lado da foto e as três abas que um cupom tem, de volta ao cabeçalho de
   abas (o styles.css ainda as empilha sem cabeçalho, do P19). */
.oferta-como-usar {
  max-width: 520px;
  margin: 16px auto 0;
  padding: 16px 18px;
  border: 1px solid var(--of-linha);
  border-radius: 14px;
  background: #fff;
}

.oferta-como-usar-titulo {
  margin: 0 0 10px;
  font: 800 1rem/1.3 var(--of-display);
  color: var(--of-navy);
}

.oferta-como-usar-passos {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--of-slate);
}

/* Celular, só cupom (spec 4.2): o quadro do logo fica baixo e o "Como usar" desce para depois do conteúdo, para o
   título, o preço e o botão aparecerem sem rolar. A coluna da foto some do grid (contents) e seus filhos viram itens. */
@media (max-width: 767.98px) {
  body.deal-is-cupom .oferta-colunas .oferta-foto {
    display: contents;
  }

  body.deal-is-cupom .oferta-colunas .oferta-foto .deal-img-wrapper.cupom-logo-loja {
    width: 100%;
    max-height: 140px;
    aspect-ratio: auto;
    height: 140px;
  }

  body.deal-is-cupom .oferta-colunas .oferta-foto .deal-img-wrapper.cupom-logo-loja .deal-image-link {
    padding: 14px 22%;
  }

  body.deal-is-cupom .oferta-colunas .oferta-foto .oferta-como-usar {
    order: 2;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
  }
}

body.deal-is-cupom .oferta-abas .info-tabs-header {
  display: flex;
}

body.deal-is-cupom .oferta-abas #tab-sobre-oferta.active,
body.deal-is-cupom .oferta-abas #tab-duvidas.active,
body.deal-is-cupom .oferta-abas #tab-sobre-loja.active {
  display: block;
}

body.deal-is-cupom .oferta-abas #tab-duvidas:not(.active),
body.deal-is-cupom .oferta-abas #tab-sobre-loja:not(.active) {
  display: none;
}

body.deal-is-cupom .oferta-abas #tab-sobre-loja {
  margin-top: 0;
}

/* Abas na pele do Dicas: azul-marinho e o sublinhado laranja. */
.oferta-abas .info-tab-btn {
  font-family: var(--of-display);
  font-weight: 700;
  color: var(--of-slate);
}

.oferta-abas .info-tab-btn:hover,
.oferta-abas .info-tab-btn.active {
  color: var(--of-navy);
}

.oferta-abas .info-tab-btn.active {
  border-bottom-color: var(--of-laranja);
}

/* Barra fixa do celular (spec 4.2): presa no rodapé, aparece quando o botão de cima sai pelo alto da tela. O
   espaço dela fica reservado no fim da página, para nada ficar escondido embaixo. */
.oferta-barra,
.oferta-barra-espaco {
  display: none;
}

@media (max-width: 767px) {
  .oferta-barra-espaco {
    display: block;
    height: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  .oferta-barra {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--of-linha);
    background: rgba(254, 249, 243, 0.96);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.25s ease, visibility 0.25s;
  }

  .oferta-barra--visivel {
    visibility: visible;
    transform: translateY(0);
  }

  .oferta-barra-preco {
    font: 800 1.1rem/1 var(--of-display);
    color: var(--of-navy);
    white-space: nowrap;
  }

  .oferta-barra-cta {
    flex: 1;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--of-laranja);
    color: #fff;
    font: 800 0.875rem/1.2 var(--of-display);
    text-align: center;
    text-decoration: none;
  }

  /* Botão e pílula do cupom na largura toda; no ticket, a pílula do código desce para baixo, na largura toda. */
  .oferta-conteudo .btn-get-deal-braddeals.btn-half-width,
  .oferta-conteudo #deal-cupom-section,
  .oferta-copiar {
    flex-basis: 100%;
    width: 100%;
    justify-content: center;
  }

  .oferta-ticket {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
  }

  /* Sem divisória vertical no celular (o código desce para baixo): os recortes do canhoto saem. */
  .oferta-ticket::before,
  .oferta-ticket::after {
    display: none;
  }

  .oferta-ticket-desconto {
    font-size: 1.15rem;
  }

  .oferta-ticket--registro {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .oferta-ticket-codigo,
  .oferta-ticket-codigo-registro,
  .oferta-ticket-instrucao {
    grid-column: 1 / -1;
    max-width: none;
  }
}

/* Menos movimento: nada anima, e o marcador e os tickets já nascem no lugar. */
@media (prefers-reduced-motion: reduce) {
  .oferta-votos [data-reaction].oferta-voto--pulo > *,
  .oferta-ticket {
    animation: none;
  }

  .oferta-conteudo .btn-get-deal-braddeals.btn-half-width,
  .oferta-copiar,
  .oferta-ticket-codigo,
  .oferta-votos [data-reaction],
  .oferta-social .btn-share-icon,
  .oferta-grupo,
  .oferta-hist-marcador,
  .oferta-barra {
    transition: none;
  }

  .oferta-conteudo .btn-get-deal-braddeals.btn-half-width:hover,
  .oferta-social .btn-share-icon:hover,
  .oferta-grupo:hover {
    transform: none;
  }
}

/* Oferta expirada (spec 4.8): um registro, não uma ferramenta. A foto já sai cinza (#deal-image.expired). */
.oferta-foto .deal-expired-banner {
  top: 14px;
  right: auto;
  left: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--of-tinta);
  box-shadow: none;
  color: #fff;
  font: 800 0.75rem/1.2 var(--of-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.oferta-aviso-fim {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--of-linha);
  border-radius: 12px;
  background: #f1f3f7;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--of-slate);
}

.oferta-aviso-fim b {
  color: var(--of-tinta);
}

.deal-is-expired .oferta-conteudo .price-current-braddeals {
  font-size: 1.5rem;
  color: #7a8499;
}

.oferta-preco-ultimo {
  flex-basis: 100%;
  font-size: 0.82rem;
  color: var(--of-slate);
}

/* Sem o gerador (oferta.html no Vite dev) o molde ainda traz os dois com display inline; aqui o corpo manda. */
.deal-is-expired #deal-link {
  display: none;
}

.deal-is-expired #pih-primary-cta {
  display: block !important;
}

.deal-is-expired .pih-primary-cta {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

/* O min-width cabe "Ver preços atuais e histórico", o texto mais longo: a troca do cliente não muda a largura. */
.deal-is-expired .pih-primary-cta-btn {
  display: inline-block;
  width: auto;
  min-width: min(100%, 22rem);
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--of-navy);
  font-family: var(--of-display);
  text-align: center;
}

.deal-is-expired .pih-primary-cta-btn:hover {
  background: var(--of-navy);
}

.oferta-ticket--registro {
  grid-template-columns: 92px minmax(0, 1fr) auto;
  filter: grayscale(0.5);
}

/* O código do registro é só texto apagado, sem cara de botão. */
.oferta-ticket-codigo-registro {
  font: 700 0.875rem/1.2 var(--of-display);
  letter-spacing: 0.04em;
  color: #7a8499;
}

/* Preço antigo sem destaque (spec 4.8): o selo de desconto também fica cinza. */
.deal-is-expired .oferta-conteudo .price-save-braddeals {
  background: #eef0f4;
  color: #7a8499;
}

#ofertas-parecidas {
  scroll-margin-top: 100px;
}

@media (prefers-reduced-motion: no-preference) {
  .deal-is-expired .pih-primary-cta-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .deal-is-expired .pih-primary-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 29, 58, 0.3);
  }
}

/* ==========================================================================
   Artigos do blog da categoria (spec 4.11): o mesmo bloco das páginas de categoria.
   As regras de "Regras do blog" abaixo são cópia de public/css/categoria.css (o teste
   oferta-blog-categoria compara uma a uma); o gerador põe html.categoria-fase1 na página que leva o bloco,
   por isso os seletores ficam como na folha da categoria.
   ========================================================================== */

/* Tokens que as regras copiadas leem, ligados aos da pele desta página. */
html.categoria-fase1 {
  --h-navy: var(--of-navy);
  --h-slate: var(--of-slate);
  --h-white: #ffffff;
  --h-orange: var(--of-laranja);
  --h-green: var(--of-verde);
  --h-line: var(--of-linha);
  --h-bubble: var(--of-bolha);
  --h-paper: #fff4b8;
  --h-display: var(--of-display);
  --h-text: var(--of-texto);
  --h-hand: var(--of-mao);
}

/* Base do bloco (recommendationBlocksCSS, que as páginas de categoria levam inline). */
.expert-tips-section { max-width: 100%; margin: 3rem 0 2rem; padding: 2.5rem 0; border-top: 1px solid #edf2f7; }
.article-group-block__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.article-group-block__title { margin: 0; font-size: 1.35rem; font-weight: 700; color: #0f1d3a; transition: color 0.3s ease; }
.article-group-block__link { color: #0052A3; text-decoration: none; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; }
.article-group-block__link:hover { text-decoration: underline; color: #ff9d2f; }
.article-group-block__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.article-tile { display: flex; flex-direction: column; text-decoration: none; color: #111; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: all .25s ease; height: 100%; }
.article-tile:hover { box-shadow: 0 8px 20px rgba(0,0,0,.06); transform: translateY(-3px); }
.article-tile__image { width: 100%; aspect-ratio: 5/3; overflow: hidden; position: relative; background: #f3f4f6; }
.article-tile__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.article-tile__body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.article-tile__heading { margin: 0 0 .5rem; font-size: 0.98rem; font-weight: 700; line-height: 1.35; color: #0f1d3a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; }
.article-tile:hover .article-tile__heading { color: #ff9d2f; }
.article-tile__lead { margin: 0; font-size: .82rem; color: #475569; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Reserva de altura: a casca nasce oculta e só aparece com artigos; depois de aberta, a seção não encolhe
   enquanto as fotos dos cartões carregam. */
html.categoria-fase1 .expert-tips-section[data-blog-hydration-shell] {
  min-height: 260px;
}

@media (prefers-reduced-motion: reduce) {
  .article-tile { transition: none; }
  .article-tile:hover { transform: none; }
}

/* Regras do blog (copiadas de public/css/categoria.css) */
/* Títulos de seção: home.css:53-58. */
html.categoria-fase1 .home-section-title,
html.categoria-fase1 .article-group-block__title {
    margin: 0 0 12px;
    font: 800 24px/1.1 var(--h-display);
    letter-spacing: -.3px;
    color: var(--h-navy);
}

/* O cabeçalho do bloco do blog é flex e centra o título com o link; sem a margem de baixo. */
html.categoria-fase1 .article-group-block__title {
    margin: 0;
}

/* Casinha antes do título: home.css:1102-1115. */
html.categoria-fase1 .home-section-title,
html.categoria-fase1 .article-group-block__title {
    position: relative;
    padding-left: 30px;
}

html.categoria-fase1 .home-section-title::before,
html.categoria-fase1 .article-group-block__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    background: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230f1d3a" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11 12 3l9 8"/><path d="M5 10v10h5v-6h4v6h5V10"/></svg>');
}

/* Blog: a seção vira o recado na geladeira. Papel, sombra e ímã são de home.css:1148-1171
   (.home-band--guias); a base do bloco (borda de cima, margens grandes) vem de
   RECOMMENDATION_STYLES e é anulada aqui sem mexer nela. O papel fica na coluna das ofertas
   (.category-offers-section: 1260px com 1rem de cada lado); em vez de levar o padding de 1rem, que
   o engordaria por dentro, ele encolhe 1rem de cada lado e centra. */
html.categoria-fase1 .expert-tips-section {
    position: relative;
    width: calc(100% - 2rem);
    max-width: calc(1260px - 2rem);
    min-width: 0;
    margin: .75rem auto 1.5rem;
    padding: 14px 14px 12px;
    border-top: 0;
    border-radius: 6px;
    background: var(--h-paper);
    box-shadow: 2px 4px 10px rgba(15, 29, 58, .14);
}

html.categoria-fase1 .expert-tips-section::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 18px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--h-orange);
    box-shadow: inset 0 0 0 3px #fff, 0 1px 3px rgba(0, 0, 0, .2);
}

/* Cabeçalho: título e frase empilhados à esquerda, o link "ver todos" (o último filho, posto pela
   hidratação) à direita. */
html.categoria-fase1 .expert-tips-section .article-group-block__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    align-items: center;
    margin-bottom: 0;
}

/* Título em letra à mão: home.css:1148-1152 (.home-band-title); sem a casinha da página. */
html.categoria-fase1 .expert-tips-section .article-group-block__title {
    grid-column: 1;
    padding-left: 0;
    font: 700 26px/1 var(--h-hand);
    letter-spacing: 0;
    color: var(--h-navy);
}

html.categoria-fase1 .expert-tips-section .article-group-block__title::before {
    content: none;
}

html.categoria-fase1 .expert-tips-section .article-group-block__sub {
    display: block;
    grid-column: 1;
    margin: 4px 0 12px;
    font: 600 14px/1.3 var(--h-text);
    color: var(--h-slate);
}

html.categoria-fase1 .expert-tips-section .article-group-block__link {
    grid-column: 2;
    grid-row: 1 / span 2;
    font: 600 13px var(--h-text);
    color: var(--h-navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Hover: a base (recommendation-blocks.mjs:30 e :40) troca a cor para laranja, mas perde para as cores
   daqui. O verde é de propósito: laranja sobre o papel e sobre o branco tem contraste baixo. */
html.categoria-fase1 .expert-tips-section .article-group-block__link:hover,
html.categoria-fase1 .expert-tips-section .article-tile:hover .article-tile__heading {
    color: var(--h-green);
}

/* Cartões: grade de 3; com 2 artigos, de 2; com 1, um cartão deitado. O mockup categoria-blog-v1
   (leitura A) é uma miniatura de 540px: os tamanhos de lá vão multiplicados por ~1,33, o mesmo fator
   do resto da página (o título do cartão de oferta foi de 11,5px no mockup para 16px no ar), com
   arredondamentos: título do cartão em 15px (16px apertava o cartão de 296px da grade de 3) e a foto
   do cartão deitado em 200px (186px pelo fator). */
html.categoria-fase1 .expert-tips-section .article-group-block__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

html.categoria-fase1 .expert-tips-section[data-artigos="2"] .article-group-block__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-group-block__tiles {
    grid-template-columns: minmax(0, 1fr);
}

html.categoria-fase1 .expert-tips-section .article-tile {
    border: 1px solid var(--h-line);
    border-radius: 10px;
    background: var(--h-white);
}

html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-tile {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
}

html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-tile__image {
    height: 100%;
    min-height: 130px;
    aspect-ratio: auto;
}

html.categoria-fase1 .expert-tips-section .article-tile__body {
    padding: 10px 12px 12px;
}

html.categoria-fase1 .expert-tips-section .article-tile__heading {
    margin: 0 0 4px;
    font: 700 15px/1.25 var(--h-display);
    color: var(--h-navy);
}

/* Resumo em duas linhas (a base corta em três: recommendation-blocks.mjs:42). */
html.categoria-fase1 .expert-tips-section .article-tile__lead {
    font-size: 14px;
    line-height: 1.35;
    color: var(--h-slate);
    -webkit-line-clamp: 2;
}

html.categoria-fase1 .expert-tips-section .article-tile__ler {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 6px;
    font: 600 13px var(--h-text);
    color: var(--h-green);
}

/* Com um só artigo a nota aparece como balão (o atributo hidden a esconde nos outros casos). */
html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-group-block__nota {
    margin: 10px 0 0;
    padding: 8px 10px;
    border-radius: 14px 14px 14px 4px;
    background: var(--h-bubble);
    font-size: 14px;
}

/* O rótulo "Cecília ·" do balão sai em negrito (o <b> vem da casca, buildBlogShellHTML), no 600:
   a fonte só carrega 400 e 600. */
html.categoria-fase1 .article-group-block__nota b {
    font-weight: 600;
    color: var(--h-green);
}

/* Celular: os cartões viram uma fileira com rolagem lateral (o gerador e a base os dobram em
   2 e 1 colunas; aqui isso é desfeito). */
@media (max-width: 768px) {
    /* O papel volta à largura toda, como antes do alinhamento com a coluna de 1260px. */
    html.categoria-fase1 .expert-tips-section {
        width: auto;
        max-width: 100%;
        margin-inline: 0;
    }

    html.categoria-fase1 .expert-tips-section .article-group-block__tiles {
        display: flex;
        gap: 10px;
        padding: 3px 0 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    html.categoria-fase1 .expert-tips-section .article-tile {
        flex: 0 0 min(78vw, 260px);
        height: auto;
        scroll-snap-align: start;
    }

    /* Um cartão só não rola: fica deitado na largura toda. */
    html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-group-block__tiles {
        display: block;
        padding: 0;
        overflow: visible;
    }
}

/* Celular estreito: um título de duas linhas em letra à mão espremeria o link ao lado; o link desce. */
@media (max-width: 480px) {
    html.categoria-fase1 .expert-tips-section .article-group-block__header {
        grid-template-columns: minmax(0, 1fr);
    }

    html.categoria-fase1 .expert-tips-section .article-group-block__link {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
        margin-bottom: 8px;
    }

    /* O cartão deitado de 1 artigo: a foto de 200px tomaria mais da metade da tela; volta aos 140px do mockup. */
    html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-tile {
        grid-template-columns: 140px minmax(0, 1fr);
    }

    html.categoria-fase1 .expert-tips-section[data-artigos="1"] .article-tile__image {
        min-height: 110px;
    }
}

/* "Mais ofertas" no celular é um trilho que rola de lado (spec 4.2), cartões de ~160 px como o .trilho do mockup. O
   styles.css fixa a lista em coluna com !important e o cartão em grade; aqui o id e o !important passam por cima, só
   abaixo de 768 px. O trilho rola por dentro: a página não ganha rolagem lateral. */
@media (max-width: 767px) {
    #relacionados-container.related-offers-list {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-bottom: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    #relacionados-container .related-offer-card {
        flex: 0 0 160px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 160px;
        min-width: 0;
        padding: 10px;
        scroll-snap-align: start;
    }

    #relacionados-container .related-offer-left,
    #relacionados-container .related-offer-right,
    #relacionados-container .related-offer-header,
    #relacionados-container .related-offer-footer {
        width: 100%;
        min-width: 0;
        gap: 6px;
    }

    #relacionados-container .related-offer-media {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    #relacionados-container .related-offer-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.9rem;
    }

    #relacionados-container .related-offer-store {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* A descrição, o + e as ações ficam na página da oferta; no trilho só entram a foto, o título e o preço. */
    #relacionados-container .related-offer-description,
    #relacionados-container .related-offer-toggle,
    #relacionados-container .related-offer-actions,
    #relacionados-container .related-offer-old-price,
    #relacionados-container .related-offer-benefit {
        display: none;
    }

    #relacionados-container .related-offer-price {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 6px;
        min-width: 0;
        margin: 0;
    }
}