/* ==========================================================================
   iCase — POPUP DE BIENVENIDA v1.0  ·  "Bloque"
   Archivo: static/css/icase-popup.css
   Requiere: icase-tokens.css

   Captura el email Y entrega el código en pantalla, al instante.
   No depende de que llegue ningún mail.
   ========================================================================== */

.ic-pop-ovl {
  position: fixed; inset: 0; z-index: var(--ic-z-modal);
  background: rgba(16,20,24,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: grid; place-items: end center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--ic-t-base) var(--ic-ease), visibility var(--ic-t-base);
}
@media (min-width: 768px) { .ic-pop-ovl { place-items: center; } }
.ic-pop-ovl.is-open { opacity: 1; visibility: visible; }

.ic-pop {
  position: relative;
  width: min(100%, 460px);
  background: var(--ic-paper);
  border-radius: var(--ic-r-case) var(--ic-r-case) 0 0;
  overflow: hidden;
  transform: translateY(24px);
  transition: transform var(--ic-t-slow) var(--ic-ease);
}
@media (min-width: 768px) { .ic-pop { border-radius: var(--ic-r-case); } }
.ic-pop-ovl.is-open .ic-pop { transform: none; }

.ic-pop__close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: var(--ic-r-ui);
  background: rgba(255,255,255,.9); color: var(--ic-ink);
  cursor: pointer;
}
.ic-pop__close svg { width: 17px; height: 17px; }

/* Franja superior: el número, grande y sin vueltas */
.ic-pop__top {
  background: var(--ic-blue); color: #fff;
  padding: var(--ic-s7) var(--ic-s6) var(--ic-s6);
  text-align: center;
}
.ic-pop__eyebrow {
  display: block;
  font-family: var(--ic-mono); font-size: var(--ic-fs-xs);
  letter-spacing: var(--ic-ls-mono); text-transform: uppercase;
  color: rgba(255,255,255,.8); margin-bottom: var(--ic-s3);
}
.ic-pop__figure {
  font-size: clamp(3rem, 2rem + 5vw, 4.25rem);
  font-weight: var(--ic-fw-black); letter-spacing: -0.05em;
  line-height: .95; margin: 0;
}
.ic-pop__sub { font-size: var(--ic-fs-body); color: rgba(255,255,255,.9); margin: var(--ic-s3) 0 0; }

.ic-pop__body { padding: var(--ic-s6); }
.ic-pop__form { display: grid; gap: var(--ic-s3); }
.ic-pop__input {
  height: 52px; padding-inline: var(--ic-s4);
  border: 1.5px solid var(--ic-line); border-radius: var(--ic-r-ui);
  background: #fff; font-size: 1rem; outline: none;
  transition: border-color var(--ic-t-fast) var(--ic-ease);
}
.ic-pop__input:focus { border-color: var(--ic-blue); }
.ic-pop__input[aria-invalid="true"] { border-color: var(--ic-flame-deep); }
.ic-pop__legal {
  font-size: var(--ic-fs-xs); color: var(--ic-ink-3);
  text-align: center; margin: var(--ic-s3) 0 0; line-height: 1.5;
}
.ic-pop__no {
  display: block; width: 100%; margin-top: var(--ic-s2);
  border: 0; background: none; cursor: pointer;
  font-size: var(--ic-fs-sm); color: var(--ic-ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.ic-pop__no:hover { color: var(--ic-ink); }

/* Estado 2: el código.
   Se muestra al instante. No hay que esperar ningún email. */
.ic-pop__done { display: none; text-align: center; }
.ic-pop.is-done .ic-pop__step1 { display: none; }
.ic-pop.is-done .ic-pop__done  { display: block; }

.ic-pop__code {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ic-s3);
  margin: var(--ic-s5) 0 var(--ic-s4);
  padding: var(--ic-s4);
  border: 2px dashed var(--ic-blue); border-radius: var(--ic-r-ui);
  background: var(--ic-blue-wash);
}
.ic-pop__code strong {
  font-family: var(--ic-mono); font-size: 1.25rem; font-weight: var(--ic-fw-bold);
  letter-spacing: .08em; color: var(--ic-blue-deep);
}
.ic-pop__copy {
  flex: none; min-height: 38px; padding-inline: var(--ic-s4);
  border: 0; border-radius: var(--ic-r-ui);
  background: var(--ic-ink); color: #fff; cursor: pointer;
  font-family: var(--ic-font); font-size: var(--ic-fs-sm); font-weight: var(--ic-fw-bold);
}
.ic-pop__copy.is-copied { background: var(--ic-ok); }
/* Envuelto en :where() y excluyendo los <p> con clase: si no, este selector
   (0,1,1) le gana a .ic-pop__figure (0,1,0) y achica el "10% OFF". */
:where(.ic-pop__done p:not([class])) { color: var(--ic-ink-2); font-size: var(--ic-fs-body); margin: 0 0 var(--ic-s5); }

@media (prefers-reduced-motion: reduce) {
  .ic-pop, .ic-pop-ovl { transition: none; }
}