/* ═══════════════════════════════════════════════════════════════
   ARCHI-MINDS · piezas de las landings
   Se monta sobre style.css + nuevo.css.
   Regla: nada de barras grises. Cada dibujo tiene color,
   contenido y jerarquía, como una interfaz de verdad.
   ═══════════════════════════════════════════════════════════════ */

.badge-aliado{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:40px;padding:8px 18px}
.badge-aliado i{width:6px;height:6px;border-radius:50%;background:var(--ac,#3245FF);
  box-shadow:0 0 0 4px rgba(50,69,255,.2)}

/* ── dispositivo ────────────────────────────────────────────── */
.disp{position:relative;border-radius:22px;background:#0c0c1c;
  border:1px solid rgba(255,255,255,.13);overflow:hidden;
  box-shadow:0 34px 80px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06)}
.disp-barra{display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)}
.disp-barra i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.disp-barra span{margin-left:8px;font-size:11px;color:rgba(255,255,255,.42)}
.disp--tel{max-width:252px;margin:0 auto;border-radius:32px;padding:9px;
  background:#16162c;border:1px solid rgba(255,255,255,.16)}
.disp--tel .tel-in{background:#0c0c1c;border-radius:24px;overflow:hidden}

/* ── chat del agente ────────────────────────────────────────── */
.chat{padding:18px 16px;display:flex;flex-direction:column;gap:10px;min-height:300px}
.burb{max-width:80%;padding:11px 14px;font-size:13.5px;line-height:1.45;border-radius:15px}
.burb--cli{align-self:flex-start;background:rgba(255,255,255,.09);
  border-bottom-left-radius:5px;color:rgba(255,255,255,.88)}
.burb--ag{align-self:flex-end;color:#fff;border-bottom-right-radius:5px;
  background:linear-gradient(100deg,#3245FF,#6E3AE8)}
.burb--accion{align-self:stretch;max-width:100%;display:flex;align-items:center;gap:9px;
  background:rgba(50,69,255,.12);border:1px dashed rgba(125,139,255,.45);
  border-radius:11px;padding:10px 13px;font-size:12px;color:#9fabff}
.burb--accion svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;flex:none}

/* ── mapa y visita ──────────────────────────────────────────── */
.mapa{position:relative;height:230px;overflow:hidden;
  background:radial-gradient(circle at 28% 26%,rgba(50,69,255,.24),transparent 62%),
             radial-gradient(circle at 78% 74%,rgba(233,30,99,.2),transparent 60%),#0e0e22}
.mapa .grilla{position:absolute;inset:0;opacity:.55;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px),
             repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 34px)}
.mapa svg{position:absolute;inset:0;width:100%;height:100%}
.mapa .pin{position:absolute;width:27px;height:27px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:#fff;transform:translate(-50%,-50%);z-index:2}
.mapa .pin--a{background:#3245FF;box-shadow:0 0 0 6px rgba(50,69,255,.24)}
.mapa .pin--b{background:#e91e63;box-shadow:0 0 0 6px rgba(233,30,99,.24)}
.ficha-visita{padding:15px 16px 17px;border-top:1px solid rgba(255,255,255,.09)}
.ficha-visita .fv-top{display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.ficha-visita h4{font-size:15.5px;font-weight:600;margin:10px 0 4px}
.ficha-visita p{font-size:12.5px;color:rgba(255,255,255,.55);margin:0}
.ficha-visita .fv-estado{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:11.5px;font-weight:600;color:#4ade80}
.ficha-visita .fv-estado i{width:7px;height:7px;border-radius:50%;background:#4ade80}

/* ── escuchar vs ver ────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,5vw,70px);
  align-items:start;position:relative;margin-top:46px}
@media(max-width:820px){.duo{grid-template-columns:1fr;gap:56px}}
.duo-col{position:relative;text-align:center}
.duo-lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:18px}
.duo-hoy .duo-lbl{color:rgba(255,255,255,.38)}
.duo-dma .duo-lbl{color:#8fa0ff}
.duo-hoy .disp--tel{filter:saturate(.1)}
.duo-past{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6;
  background:#fff;color:#0b0b1a;font-size:13.5px;font-weight:800;padding:12px 20px;
  border-radius:80px;box-shadow:0 16px 40px rgba(0,0,0,.55);white-space:nowrap}
@media(max-width:820px){.duo-past{position:static;transform:none;display:table;margin:0 auto}}
.tel-llamada{padding:15px 14px 13px;border-bottom:1px solid rgba(255,255,255,.09);
  text-align:center}
.tel-llamada .num{font-size:10.5px;color:rgba(255,255,255,.42);letter-spacing:.06em}
.tel-llamada .crono{font-size:23px;font-weight:600;margin-top:4px;
  font-variant-numeric:tabular-nums}
.tel-cuerpo{padding:15px 13px}
.voz-l{height:10px;border-radius:5px;background:rgba(255,255,255,.13);margin-bottom:14px;
  opacity:0;transition:opacity .5s ease}
.voz-l.on{opacity:1}
.voz-txt{font-size:12px;font-style:italic;color:rgba(255,255,255,.4);margin:18px 0 14px;
  opacity:0;transition:opacity .5s ease}
.voz-txt.on{opacity:1}
.op{display:flex;align-items:center;gap:10px;height:47px;padding:0 13px;border-radius:11px;
  font-size:13.5px;font-weight:700;margin-bottom:9px;text-align:left;
  opacity:0;transform:translateY(8px) scale(.98);
  transition:opacity .4s cubic-bezier(.34,1.56,.64,1),transform .4s cubic-bezier(.34,1.56,.64,1)}
.op.on{opacity:1;transform:none}
.op svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none;flex:none}
.op--azul{background:linear-gradient(100deg,#2A099F,#3245FF);color:#fff}
.op--gris{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:#fff}
.op--rosa{background:linear-gradient(100deg,#B50341,#e91e63);color:#fff}

/* ── series i3 ──────────────────────────────────────────────── */
.series{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:20px;
  margin-top:44px}
.serie{border-radius:20px;overflow:hidden;background:#171733;
  border:1px solid rgba(255,255,255,.09);transition:transform .3s ease,border-color .3s ease}
.serie:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)}
.serie-vis{aspect-ratio:16/10;padding:16px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,var(--c1),var(--c2))}
.serie-pant{width:100%;height:100%;border-radius:7px;background:rgba(0,0,0,.34);
  border:2px solid rgba(255,255,255,.26);position:relative;overflow:hidden}
.serie-pant::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.3) 0%,transparent 46%)}
.serie-cuerpo{padding:18px 18px 20px}
.serie-cuerpo h3{font-size:17px;font-weight:700;letter-spacing:.05em}
.serie-cuerpo .niv{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:5px}
.serie-cuerpo .tam{font-size:14px;color:rgba(255,255,255,.65);margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.09)}

/* ── bifurcación ────────────────────────────────────────────── */
.bifurca{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,46px);margin-top:46px}
@media(max-width:900px){.bifurca{grid-template-columns:1fr;gap:46px}}
.rama .rama-tag{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ac)}
.rama h3{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:12px 0 10px}
.rama p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.62);max-width:40ch;
  margin-bottom:24px}

