/* ==========================================================================
   NOWDII · OFERTA PAGE (Paso 7A · paridad con demo-ofertas-v2 sección 3)
   Se usa en:
     - oferta.html (standalone)
     - flyer modal del home (#flyerModal dentro de homepage.js)
   Los estilos están nombrados con prefijo `.of-` para poder reusarse
   dentro de cualquier contenedor.
   ========================================================================== */

:root {
  --of-bg: #0a0a0a;
  --of-bg-2: #141414;
  --of-border: #242424;
  --of-text: #ffffff;
  --of-text-dim: #aaa;
  --of-text-dim-2: #ccc;
  --of-text-faint: #666;
  --of-yellow: #FFE600;
  --of-red: #ff3344;
  --of-gold: #ffcf00;
  --of-purple: #b366ff;
  --of-blue: #3ca5f6;
  --of-whatsapp: #25d366;
}

/* ---------- Base page ---------- */
.oferta-body {
  margin: 0;
  padding: 0;
  background: var(--of-bg);
  color: var(--of-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

* { box-sizing: border-box; }

.oferta-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oh-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--of-text);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.oh-btn:hover { background: rgba(255, 255, 255, 0.14); }
.oh-btn:active { transform: scale(0.92); }

.oh-logo {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--of-text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.oh-logo-accent { color: var(--of-yellow); }

.oferta-main {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 0 2.5rem;
}

/* ---------- Loading / Error ---------- */
.oferta-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 1rem;
  color: var(--of-text-dim);
  font-size: 0.95rem;
}
.oferta-loading i { font-size: 2rem; color: var(--of-yellow); }

.oferta-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 4rem 1.5rem;
  text-align: center;
}
.oferta-empty i { font-size: 3rem; color: var(--of-yellow); margin-bottom: 0.5rem; }
.oferta-empty h2 { font-size: 1.35rem; font-weight: 800; color: var(--of-text); margin: 0; }
.oferta-empty p {
  color: var(--of-text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 360px;
}
.oferta-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--of-yellow);
  color: #000;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 0.12s ease;
}
.oferta-empty-btn:active { transform: scale(0.96); }

/* ==========================================================================
   FLYER · layout compartido (de-ofertas-v2 sección 3)
   Todos los tipos comparten: hero con imagen + tag + big number + brand row,
   body con título + descripción + meta por tipo + precios + CTA
   ========================================================================== */

.of-frame {
  background: var(--of-bg-2);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* ---------- HERO ---------- */
.of-hero {
  position: relative;
  aspect-ratio: 4 / 3.2;
  min-height: 280px;
  max-height: 440px;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Gradient extra por encima del inline (para contraste del big number y brand row) */
.of-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.05) 30%,
    rgba(0, 0, 0, 0.6) 75%,
    rgba(0, 0, 0, 0.92) 100%
  );
  pointer-events: none;
}
/* El tag, big y brand row viven por encima del gradient */
.of-hero > * { position: absolute; z-index: 2; }

/* Botones flotantes en las esquinas del hero (cerrar / compartir) */
.of-hero-btn {
  position: absolute;
  top: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.12s ease, transform 0.12s ease;
}
.of-hero-btn:hover { background: rgba(0, 0, 0, 0.75); }
.of-hero-btn:active { transform: scale(0.92); }
.of-hero-btn.close { left: 14px; }
.of-hero-btn.share { right: 14px; }

/* Cuando hay botones en esquinas, empujamos el tag pill debajo */
.of-hero.has-corner-btn .of-tag {
  top: 60px;
}

