/* home-offer.css — Bloque de oferta destacada del hero + WhatsApp secundario.
   AISLADO: no toca shop-home.css ni styles.css ni dynamic-prices.js.
   Reversible: borrar el <link> y este archivo deshace todo.
   Tema claro del home (fondo blanco, texto oscuro). Usa las vars de shop-home.css. */

.shop-price-box.shop-offer-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  width: fit-content;
  max-width: 100%;
  border: 2px solid var(--tmp-yellow-line, #e7c300);
  border-radius: 10px;
  background: var(--tmp-yellow-soft, #fff7bf);
  box-shadow: var(--tmp-shadow, 0 10px 28px rgba(17, 24, 39, 0.08));
  padding: 0.85rem 1.05rem;
}
.shop-offer-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  background: var(--tmp-yellow, #ffd600);
  color: var(--tmp-black, #0b1326);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.shop-offer-box .shop-price-old {
  color: var(--tmp-muted, #667085);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: line-through;
}
.shop-offer-box .shop-price-value { color: var(--tmp-black, #0b1326); }
.shop-offer-box .shop-price-note { color: var(--tmp-muted, #667085); }
.shop-offer-box .shop-offer-save {
  color: var(--tmp-green, #009430);
  font-weight: 900;
  font-size: 0.95rem;
}
.shop-offer-box .shop-offer-cuotas {
  color: var(--tmp-green, #009430);
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.3;
}

/* WhatsApp como acción secundaria (no compite con "Comprar ahora") */
.shop-hero-wa-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  color: #46d27e; /* verde claro: buen contraste sobre el hero oscuro */
  font-weight: 800;
  font-size: 0.98rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-hero-wa-secondary:hover { color: #ffffff; }

/* Menú más liviano: oculta el buscador del nav (clutter de investigación) */
.shop-nav-search-group { display: none; }