/* ============================================================
   iMP · Enganche de la landing de registro
   Dos piezas que solo viven aqui, nunca en la pagina de gracias:

   1. Barra fija abajo con el ancla al formulario
   2. Ventana de salida, con el cuaderno y el formulario, cuando el
      puntero se va de la ventana

   Las dos aparecen SOLO cuando aportan algo: la barra se esconde
   mientras el formulario esta a la vista y cuando llega la tarjeta
   roja, que ya lleva su propio boton.
   ============================================================ */

/* ============================================================
   1 · Barra fija
   ============================================================ */
.barra {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  /* fuera de pantalla hasta que toca; nunca display:none, que asi la
     entrada y la salida se pueden animar */
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 380ms cubic-bezier(.2, .7, .3, 1), visibility 380ms;
  background: rgba(10, 10, 10, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .45);
}
.barra--visible { transform: none; visibility: visible; }

.barra__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2.4vw, 28px);
  padding-block: 12px;
  /* en iPhone, por encima de la barra de gestos */
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.barra__txt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: clamp(.86rem, .4vw + .78rem, 1.02rem);
  line-height: 1.35;
  color: var(--c-text);
}
.barra__punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
  box-shadow: 0 0 0 4px rgba(237, 30, 121, .2);
}
.barra__txt b { font-weight: var(--fw-semi); }
.barra__txt span { color: var(--c-text-muted); }

.barra__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-height: 46px;
  padding-inline: clamp(1.1rem, 2.4vw, 1.9rem);
  border: 0;
  border-radius: var(--r-full);
  background: var(--c-accent-fill);
  color: #FFFFFF;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: clamp(.85rem, .4vw + .78rem, .98rem);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(237, 30, 121, .3);
  transition: background var(--t-fast), transform var(--t-fast);
}
.barra__cta:hover { background: var(--c-accent-fill-h); transform: translateY(-1px); }
.barra__cta:active { transform: translateY(0); }

/* En pantalla estrecha el reclamo se queda en una linea y el boton manda */
@media (max-width: 599px) {
  .barra__caja { gap: 12px; }
  .barra__txt { font-size: .82rem; }
  .barra__txt .barra__zona { display: none; }
}
@media (max-width: 399px) {
  .barra__txt { display: none; }
  .barra__cta { flex: 1; }
}