/* Tag pill (arriba izquierda) */
.of-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.of-tag i { font-size: 10px; }
.of-tag.relampago { background: rgba(255, 51, 68, 0.95); color: #fff; }
.of-tag.cupon     { background: rgba(255, 207, 0, 0.96); color: #000; }
.of-tag.estandar  { background: rgba(255, 255, 255, 0.95); color: #000; }
.of-tag.combo     { background: rgba(179, 102, 255, 0.96); color: #fff; }

/* Big number (flotante, DERECHA a lo demo)
   Anclado a ambos lados + text-align:right para que nunca se salga por la
   derecha. font-size fluido con clamp() para que escale suave. Margen
   derecho generoso (28px) para que el texto no se vea pegado al borde. */
.of-big {
  position: absolute;
  left: 16px;
  right: 28px;
  bottom: 74px;
  max-width: calc(100% - 44px);
  font-size: clamp(34px, 13vw, 76px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.75);
  z-index: 2;
  pointer-events: none;
}
.of-big small {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  margin-top: 4px;
  opacity: 0.95;
  text-align: right;
  white-space: nowrap;
}
/* Precio anterior tachado abajo del precio grande cuando el hero pinta precio
   en vez de %. Opacity y line-through para que se lea como "antes". */
.of-big small.of-big-price-old {
  font-size: 16px;
  font-weight: 700;
  opacity: 0.7;
  text-decoration: line-through;
  margin-top: 6px;
}
.of-big.red    { color: var(--of-red); }
.of-big.gold   { color: var(--of-gold); }
.of-big.white  { color: #fff; }
.of-big.purple { color: var(--of-purple); }

/* Brand row (abajo del hero) */
.of-brand-row {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

/* Avatar + nombre clickeable — punto de entrada al perfil */
.of-brand-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 2px;
  margin: -2px;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.12s ease;
}
.of-brand-link:hover { background: rgba(255, 255, 255, 0.06); }
.of-brand-link:active { transform: scale(0.98); }
.of-brand-link.is-disabled {
  pointer-events: none;
}

.of-brand-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.of-brand-info { flex: 1; min-width: 0; }

.of-brand-name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.of-brand-name i {
  font-size: 11px;
  color: var(--of-blue);
  flex-shrink: 0;
}

.of-brand-meta {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón +Seguir (brand-row del hero) — Paso 7B.
   Dos labels superpuestos por CSS: idle ("+ Seguir" amarillo) vs.
   active ("✓ Siguiendo" transparente). Toggle por .following. */
.of-follow-btn {
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--of-yellow, #ffe600);
  color: #0a0a0a;
  font-family: inherit;
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.of-follow-btn i { font-size: 10px; }
.of-follow-btn:active { transform: scale(0.96); }
.of-follow-btn:hover { filter: brightness(1.05); }
.of-follow-btn[disabled] { opacity: 0.6; cursor: wait; }

.of-follow-btn .follow-idle,
.of-follow-btn .follow-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.of-follow-btn .follow-active { display: none; }
.of-follow-btn.following {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.of-follow-btn.following .follow-idle   { display: none; }
.of-follow-btn.following .follow-active { display: inline-flex; }

/* Estado cargando — oculta labels sin cambiar dimensiones para evitar
   layout shift. Se aplica mientras la query async determina si el user
   sigue al negocio. Sin sesión detectable no se aplica (idle ya es correcto). */
.of-follow-btn.loading {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  pointer-events: none;
  min-width: 82px;
  min-height: 26px;
}
.of-follow-btn.loading .follow-idle,
.of-follow-btn.loading .follow-active {
  visibility: hidden;
}

/* ---------- BODY ---------- */
.of-body {
  padding: 18px 16px 16px;
  background: var(--of-bg-2);
}

.of-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--of-text);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.of-desc {
  font-size: 13.5px;
  color: var(--of-text-dim);
  line-height: 1.55;
  margin: 0 0 14px;
  white-space: pre-line;
}

/* ---------- META SECTION (varía por tipo) ---------- */
.of-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #1a1a1a;
  border: 1px solid var(--of-border);
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--of-text-dim-2);
}
.of-meta i { color: #888; font-size: 13px; }

/* Relámpago: timer */
.of-meta.relampago {
  background: rgba(255, 51, 68, 0.08);
  border-color: rgba(255, 51, 68, 0.25);
}
.of-meta.relampago i { color: var(--of-red); font-size: 18px; }
.of-meta.relampago .meta-label {
  font-size: 10px;
  font-weight: 800;
  color: #ff8695;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
.of-meta.relampago .timer {
  font-size: 22px;
  font-weight: 900;
  color: var(--of-red);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.02em;
  line-height: 1;
}
.of-meta.relampago.expired .timer { color: #888; font-size: 16px; }

/* Cupón: código estilo boarding pass */
.of-meta.cupon {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, #ffcf00 0%, #ffd633 100%);
  border-color: transparent;
  color: #1a1400;
  padding: 16px 16px 14px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 207, 0, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.of-meta.cupon:active { transform: scale(0.98); }
.of-meta.cupon .code-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.of-meta.cupon .code {
  font-size: 30px;
  font-weight: 900;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.1em;
  margin: 2px 0;
  line-height: 1.05;
  word-break: break-all;
}
.of-meta.cupon .code-tap {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  margin-top: 2px;
}

/* Estándar */
.of-meta.estandar i { color: var(--of-blue); }

/* Combo */
.of-meta.combo {
  background: rgba(179, 102, 255, 0.08);
  border-color: rgba(179, 102, 255, 0.22);
}
.of-meta.combo i { color: var(--of-purple); }

/* ---------- PRICE ---------- */
.of-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  background: #1a1a1a;
  border: 1px solid var(--of-border);
  border-radius: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.of-price-label {
  font-size: 10px;
  font-weight: 800;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: auto;
  align-self: center;
}
.of-price-old {
  font-size: 14px;
  color: var(--of-text-faint);
  text-decoration: line-through;
}
.of-price-new {
  font-size: 28px;
  font-weight: 900;
  color: var(--of-yellow);
  letter-spacing: -0.02em;
}

/* ---------- ACTIONS ---------- */
.of-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.of-btn-primary {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  border: none;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.of-btn-primary:active { transform: scale(0.97); }
.of-btn-primary:hover { filter: brightness(1.08); }

.of-btn-primary.relampago { background: var(--of-red);      color: #fff; }
.of-btn-primary.cupon     { background: var(--of-gold);     color: #1a1400; }
.of-btn-primary.estandar  { background: var(--of-whatsapp); color: #fff; }
.of-btn-primary.combo     { background: var(--of-purple);   color: #fff; }

/* Corazón de Guardar junto al CTA — Paso 7B.
   Square 48×48 (paridad demo sección 3). Default outline blanco
   sobre neutro, activo rellena en amarillo. */
.of-heart-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--of-border);
  background: var(--of-bg-3, #141414);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.of-heart-btn i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, transform 0.2s ease;
}
.of-heart-btn .heart-filled  { opacity: 0; transform: scale(0.8); }
.of-heart-btn .heart-outline { opacity: 1; }
.of-heart-btn.saved {
  background: rgba(255, 230, 0, 0.08);
  border-color: rgba(255, 230, 0, 0.45);
  color: var(--of-yellow, #ffe600);
}
.of-heart-btn.saved .heart-outline { opacity: 0; }
.of-heart-btn.saved .heart-filled  { opacity: 1; transform: scale(1); }
.of-heart-btn:active { transform: scale(0.94); }
.of-heart-btn:hover { filter: brightness(1.08); }
.of-heart-btn[disabled] { opacity: 0.6; cursor: wait; }

/* Estado cargando — oculta ambos iconos sin cambiar el box del botón.
   Igual que .of-follow-btn.loading: aplica solo si hay sesión detectable. */
.of-heart-btn.loading {
  pointer-events: none;
}
.of-heart-btn.loading .heart-outline,
.of-heart-btn.loading .heart-filled {
  opacity: 0;
}

/* Botón secundario Compartir dentro del body */
.of-share-btn {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--of-border);
  border-radius: 12px;
  color: var(--of-text);
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: background 0.12s ease, transform 0.12s ease;
}
.of-share-btn:hover { background: #1c1c1c; }
.of-share-btn:active { transform: scale(0.98); }

/* ---------- Responsive ---------- */
@media (max-width: 440px) {
  .of-title { font-size: 18px; }
  .of-big { bottom: 70px; }
  .of-price-new { font-size: 24px; }
  .of-meta.cupon .code { font-size: 26px; }
}

@media (min-width: 600px) {
  .of-frame { margin: 1rem auto; max-width: 480px; }
}

/* ---------- Focus visible (a11y) ---------- */
.oh-btn:focus-visible,
.of-meta.cupon:focus-visible,
.of-btn-primary:focus-visible,
.of-share-btn:focus-visible,
.of-brand-link:focus-visible,
.of-follow-btn:focus-visible,
.of-heart-btn:focus-visible,
.oferta-empty-btn:focus-visible {
  outline: 2px solid var(--of-yellow);
  outline-offset: 2px;
}

/* ==========================================================================
   Modal flyer del home (#flyerModal)
   Reusa los mismos estilos `.of-*` dentro de un overlay oscuro
   ========================================================================== */
.flyer-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  overflow-y: auto;
  padding: 0 0 2rem;
  animation: flyerFadeIn 0.2s ease;
}

@keyframes flyerFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* El botón cerrar ahora vive dentro del hero (.of-hero-btn.close),
   así que el .flyer-modal-close externo se mantiene oculto. */
.flyer-modal-close { display: none !important; }

.flyer-modal-body {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem 0 0;
}

.flyer-modal-body .of-frame {
  margin: 0 1rem;
}

/* ========================================
   NUDGE "¿Seguir a X?" — Paso 7B.2
   Modal pequeño que aparece después de copiar un cupón o tocar un CTA
   externo, solo si el user tiene sesión y NO sigue al negocio. Una
   sola vez por sesión por negocio (sessionStorage).
   z-index más alto que el flyer modal (9999) para que quede visible
   encima de él cuando se dispara desde el home.
   ======================================== */
.nudge-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
  padding: 20px;
}
.nudge-overlay.active {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(3px);
}

.nudge-card {
  background: #181818;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 22px 22px 18px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  transform: translateY(12px) scale(0.95);
  opacity: 0;
  transition: all 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
.nudge-overlay.active .nudge-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.nudge-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background-color: #2a2a2a;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.08);
}

.nudge-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.3;
}

.nudge-msg {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  color: #aaa;
  line-height: 1.4;
  margin: 0 0 18px;
}

.nudge-actions {
  display: flex;
  gap: 10px;
}
.nudge-cancel,
.nudge-follow {
  flex: 1;
  padding: 11px 14px;
  border-radius: 12px;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.12s ease, filter 0.15s ease;
}
.nudge-cancel {
  background: #2a2a2a;
  color: #ddd;
}
.nudge-follow {
  background: var(--of-yellow, #ffe600);
  color: #0a0a0a;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.nudge-follow i { font-size: 10px; }
.nudge-cancel:hover,
.nudge-follow:hover { filter: brightness(1.08); }
.nudge-cancel:active,
.nudge-follow:active { transform: scale(0.97); }