/* ── calificación y verticales (Salesforce) ─────────────────── */
.califica{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;margin-bottom:22px;
  border-radius:14px;background:rgba(50,69,255,.1);border:1px solid rgba(125,139,255,.3);
  font-size:14px;line-height:1.45;color:rgba(255,255,255,.8)}
.califica b{color:#fff}
.califica svg{width:18px;height:18px;stroke:#8fa0ff;stroke-width:2.2;fill:none;flex:none;
  margin-top:2px}
.vtags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 24px}
.vtags span{font-size:11.5px;font-weight:500;letter-spacing:.05em;padding:6px 12px;
  border-radius:40px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
.senal-col .quien-compra{display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ac);margin-bottom:8px}
.senal-col h3{font-size:21px;font-weight:600;letter-spacing:-.02em}
.senal-col .hechos{margin-top:18px}


/* ── bifurcación: las dos columnas tienen que alinear ───────────
   El grafico de la izquierda (chat) y el de la derecha (mapa)
   tenian altos distintos, asi que el titulo, la barra y el boton
   de cada columna arrancaban a distinta altura. Ahora el visual
   ocupa un alto fijo y el boton se empuja al pie. */
.rama{display:flex;flex-direction:column}
.rama-vis{height:clamp(330px,30vw,392px);margin-bottom:26px}
.rama-vis .disp{height:100%;display:flex;flex-direction:column}
.rama-vis .chat{flex:1;min-height:0;overflow:hidden}
.rama-vis .mapa{flex:1;height:auto;min-height:0}
.rama .rama-tag{display:block}
.rama h3{margin:12px 0 10px}
.rama > .btn-pill{align-self:flex-start;margin-top:auto}
@media(max-width:900px){.rama-vis{height:auto}
  .rama-vis .chat{min-height:280px}
  .rama-vis .mapa{min-height:210px}}