/* ============================================================
   IbeKa — Hoja de estilos propia
   Identidad basada en ibeka.co (cosmetics): degradado azul→
   púrpura→rosa, acento lima, tipografía Poppins. Todo local.
   ============================================================ */

/* ---------- Tipografía Poppins (local, sin CDN) ---------- */
@font-face { font-family:'Poppins'; font-weight:400; font-display:swap; src:url('../vendor/fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-display:swap; src:url('../vendor/fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:700; font-display:swap; src:url('../vendor/fonts/poppins-700.woff2') format('woff2'); }

:root {
  /* Degradado de marca (favicon ibeka.co) */
  --g1:#5B5BD6;   /* azul-índigo */
  --g2:#9B4DE0;   /* púrpura */
  --g3:#FF4FA3;   /* rosa */
  --grad: linear-gradient(135deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);

  --brand:        #9B4DE0;  /* púrpura principal */
  --brand-dark:   #7A2FC0;
  --brand-pink:   #FF4FA3;
  --brand-light:  #F3E9FC;
  --accent:       #BAF771;  /* lima */
  --accent-dark:  #94d24a;

  --ink:          #17121F;  /* casi negro */
  --ink-soft:     #4A4458;
  --bg:           #FAFAF8;  /* blanco hueso */
  --bg-soft:      #F3F2F7;
  --gray:         #6E6880;
  --line:         #E7E3EE;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--ink); }
a { text-decoration: none; }

.text-brand { color: var(--brand) !important; }
.text-pink  { color: var(--brand-pink) !important; }
.bg-brand   { background: var(--brand) !important; }
.bg-ink     { background: var(--ink) !important; }
.bg-soft    { background: var(--bg-soft) !important; }
.bg-grad    { background: var(--grad) !important; }
.text-gradient {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Logo wordmark "IbeKa" (Poppins) ---------- */
.wm {
  font-family:'Poppins', sans-serif; font-weight:600;
  font-size:1.6rem; letter-spacing:-.02em; color:var(--ink);
  line-height:1; display:inline-flex; align-items:baseline;
}
.wm .k { font-weight:700; }
.wm-light { color:#fff; }
.wm .dot { font-size:.55em; font-weight:600; color:var(--brand-pink); margin-left:1px; }

/* Insignia circular con la K (degradado) */
.k-badge{
  width:40px;height:40px;border-radius:50%;
  background:var(--grad); display:grid;place-items:center;
  color:#fff;font-family:'Poppins';font-weight:700;font-size:1.3rem;
  box-shadow:0 3px 10px rgba(155,77,224,.4);
}

/* ---------- Botones ---------- */
.btn-brand {
  background: var(--grad); color:#fff; font-weight:600;
  border-radius:999px; padding:.65rem 1.6rem; border:none;
  background-size:140% 140%; transition:filter .2s, transform .2s;
}
.btn-brand:hover { color:#fff; filter:brightness(1.06); transform:translateY(-1px); }

.btn-outline-brand {
  color:var(--brand); font-weight:600; border-radius:999px;
  padding:.65rem 1.6rem; border:2px solid var(--brand); background:transparent; transition:all .2s;
}
.btn-outline-brand:hover { background:var(--brand); color:#fff; }

.btn-accent {
  background:var(--accent); color:var(--ink); font-weight:700;
  border-radius:999px; padding:.7rem 1.8rem; border:none;
}
.btn-accent:hover { background:var(--accent-dark); color:var(--ink); }

/* ---------- Navbar ---------- */
.navbar-ibeka { background:transparent; padding:1rem 2rem; transition:background .35s, box-shadow .35s, padding .35s; }
.navbar-ibeka.scrolled { background:rgba(23,18,31,.92); backdrop-filter:blur(6px); box-shadow:0 4px 18px rgba(23,18,31,.25); padding:.55rem 2rem; }
.navbar-ibeka .nav-link { color:#fff; font-weight:600; opacity:.9; }
.navbar-ibeka .nav-link:hover { opacity:1; color:var(--accent); }

/* ---------- Hero ---------- */
.hero { background:var(--ink); color:#fff; padding:9rem 0 5rem; overflow:hidden; position:relative; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(900px 500px at 80% -10%, rgba(255,79,163,.35), transparent 60%),
             radial-gradient(700px 500px at 0% 100%, rgba(91,91,214,.45), transparent 55%);
}
.hero > .container { position:relative; z-index:1; }
.hero h1 { color:#fff; font-size:clamp(2.2rem,4vw,3.4rem); line-height:1.12; }
.hero h1 .accent { color:var(--accent); }
.hero p.lead { color:#e4def0; font-size:1.2rem; }
.hero img { max-width:100%; filter:drop-shadow(0 18px 40px rgba(0,0,0,.4)); }

/* ---------- Secciones ---------- */
.section { padding:5rem 0; }
.section-title { font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:.5rem; }
.section-sub { color:var(--gray); max-width:720px; margin:0 auto 2.5rem; }

/* ---------- Tarjeta de característica ---------- */
.feature-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.8rem 1.5rem; height:100%; transition:transform .2s, box-shadow .2s, border-color .2s; }
.feature-card:hover { transform:translateY(-6px); box-shadow:0 16px 36px rgba(155,77,224,.16); border-color:var(--brand); }
.feature-ico { width:60px;height:60px;display:grid;place-items:center;border-radius:14px;background:var(--brand-light);color:var(--brand);margin-bottom:1rem; }
.feature-ico svg { width:30px;height:30px; }
.feature-card h5 { font-size:1.05rem; }
.feature-card p  { color:var(--gray); font-size:.94rem; margin:0; }

/* ---------- Módulos ---------- */
.module-soft { background:var(--bg-soft); }
.checklist { list-style:none; padding:0; margin:0; }
.checklist li { display:flex; gap:.8rem; margin-bottom:1rem; align-items:flex-start; }
.checklist li svg { flex:0 0 22px; color:var(--brand); margin-top:3px; }

/* ---------- Integraciones ---------- */
.integration-pill { border:1px solid var(--line); border-radius:12px; padding:.9rem 1.2rem; font-weight:600; color:var(--ink-soft); text-align:center; background:#fff; }

/* ---------- CTA ---------- */
.cta { background:var(--grad); color:#fff; border-radius:28px; padding:3.5rem 2rem; text-align:center; }
.cta h2 { color:#fff; }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink); color:#c7c0d6; padding:3.5rem 0 1.5rem; }
.site-footer h6 { color:#fff; text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; }
.site-footer a { color:#c7c0d6; }
.site-footer a:hover { color:var(--accent); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.2rem; font-size:.85rem; }

/* ---------- WhatsApp flotante ---------- */
.wa-float { position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:1050; }
.wa-float svg { width:30px; height:30px; fill:#fff; }

/* ============================================================
   PANEL ADMIN
   ============================================================ */
.admin-body { background:var(--bg-soft); }
.auth-wrap { min-height:100vh; display:grid; place-items:center; background:var(--grad); padding:1rem; }
.auth-card { background:#fff; border-radius:22px; padding:2.5rem; width:100%; max-width:410px; box-shadow:0 24px 60px rgba(0,0,0,.3); }

.nav-pills .nav-link.active { background:var(--brand); }
.nav-pills .nav-link { color:var(--brand); font-weight:600; }
.form-control:focus { border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(155,77,224,.2); }

.admin-layout { display:flex; min-height:100vh; }
.sidebar-admin { width:250px; background:var(--ink); color:#cfc6dd; flex-shrink:0; padding:1.2rem 0; }
.sidebar-admin .brand { padding:0 1.4rem 1.2rem; border-bottom:1px solid rgba(255,255,255,.08); }
.nav-item-admin { display:flex; align-items:center; gap:.7rem; color:#cfc6dd; padding:.7rem 1.4rem; font-weight:600; font-size:.94rem; }
.nav-item-admin svg { width:18px; height:18px; }
.nav-item-admin:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-item-admin.active { background:var(--brand); color:#fff; }

.admin-main { flex:1; min-width:0; }
.admin-topbar { background:#fff; border-bottom:1px solid var(--line); padding:.9rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.admin-content { padding:1.5rem; }

.stat-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.3rem; }
.stat-card .v { font-size:1.8rem; font-weight:700; }
.stat-card .l { color:var(--gray); font-size:.85rem; }
.stat-ico { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--brand-light); color:var(--brand); }

.card-soft { background:#fff; border:1px solid var(--line); border-radius:16px; }
.badge-soft { background:var(--brand-light); color:var(--brand-dark); font-weight:600; }

/* ============================================================
   APP MÓVIL + SALES FORCE TRACKING
   ============================================================ */
.app-stage { background:var(--bg-soft); min-height:100vh; padding:2rem 1rem; }
.phone { width:340px; max-width:100%; margin:0 auto; background:#fff; border-radius:38px; overflow:hidden; border:10px solid var(--ink); box-shadow:0 24px 60px rgba(23,18,31,.32); }
.phone-notch { height:26px; background:var(--ink); }
.app-header { background:var(--grad); color:#fff; padding:1rem 1.1rem; }
.app-body { padding:1rem 1.1rem; min-height:520px; }
.app-tabbar { display:flex; justify-content:space-around; border-top:1px solid var(--line); padding:.6rem 0; background:#fff; }
.app-tabbar a { color:var(--gray); font-size:.68rem; text-align:center; cursor:pointer; }
.app-tabbar a svg { width:22px; height:22px; display:block; margin:0 auto 2px; }
.app-tabbar a.active { color:var(--brand); }

/* ---- En el teléfono (o instalada como PWA): pantalla completa, sin marco demo ----
   En escritorio se conserva la maqueta de "teléfono". */
@media (max-width: 600px), (display-mode: standalone) {
  .app-stage { padding:0; background:#fff; }
  .app-stage > .text-center.mb-3,             /* cabecera "demo" superior */
  .app-stage > p.text-center { display:none; } /* enlaces inferiores */
  .phone { width:100%; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; min-height:100vh; min-height:100dvh; }
  .phone-notch { display:none; }
  .app-header { padding-top:calc(1rem + env(safe-area-inset-top)); }
  .app-body { min-height:calc(100dvh - 9.5rem); }
  .app-tabbar { position:sticky; bottom:0; padding-bottom:calc(.6rem + env(safe-area-inset-bottom)); }
}

.app-list-item { border:1px solid var(--line); border-radius:12px; padding:.8rem; margin-bottom:.7rem; cursor:pointer; }
.app-input { border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; width:100%; font-family:inherit; }

/* Banner de seguimiento activo */
.track-banner { background:var(--ink); color:#fff; font-size:.74rem; padding:.45rem .8rem; display:flex; align-items:center; gap:.5rem; }
.track-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(186,247,113,.7); animation:pulse 1.6s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(186,247,113,.7)} 70%{box-shadow:0 0 0 8px rgba(186,247,113,0)} 100%{box-shadow:0 0 0 0 rgba(186,247,113,0)} }

/* Tarjeta de visita / distancia / timer */
.visit-meta { display:flex; gap:.5rem; }
.visit-chip { flex:1; border:1px solid var(--line); border-radius:12px; padding:.6rem; text-align:center; }
.visit-chip .n { font-size:1.15rem; font-weight:700; }
.visit-chip .t { font-size:.66rem; color:var(--gray); }
.geo-ok   { border-color:var(--accent-dark); background:#f3fbe7; }
.geo-ok .n{ color:#5f9e1f; }
.geo-far  { border-color:#f0c0d4; background:#fdeef5; }
.geo-far .n{ color:var(--brand-pink); }

.btn-venta   { background:var(--accent); color:var(--ink); font-weight:700; border:none; border-radius:12px; padding:.75rem; width:100%; }
.btn-venta:disabled { background:#e4e4e4; color:#9a9a9a; }
.btn-noventa { background:#fff; color:var(--brand-pink); font-weight:700; border:2px solid var(--brand-pink); border-radius:12px; padding:.7rem; width:100%; }
.btn-noventa:disabled { border-color:#ddd; color:#bbb; }

.range-demo { width:100%; }
.muted-note { font-size:.72rem; color:var(--gray); }