/* =========================================================
   FINOTRATO — popups.css
   ========================================================= */

.fnt-popup[hidden] { display: none; }
.fnt-popup {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fnt-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 35, 78, .5);
  opacity: 0;
  transition: opacity .3s ease;
}
.fnt-popup.is-open .fnt-popup__overlay { opacity: 1; }

.fnt-popup__box {
  position: relative;
  width: min(440px, 100%);
  background: var(--fondo-base);
  border-radius: var(--radius);
  padding: 36px 32px 32px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 35, 78, .25);
  transform: translateY(16px) scale(.98);
  opacity: 0;
  transition: transform .3s var(--ease-img), opacity .3s ease;
}
.fnt-popup.is-open .fnt-popup__box { transform: none; opacity: 1; }

.fnt-popup__close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  font-size: 26px; line-height: 1;
  color: var(--texto-2);
}
.fnt-popup__close:hover { color: var(--texto); }

.fnt-popup__eyebrow { display: block; color: var(--acento); margin-bottom: 10px; }
.fnt-popup__title { font-size: 26px; font-weight: 700; color: var(--primario); margin-bottom: 10px; line-height: 1.2; }
.fnt-popup__text { font-size: 14px; color: var(--texto-2); line-height: 1.6; margin-bottom: 22px; }

.fnt-popup__form { display: flex; flex-direction: column; gap: 10px; }
.fnt-popup__input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
}
.fnt-popup__input:focus { outline: none; border-color: var(--primario); }
.fnt-popup__submit { width: 100%; }

.fnt-popup__success {
  font-size: 15px;
  font-weight: 600;
  color: var(--verde-ok);
  padding: 16px 0;
}
.fnt-popup__success[hidden] { display: none; }

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.fnt-wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 360;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  transition: transform .2s ease;
}
.fnt-wa-float:hover { transform: scale(1.06); color: #fff; }

/* =========================================================
   ORDER-BUMP (carrito)
   ========================================================= */
.fnt-bump {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 24px;
  padding: 16px;
  background: var(--fondo-suave);
  border: 1px dashed var(--secundario);
  border-radius: var(--radius);
}
.fnt-bump__media { flex-shrink: 0; width: 64px; height: 64px; }
.fnt-bump__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.fnt-bump__body { flex: 1; min-width: 0; }
.fnt-bump__name { font-size: 15px; font-weight: 600; color: var(--texto); margin: 2px 0 4px; }
.fnt-bump__add { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 600px) {
  .fnt-bump { flex-wrap: wrap; }
  .fnt-bump__add { width: 100%; }
}

/* =========================================================
   CARTEL DE ÉXITO (toast) tras suscribirse al popup
   ========================================================= */
.fnt-welcome-back {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 35, 78, .5); opacity: 0;
  transition: opacity .3s ease;
}
.fnt-welcome-back.is-visible { opacity: 1; }

.fnt-welcome-toast {
  position: fixed; left: 50%; top: 50%; z-index: 100000;
  width: min(420px, calc(100vw - 40px));
  transform: translate(-50%, -50%) scale(.9); opacity: 0;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
  background: var(--fondo-base); color: var(--texto);
  padding: 36px 30px 30px; text-align: center;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 35, 78, .32);
}
.fnt-welcome-toast.is-visible { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.fnt-welcome-toast strong {
  display: block; font-family: var(--fuente-display);
  font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--primario);
}
.fnt-welcome-toast__code {
  margin: 20px auto 0; display: inline-block;
  border: 2px dashed var(--primario); background: var(--fondo-suave);
  color: var(--primario); border-radius: var(--radius-sm);
  font-size: 22px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  padding: 12px 24px;
}
.fnt-welcome-toast span { display: block; margin-top: 16px; font-size: 13px; color: var(--texto-2); line-height: 1.4; }
.fnt-welcome-toast__x {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; color: var(--texto-2);
  font-size: 26px; line-height: 1; cursor: pointer; opacity: .7;
}
.fnt-welcome-toast__x:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fnt-welcome-toast, .fnt-welcome-back { transition: opacity .2s ease; }
  .fnt-welcome-toast.is-visible { transform: translate(-50%, -50%); }
}

/* Link discreto de rechazo en el popup (no es un botón, solo subrayado apagado) */
.fnt-popup__decline {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  padding: 4px;
  font-family: var(--fuente-cuerpo);
  font-size: 13px;
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .8;
  cursor: pointer;
  transition: opacity .15s ease, color .15s ease;
}
.fnt-popup__decline:hover { opacity: 1; color: var(--texto); }