/* ============================================================
   Innova Seguridad - Modal de captacion de leads WhatsApp
   ============================================================ */
:root{
  --innova-brand:#CC0000;
  --innova-wa:#25D366;
  --innova-wa-dark:#1da851;
}

/* Overlay */
.ilm-overlay{
  position:fixed; inset:0; z-index:2147483000;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center; justify-content:center;
  padding:16px;
  -webkit-tap-highlight-color:transparent;
}
.ilm-overlay.ilm-open{ display:flex; }

/* Caja del modal */
.ilm-modal{
  width:100%; max-width:430px;
  background:#fff; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  overflow:hidden;
  font-family:Arial,Helvetica,sans-serif;
  animation:ilm-pop .18s ease-out;
  max-height:92vh; overflow-y:auto;
}
@keyframes ilm-pop{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }

/* Cabecera */
.ilm-head{
  background:var(--innova-brand);
  color:#fff; padding:16px 20px;
  position:relative;
}
.ilm-head h3{ margin:0; font-size:18px; line-height:1.25; color:#fff; }
.ilm-head p{ margin:4px 0 0; font-size:12.5px; opacity:.92; color:#fff; }
.ilm-wa-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--innova-wa); color:#fff;
  font-size:11px; font-weight:bold;
  padding:3px 8px; border-radius:20px; margin-bottom:8px;
}
.ilm-close{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; color:#fff;
  font-size:26px; line-height:1; cursor:pointer; opacity:.9;
}
.ilm-close:hover{ opacity:1; }

/* Cuerpo / formulario */
.ilm-body{ padding:18px 20px 20px; }
.ilm-field{ margin-bottom:12px; }
.ilm-field label{
  display:block; font-size:12.5px; font-weight:bold;
  color:#333; margin-bottom:4px;
}
.ilm-field label .ilm-req{ color:var(--innova-brand); }
.ilm-field input,
.ilm-field select,
.ilm-field textarea{
  width:100%; box-sizing:border-box;
  border:1px solid #ccc; border-radius:8px;
  padding:10px 11px; font-size:14px; color:#111;
  background:#fff; font-family:inherit;
}
.ilm-field input:focus,
.ilm-field select:focus,
.ilm-field textarea:focus{
  outline:none; border-color:var(--innova-brand);
  box-shadow:0 0 0 2px rgba(204,0,0,.15);
}
.ilm-field textarea{ resize:vertical; min-height:64px; }

/* Honeypot: oculto para humanos */
.ilm-hp{ position:absolute !important; left:-9999px !important; top:-9999px !important; height:0; width:0; overflow:hidden; }

/* Boton enviar */
.ilm-submit{
  width:100%; border:0; border-radius:9px;
  background:var(--innova-wa); color:#fff;
  font-size:16px; font-weight:bold; cursor:pointer;
  padding:13px 14px; margin-top:4px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s ease;
}
.ilm-submit:hover{ background:var(--innova-wa-dark); }
.ilm-submit:disabled{ opacity:.7; cursor:default; }
.ilm-submit svg{ width:20px; height:20px; fill:#fff; }

.ilm-note{
  margin:12px 0 0; font-size:11.5px; color:#777; text-align:center; line-height:1.4;
}
.ilm-error{
  display:none; margin:0 0 10px; font-size:12.5px;
  color:#b00020; background:#fde7ea; border:1px solid #f3c2ca;
  padding:8px 10px; border-radius:7px;
}
.ilm-error.ilm-show{ display:block; }

/* ============================================================
   Boton flotante de WhatsApp (reemplaza el widget wcs viejo)
   ============================================================ */
/* Oculta el widget flotante de WhatsApp anterior (whatsapp_chat_support) */
.whatsapp_chat_support{ display:none !important; }

.ilm-fab{
  position:fixed; z-index:2147482900;
  bottom:8px; right:20px;
  width:58px; height:58px; border-radius:50%;
  background:var(--innova-wa); color:#fff;
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  -webkit-tap-highlight-color:transparent;
  animation:ilm-fab-pulse 2.2s infinite;
  transition:transform .15s ease, background .15s ease;
}
.ilm-fab:hover{ transform:scale(1.06); background:var(--innova-wa-dark); }
.ilm-fab svg{ width:32px; height:32px; fill:#fff; }
.ilm-fab .ilm-fab-tip{
  position:absolute; right:70px; white-space:nowrap;
  background:#333; color:#fff; font-family:Arial,Helvetica,sans-serif;
  font-size:12.5px; padding:6px 10px; border-radius:6px;
  opacity:0; pointer-events:none; transform:translateX(6px);
  transition:opacity .15s ease, transform .15s ease;
}
.ilm-fab:hover .ilm-fab-tip{ opacity:1; transform:none; }
.ilm-fab .ilm-fab-tip:after{
  content:''; position:absolute; top:50%; right:-5px; margin-top:-5px;
  border:5px solid transparent; border-left-color:#333;
}
@keyframes ilm-fab-pulse{
  0%{ box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:480px){
  .ilm-fab{ width:54px; height:54px; bottom:10px; right:14px; }
  .ilm-fab .ilm-fab-tip{ display:none; }
}

/* ============================================================
   Bloque CTA que reemplaza los formularios de correo
   ============================================================ */
.ilm-cta-box{
  border:1px solid #e5e5e5; border-radius:12px;
  padding:20px; text-align:center; background:#fafafa;
  font-family:Arial,Helvetica,sans-serif; max-width:420px;
}
.ilm-cta-box p{ margin:0 0 14px; font-size:14.5px; color:#444; line-height:1.45; }
.ilm-cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--innova-wa); color:#fff !important;
  font-size:15.5px; font-weight:bold; text-decoration:none;
  padding:13px 22px; border-radius:9px; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.ilm-cta-btn:hover{ background:var(--innova-wa-dark); transform:translateY(-1px); color:#fff !important; }
.ilm-cta-btn svg{ width:22px; height:22px; fill:#fff; }

/* Responsive */
@media (max-width:480px){
  .ilm-modal{ max-width:100%; border-radius:12px; }
  .ilm-head h3{ font-size:16.5px; }
  .ilm-cta-box{ max-width:100%; }
}
