/* ════════════════════════════════════════════════════
   NEXT PLAY — leadgate.css
   Banner de captación de leads.

   No es un popup: es una ficha que se acopla a la
   interfaz, como una jugada que entra desde el banquillo.

   Tres estados, gestionados por js/leadgate.js:
     .lg[data-state="teaser"] → compacto, mínima fricción
     .lg[data-state="open"]   → formulario completo + RGPD
     .lg[data-state="done"]   → gracias + WhatsApp

   Anclajes: el botón de WhatsApp vive abajo-izquierda y
   el FAB del chat abajo-derecha, así que en desktop la
   ficha se acopla a la izquierda POR ENCIMA del WhatsApp.
   En móvil es una barra baja que solo crece si el usuario
   la abre: nunca tapa la pantalla sin permiso.
   ════════════════════════════════════════════════════ */

.lg {
  position: fixed;
  z-index: 300;               /* sobre la web, bajo el panel del chat (320) */
  left: 22px;
  bottom: 92px;               /* deja libre el botón de WhatsApp (54px + 22px) */
  width: 372px;
  max-width: calc(100vw - 44px);
  background: linear-gradient(168deg, #16161a 0%, var(--carbon) 60%);
  border: 1px solid var(--hair-d);
  border-radius: 20px;
  color: var(--white);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset;
  overflow: hidden;
  /* Estado de partida de la entrada. La animación la dispara
     .lg.is-in, así que sin JS el banner simplemente no aparece. */
  opacity: 0;
  transform: translateY(26px) scale(.97);
  pointer-events: none;
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}
.lg.is-in { opacity: 1; transform: none; pointer-events: auto; }
.lg.is-out {
  opacity: 0; transform: translateY(14px) scale(.98);
  pointer-events: none;
  transition: opacity .34s ease, transform .34s ease;
}
.lg[hidden] { display: none; }

/* ── Filo superior: la "línea de jugada" que recorre la ficha ──
   El único movimiento continuo del banner. Sutil, 6 s, y se
   detiene si el usuario pide menos animación. */
.lg-edge {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--lime) 18%, var(--red) 52%, var(--lime) 82%, transparent);
  background-size: 220% 100%;
  animation: lgSweep 6s linear infinite;
}
@keyframes lgSweep {
  from { background-position: -110% 0; }
  to   { background-position: 110% 0; }
}

.lg-close {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1; color: var(--grey);
  background: rgba(255,255,255,.05);
  transition: color .2s, background .2s, transform .2s;
}
.lg-close:hover, .lg-close:focus-visible {
  color: var(--white); background: rgba(255,255,255,.12); transform: rotate(90deg);
}

.lg-body { padding: 22px 20px 20px; }

/* ── Cabecera: mini mockup + titular ── */
.lg-head { display: flex; gap: 14px; align-items: flex-start; padding-right: 26px; }

/* Mini mockup: una pantalla diminuta con una métrica que sube.
   Mismo lenguaje visual que los dispositivos de la web. */
.lg-mock {
  flex-shrink: 0; width: 52px; height: 62px;
  background: #08080a; border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: 6px 5px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.lg-mock i {
  display: block; border-radius: 2px;
  background: linear-gradient(180deg, var(--lime), rgba(198,241,63,.25));
  height: var(--h, 30%);
  transform-origin: bottom;
  animation: lgBar 3.2s var(--ease) infinite;
  animation-delay: var(--d, 0s);
}
.lg-mock { flex-direction: row; align-items: flex-end; }
.lg-mock i { flex: 1; }
@keyframes lgBar {
  0%, 100% { transform: scaleY(.62); }
  45%      { transform: scaleY(1); }
}

.lg-kicker {
  display: block; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lime); font-weight: 600; margin-bottom: 7px;
}
.lg-title {
  font-family: var(--f-head); font-weight: 700;
  font-size: 19px; line-height: 1.16; letter-spacing: -.01em;
}
.lg-title em { font-style: normal; color: var(--red); }
.lg-sub { font-size: 12.5px; line-height: 1.5; color: var(--grey); margin-top: 9px; }

/* ── Microcopy de confianza ── */
.lg-trust {
  display: flex; flex-wrap: wrap; gap: 5px 8px;
  margin-top: 14px; font-size: 10.5px; color: var(--grey);
}
.lg-trust span { display: inline-flex; align-items: center; gap: 4px; }
.lg-trust span::before { content: '✓'; color: var(--lime); font-size: 10px; }

