/* LA VENTANA «CUHO ESTÁ PREPARANDO SU LANZAMIENTO» (lib/lanzamiento.ts) y la
   página /lanzamiento, que lleva el mismo formulario para quien no tiene
   JavaScript. Usa los colores y las letras de la web (site-brand.css). No
   guarda nada en el navegador: ni cookies ni almacenamiento. */

.cl-ventana {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 30px 28px 24px;
  border: 1px solid var(--line, #e7e4ef);
  border-radius: 24px;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(168, 85, 247, .12), transparent 60%),
    var(--panel, #fff);
  color: var(--ink, #16181d);
  box-shadow: 0 30px 90px -30px rgba(76, 29, 149, .45), 0 2px 6px rgba(22, 24, 29, .06);
}
.cl-ventana::backdrop {
  background: rgba(36, 22, 74, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cl-ventana[open] { animation: cl-entra .22s ease-out; }
@keyframes cl-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cl-ventana[open] { animation: none; } }

.cl-cerrar {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: transparent; color: var(--muted, #62667a);
  font: 400 26px/1 system-ui, sans-serif; cursor: pointer;
}
.cl-cerrar:hover { background: var(--panel-2, #f6f5fb); color: var(--ink, #16181d); }
.cl-cerrar:focus-visible { outline: 2px solid var(--purple, #6d28d9); outline-offset: 2px; }

.cl-sello {
  display: inline-block; margin-bottom: 12px; padding: 4px 10px;
  border-radius: 999px; background: #f1ecfe; color: var(--purple, #6d28d9);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.cl-titulo {
  margin: 0 0 8px; padding-right: 28px;
  font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800; font-size: 25px; line-height: 1.2; letter-spacing: -.02em;
  text-wrap: balance;
}
.cl-texto { margin: 0 0 20px; color: var(--ink-2, #3d4048); font-size: 15px; line-height: 1.6; }

.cl-form { display: grid; gap: 12px; margin: 0; }
.cl-etiqueta { font-size: 13.5px; font-weight: 600; color: var(--ink-2, #3d4048); }
.cl-campo {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--line-2, #d9d5e6); border-radius: 12px;
  background: #fff; color: var(--ink, #16181d); font: inherit; font-size: 15px;
}
.cl-campo:focus { outline: none; border-color: var(--violet, #7c3aed); box-shadow: 0 0 0 4px rgba(124, 58, 237, .15); }
.cl-casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-2, #3d4048); cursor: pointer; }
.cl-casilla input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--purple, #6d28d9); flex: none; }
.cl-info { margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted, #62667a); }
.cl-info a, .cl-acceso a { color: var(--purple, #6d28d9); font-weight: 600; }
.cl-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fdecec; color: #9f1d1d; font-size: 13.5px; }
.cl-boton {
  margin-top: 4px; padding: 13px 18px; border: 0; border-radius: 12px;
  background: var(--grad, linear-gradient(120deg, #7c3aed, #a855f7 52%, #6d28d9));
  color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 12px 30px -14px rgba(109, 40, 217, .7);
}
.cl-boton:hover { filter: brightness(1.05); }
.cl-boton:focus-visible { outline: 3px solid var(--lav-soft, #d9c8fb); outline-offset: 2px; }
.cl-boton[disabled] { opacity: .65; cursor: progress; }
.cl-hecho {
  margin: 4px 0 0; padding: 14px 16px; border-radius: 14px;
  background: var(--mint, #e7f1ec); color: #14532d; font-size: 15px; line-height: 1.55;
}
.cl-acceso { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--muted, #62667a); }

/* La trampa para robots: fuera de la vista y del teclado, pero en el DOM. */
.cl-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* La página /lanzamiento: el mismo contenido, en la columna de las legales. */
.cl-pagina { max-width: 560px; }
.cl-pagina .cl-tarjeta {
  margin-top: 6px; padding: 24px; border: 1px solid var(--line, #e7e4ef);
  border-radius: 20px; background: var(--panel, #fff); box-shadow: var(--glow, none);
}