/* Mockups: MacBook con el panel + iPhone con WhatsApp. Compartido por index.html y crm.html */
/* ── Dispositivos ─────────────────────────────────────── */
.stage{position:relative;container-type:inline-size;width:100%;max-width:780px;margin-inline:auto;
  padding-bottom:clamp(16px,3cqw,28px);padding-left:clamp(22px,6.5cqw,62px)}

/* MacBook */
.macbook{position:relative;font-size:clamp(5.6px,1.74cqw,9.8px)}
.mb-lid{background:linear-gradient(165deg,#2E2926 0%,#1A1614 60%,#241F1C 100%);
  border-radius:1.5em 1.5em .4em .4em;padding:1.1em 1.1em 1.3em;
  box-shadow:0 34px 64px -32px rgba(36,28,24,.6), 0 2px 6px rgba(36,28,24,.2)}
.mb-cam{width:.45em;height:.45em;border-radius:50%;background:#4A423E;margin:0 auto .75em;
  box-shadow:0 0 0 .18em rgba(255,255,255,.04)}
.mb-screen{border-radius:.45em;overflow:hidden;background:var(--w);
  aspect-ratio:16/10.3;display:flex;flex-direction:column;position:relative}
.mb-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 34%)}
.mb-base{height:1.15em;margin-inline:-3.6%;position:relative;
  background:linear-gradient(180deg,#D9D3CD 0%,#B6AEA7 55%,#8E8680 100%);
  border-radius:0 0 .9em .9em;box-shadow:0 8px 14px -8px rgba(36,28,24,.45)}
.mb-base::after{content:"";position:absolute;left:39%;top:0;width:22%;height:.34em;
  background:#877F79;border-radius:0 0 .4em .4em}

.crm{position:relative;background:var(--w);overflow:hidden;display:flex;flex-direction:column;flex:1}
.crm-bar{display:flex;align-items:center;gap:.9em;padding:.85em 1.1em;background:var(--pearl);
  border-bottom:1px solid var(--line-2)}
.crm-dots{display:flex;gap:.42em}
.crm-dots i{width:.66em;height:.66em;border-radius:50%;background:#DCD1C2;display:block}
.crm-url{flex:1;height:1.9em;border-radius:999px;background:var(--w);border:1px solid var(--line-2);
  display:flex;align-items:center;gap:.5em;padding-inline:.9em;font-size:.9em;color:var(--gray-2)}
.crm-url svg{width:.92em;height:.92em;color:var(--green);flex:none}

.crm-app{display:grid;grid-template-columns:9.4em 1fr;flex:1;min-height:0}
.crm-side{border-right:1px solid var(--line-2);padding:1.2em 1em;display:flex;flex-direction:column;
  gap:1.35em;background:var(--pearl)}
.logo-slot{border:1px dashed rgba(158,113,48,.5);border-radius:.6em;padding:.9em .5em;text-align:center;background:var(--w)}
.logo-slot b{display:block;font-family:var(--font-d);font-size:1.1em;color:var(--gold);letter-spacing:.14em}
.logo-slot span{display:block;font-size:.64em;letter-spacing:.2em;text-transform:uppercase;color:var(--gray-2);margin-top:.4em}
.crm-nav{display:flex;flex-direction:column;gap:.3em}
.crm-nav span{display:flex;align-items:center;gap:.6em;font-size:.9em;color:var(--gray);padding:.5em .55em;border-radius:.5em}
.crm-nav span svg{width:1.05em;height:1.05em;flex:none}
.crm-nav span.on{background:var(--w);color:var(--ink);font-weight:500;border:1px solid var(--line-2)}
.crm-live{margin-top:auto;display:inline-flex;align-items:center;gap:.45em;font-size:.78em;color:var(--green);font-weight:500}
.crm-live i{width:.45em;height:.45em;border-radius:50%;background:var(--green);display:block}

.crm-main{padding:1.25em 1.3em;display:flex;flex-direction:column;gap:.9em;min-width:0}
.crm-top{display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap}
.crm-top b{font-family:var(--font-d);font-size:1.5em;font-weight:600}
.crm-seg{display:flex;gap:.2em;border:1px solid var(--line-2);border-radius:999px;padding:.2em}
.crm-seg span{font-size:.78em;padding:.35em .75em;border-radius:999px;color:var(--gray);white-space:nowrap}
.crm-seg span.on{background:var(--ink);color:var(--w)}

.crm-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:.6em;overflow:hidden}
.crm-kpi{background:var(--w);padding:.85em .8em;min-width:0}
.crm-kpi b{display:block;font-family:var(--font-d);font-size:2.1em;line-height:1;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.crm-kpi b.g{color:var(--green)}.crm-kpi b.o{color:var(--gold)}.crm-kpi b.r{color:var(--rose)}
.crm-kpi span{display:block;font-size:.8em;font-weight:500;margin-top:.4em}
.crm-kpi small{display:block;font-size:.7em;color:var(--gray-2);margin-top:.15em;line-height:1.3}

.crm-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:.7em;flex:1}
.crm-panel{border:1px solid var(--line-2);border-radius:.6em;padding:.85em .9em;display:flex;flex-direction:column;min-width:0}
.crm-panel h4{font-family:var(--font-d);font-size:1em;font-weight:600;margin:0}
.crm-panel .sub{font-size:.72em;color:var(--gray-2);margin-top:.15em}
.crm-legend{display:flex;gap:.9em;margin:.65em 0 .25em}
.crm-legend span{display:inline-flex;align-items:center;gap:.35em;font-size:.72em;color:var(--gray)}
.crm-legend i{width:.5em;height:.5em;border-radius:50%;display:block}
.crm-chart{display:flex;align-items:flex-end;gap:.26em;height:8em;flex:1}
.crm-bar-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  transform-origin:bottom;animation:crmGrow 420ms var(--ease) backwards}
.crm-bar-col u{display:block;text-decoration:none}
.crm-bar-col u.a{background:var(--gold-hi)}
.crm-bar-col u.b{background:var(--gold)}
.crm-bar-col u:first-child{border-radius:.25em .25em 0 0}
@keyframes crmGrow{from{transform:scaleY(.04);opacity:.4}to{transform:scaleY(1);opacity:1}}
.crm-x{display:flex;gap:.26em;margin-top:.4em}
.crm-x span{flex:1;text-align:center;font-size:.6em;color:var(--gray-2);overflow:hidden}

.crm-journey{display:flex;flex-direction:column;gap:.7em;margin-top:.8em;flex:1;justify-content:center}
.crm-jrow{display:grid;grid-template-columns:auto 1fr auto;gap:.5em;align-items:center;font-size:.78em}
.crm-jrow .lbl{white-space:nowrap}
.crm-track{height:.65em;background:var(--pearl);border-radius:999px;overflow:hidden}
.crm-track i{display:block;height:100%;border-radius:999px;transform-origin:left;animation:crmWide 520ms var(--ease) backwards}
@keyframes crmWide{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
.crm-jval{white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums}
.crm-jval small{font-weight:400;color:var(--gray-2)}

/* iPhone */
.iphone{position:absolute;left:0;bottom:-2%;z-index:5;width:clamp(100px,19cqw,152px);
  font-size:clamp(4.4px,.86cqw,6.6px);
  background:linear-gradient(155deg,#3A3330 0%,#171412 45%,#2C2724 100%);
  border-radius:2.4em;padding:.42em;
  box-shadow:0 30px 54px -22px rgba(36,28,24,.55), 0 0 0 .1em rgba(255,255,255,.06) inset}
.iphone::before,.iphone::after{content:"";position:absolute;left:-.16em;width:.16em;
  background:#2A2421;border-radius:.1em 0 0 .1em}
.iphone::before{top:22%;height:5%}
.iphone::after{top:31%;height:9%}
.phone-screen{position:relative;background:var(--pearl);border-radius:2.05em;overflow:hidden;
  display:flex;flex-direction:column;aspect-ratio:9/19.5}
.ip-island{position:absolute;top:.75em;left:50%;transform:translateX(-50%);z-index:6;
  width:32%;height:1.5em;background:#0C0A09;border-radius:999px}
.ip-bar{position:absolute;bottom:.5em;left:50%;transform:translateX(-50%);z-index:6;
  width:34%;height:.3em;background:rgba(36,28,24,.35);border-radius:999px}
.phone-top{display:flex;align-items:center;gap:.7em;padding:2.6em .85em .85em;background:var(--w);
  border-bottom:1px solid var(--line-2)}
.phone-av{width:2.5em;height:2.5em;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad-gold);color:#2A1F10;font-family:var(--font-d);font-size:1em;font-weight:600}
.phone-top b{display:block;font-size:1em;font-weight:500;line-height:1.2}
.phone-top span{font-size:.8em;color:var(--green);font-weight:500}
.chat{padding:.85em .75em 1.6em;display:flex;flex-direction:column;gap:.5em;flex:1;overflow:hidden}
.msg{max-width:88%;padding:.6em .75em;border-radius:1.1em;font-size:.95em;line-height:1.45}
.msg.in{background:var(--w);border:1px solid var(--line-2);border-bottom-left-radius:.3em;align-self:flex-start}
.msg.out{background:var(--gold-soft);border-bottom-right-radius:.3em;align-self:flex-end}
.msg time{display:block;font-size:.72em;opacity:.5;margin-top:.15em;text-align:right}
@container (max-width:430px){ .msg.hide-sm{display:none} }

.badge{position:absolute;z-index:4;display:flex;align-items:center;gap:9px;padding:11px 15px;
  background:var(--w);border:1px solid var(--gold-hi);border-radius:var(--r-2);
  box-shadow:0 16px 30px -20px rgba(36,28,24,.4);
  font-size:clamp(.66rem,1.9cqw,.78rem);font-weight:500;line-height:1.3}
.badge small{display:block;font-weight:400;color:var(--gray);font-size:.86em}
.badge svg{width:18px;height:18px;color:var(--gold);flex:none}
.badge-1{top:5%;right:-2%}
@container (max-width:480px){
  .crm-kpis{grid-template-columns:repeat(3,1fr)}
  .crm-kpi.k4,.crm-kpi.k5{display:none}
  .crm-kpi small{display:none}
  .crm-seg span:not(.on){display:none}
}
@container (max-width:380px){ .crm-app{grid-template-columns:1fr} .crm-side{display:none} }