/* ── Campos ── */
.lg-form { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

.lg-field { position: relative; }
.lg-field > label {
  position: absolute; left: 13px; top: 12px;
  font-size: 12.5px; color: var(--grey-d); pointer-events: none;
  transition: transform .22s var(--ease), font-size .22s var(--ease), color .22s;
}
.lg-field input:focus + label,
.lg-field input:not(:placeholder-shown) + label,
.lg-field textarea:focus + label,
.lg-field textarea:not(:placeholder-shown) + label {
  transform: translateY(-9px); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--lime);
}
.lg-field input,
.lg-field textarea,
.lg-field select {
  width: 100%; font-family: inherit; font-size: 13.5px; color: var(--white);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hair-d); border-radius: 11px;
  padding: 17px 13px 7px;
  transition: border-color .2s, background .2s;
}
.lg-field select { padding: 12px 13px; color: var(--grey); }
.lg-field select:valid { color: var(--white); }
.lg-field textarea { padding-top: 18px; resize: none; }
.lg-field input:focus,
.lg-field textarea:focus,
.lg-field select:focus {
  outline: none; border-color: var(--lime); background: rgba(198,241,63,.07);
}
/* Error: solo se marca cuando JS lo pide, nunca en el primer render */
.lg-field.err input, .lg-field.err textarea, .lg-field.err select { border-color: var(--red); }
.lg-err {
  display: none; font-size: 11px; color: #ff8a94; margin-top: 5px;
}
.lg-field.err .lg-err { display: block; }

/* Honeypot: invisible para personas, presente en el DOM para bots.
   No usa display:none (algunos bots lo detectan) ni deja el campo
   accesible al tabulador o a lectores de pantalla. */
.lg-hp {
  position: absolute !important;
  left: -9999px; top: auto; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* ── Consentimiento ── */
.lg-consent {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 10.5px; line-height: 1.5; color: var(--grey);
  margin-top: 2px;
}
.lg-consent input[type="checkbox"] {
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
  accent-color: var(--lime); cursor: pointer;
}
.lg-consent a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.lg-consent a:hover { color: var(--lime); }
.lg-consent.err { color: #ff8a94; }
.lg-consent.err input[type="checkbox"] { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── Botón ── */
.lg-btn {
  width: 100%; font-family: var(--f-head); font-weight: 700; font-size: 14px;
  background: var(--lime); color: var(--carbon);
  padding: 14px 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), opacity .2s;
}
.lg-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(198,241,63,.3); }
.lg-btn[disabled] { opacity: .55; pointer-events: none; }
.lg-btn i { font-style: normal; font-size: 12px; }

.lg-fine { font-size: 10px; color: var(--grey-d); text-align: center; }
.lg-fine a { color: var(--grey); text-decoration: underline; }

/* Aviso de fallo de envío: mensaje genérico, sin detalles internos */
.lg-fail {
  display: none; font-size: 11.5px; line-height: 1.45; color: #ff8a94;
  background: rgba(211,58,72,.12); border: 1px solid rgba(211,58,72,.3);
  border-radius: 10px; padding: 9px 11px;
}
.lg.has-fail .lg-fail { display: block; }

/* ── Visibilidad por estado ── */
.lg-step { display: none; }
.lg[data-state="teaser"] .lg-step-teaser,
.lg[data-state="open"]   .lg-step-open,
.lg[data-state="done"]   .lg-step-done { display: block; }
.lg[data-state="open"]   { width: 400px; }

/* ── Estado final ── */
.lg-done-mark {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(198,241,63,.15); border: 1px solid rgba(198,241,63,.4);
  color: var(--lime); display: grid; place-items: center;
  font-size: 19px; margin-bottom: 13px;
}
.lg-done-t { font-family: var(--f-head); font-weight: 700; font-size: 18px; line-height: 1.2; }
.lg-done-p { font-size: 12.5px; color: var(--grey); margin-top: 8px; line-height: 1.5; }
.lg-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; width: 100%;
  font-family: var(--f-head); font-weight: 700; font-size: 13.5px;
  background: #22c15e; color: #fff; padding: 13px 18px; border-radius: 999px;
  transition: transform .2s var(--ease);
}
.lg-wa:hover { transform: translateY(-2px); }

/* ════════ MÓVIL ════════
   La ficha pasa a ser una barra baja. En estado "teaser" ocupa
   lo mínimo; solo al abrirla crece a hoja inferior, y nunca por
   encima del 82% de la altura para que siempre se vea la web
   detrás y quede claro que se puede cerrar. */
@media (max-width: 700px) {
  .lg {
    left: 10px; right: 10px; bottom: 10px;
    width: auto; max-width: none;
    border-radius: 18px;
    transform: translateY(30px);
  }
  .lg[data-state="open"] { width: auto; }
  .lg-body { padding: 18px 16px 16px; }
  .lg[data-state="open"] .lg-body {
    max-height: 82dvh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lg-title { font-size: 17px; }
  .lg-mock { width: 44px; height: 52px; }
  .lg-close { width: 34px; height: 34px; }  /* diana táctil mayor */

  /* Con la hoja abierta, los botones flotantes estorban: se apartan */
  body.lg-sheet .wa-float,
  body.lg-sheet .chat-fab { opacity: 0; pointer-events: none; }
}
.wa-float, .chat-fab { transition: opacity .3s ease, transform .25s var(--ease); }

/* En pantallas muy bajas, el teaser no muestra el subtítulo */
@media (max-height: 560px) {
  .lg[data-state="teaser"] .lg-sub { display: none; }
}

/* ════════ Accesibilidad ════════ */
@media (prefers-reduced-motion: reduce) {
  .lg, .lg.is-in, .lg.is-out { transition: opacity .2s linear; transform: none; }
  .lg-edge, .lg-mock i { animation: none; }
  .lg-btn:hover, .lg-wa:hover { transform: none; }
}