/* ═══ #mas — Showroom → CRM de Concreta + IA (19-oct). Sobrescribe showrooms.css sólo dentro de #mas. ═══ */

/* ── proporciones: dos tarjetas del mismo alto; la escena llena lo que queda ── */
#mas .tarjeta{ height:min(670px, var(--alto) - 56px); gap:8px; }
#mas .tarjeta h3{ margin-bottom:0; }
#mas .tarjeta-lead{ padding-bottom:0; }                 /* teléfono y ventana salen por el borde de abajo, a propósito */
#mas .escena{ position:relative; flex:1; min-height:0; display:flex; justify-content:center; margin-top:14px; transition:opacity .4s var(--ease); }
#mas .escena.reinicia{ opacity:0; }
#mas .escena.reinicia *{ transition:none !important; }

/* de qué lado vamos: segmentado tipo iOS */
#mas .pasos{ align-self:flex-start; display:inline-flex; gap:2px; padding:3px; margin-top:12px; border-radius:999px; background:#F2F2F7; font-size:.74rem; font-weight:600; }
#mas .pasos span{ padding:5px 12px; border-radius:999px; color:var(--muted); transition:background .4s var(--ease), color .4s, box-shadow .4s; }
#mas .pasos span.on{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }

/* ── el teléfono del comprador ── */
#mas .cel{ position:relative; width:min(100%, 300px); max-width:none; height:100%; aspect-ratio:auto; margin:0;
  border-radius:46px 46px 0 0; padding:10px 10px 0; background:#1d1d1f; box-shadow:var(--sombra);
  transition:opacity .5s var(--ease), transform .6s var(--ease); }
#mas .cel-pant{ position:relative; height:100%; border-radius:36px 36px 0 0; overflow:hidden; background:#fff; isolation:isolate; }

/* la ficha de la unidad en el showroom */
#mas .cel-ficha{ position:absolute; inset:0; display:flex; flex-direction:column; }
#mas .cel-ficha img{ width:100%; flex:1 1 auto; min-height:0; object-fit:cover; }
#mas .cf-txt{ display:flex; flex-direction:column; gap:4px; padding:16px 16px 18px; }
#mas .cf-est{ align-self:flex-start; font-size:.68rem; font-weight:600; color:var(--ok-ink); background:var(--ok-soft); border-radius:999px; padding:3px 9px; }
#mas .cf-txt b{ font-size:1.15rem; letter-spacing:-.02em; margin-top:2px; }
#mas .cf-dat{ font-size:.76rem; color:var(--muted); }
#mas .cf-btn{ margin-top:10px; display:block; text-align:center; font-size:.86rem; font-weight:600; color:#fff; background:var(--brand);
  border-radius:999px; padding:11px; transition:transform .18s var(--ease), filter .18s, background .35s; }
#mas .cf-btn.pulsado{ transform:scale(.95); filter:brightness(.9); }

/* el formulario sube como hoja */
#mas .cel-velo{ position:absolute; inset:0; background:rgba(0,0,0,.32); opacity:0; transition:opacity .45s var(--ease); }
#mas .cel-form{ position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:9px; padding:8px 16px 18px;
  background:#fff; border-radius:22px 22px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.16);
  transform:translateY(105%); transition:transform .55s var(--ease); }
#mas .cel.en-form .cel-velo{ opacity:1; }
#mas .cel.en-form .cel-form{ transform:none; }
#mas .cfo-asa{ align-self:center; width:36px; height:4px; border-radius:2px; background:#D1D1D6; margin-bottom:4px; }
#mas .cfo-tit{ font-size:1rem; letter-spacing:-.02em; }
#mas .cfo-sub{ font-size:.72rem; color:var(--muted); margin-top:-7px; }
#mas .cfo-campo{ display:flex; flex-direction:column; gap:3px; }
#mas .cfo-campo small{ font-size:.64rem; color:var(--muted); font-weight:600; }
#mas .cfo-in{ display:block; min-height:32px; padding:7px 10px; border-radius:10px; border:1px solid rgba(0,0,0,.12); background:#FAFAFC;
  font-size:.78rem; white-space:nowrap; overflow:hidden; transition:border-color .25s, box-shadow .25s; }
#mas .cfo-in.activo{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
#mas .cfo-in.activo::after{ content:''; display:inline-block; width:1.5px; height:1em; margin-left:1px; vertical-align:-2px; background:var(--brand); animation:mas-cursor 1s steps(1) infinite; }
@keyframes mas-cursor{ 50%{ opacity:0; } }
#mas .cfo-enviar{ margin-top:4px; }
#mas .cfo-enviar.ok{ background:var(--ok); }

/* el dedo que toca */
#mas .cel-dedo{ position:absolute; z-index:3; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.55); border:2px solid rgba(0,0,0,.18); box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0; transform:scale(1.35); transition:opacity .25s, transform .3s var(--spring); }
#mas .cel-dedo.ve{ opacity:1; transform:scale(1); }
#mas .cel-dedo.ve.aprieta{ transform:scale(.8); }

/* ── la ventana del CRM de Concreta: Leads ── */
#mas .crm-win{ position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; border:1px solid var(--hair); border-bottom:0;
  border-radius:18px 18px 0 0; box-shadow:var(--sombra); overflow:hidden; pointer-events:none;
  opacity:0; transform:translateX(28px) scale(.97); transition:opacity .5s var(--ease), transform .65s var(--ease); }
#mas .escena.en-crm .crm-win{ opacity:1; transform:none; }
#mas .escena.en-crm .cel{ opacity:0; transform:translateX(-28px) scale(.96); }
#mas .cw-bar{ flex:none; display:flex; align-items:center; gap:6px; padding:10px 14px; background:#F5F5F7; border-bottom:1px solid var(--hair); font-size:.72rem; color:var(--muted); }
#mas .cw-bar i{ width:9px; height:9px; border-radius:50%; background:#D1D1D6; }
#mas .cw-bar span{ margin-left:8px; font-weight:600; }
#mas .cw-cab{ flex:none; display:flex; align-items:center; gap:8px; padding:16px 18px 8px; }
#mas .cw-cab b{ font-size:1.3rem; letter-spacing:-.025em; }
#mas .cw-badge{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--vn); color:#fff; font-size:.7rem; font-weight:700;
  display:grid; place-items:center; transition:transform .45s var(--spring); }
#mas .cw-badge.salta{ transform:scale(1.35); }
#mas .cw-proy{ margin-left:auto; font-size:.74rem; color:var(--muted); }
#mas .cw-lista{ position:relative; flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:2px; padding:4px 8px; }
#mas .cw-fila{ position:relative; flex:none; display:flex; align-items:center; gap:10px; padding:11px 10px; border-radius:12px;
  transition:opacity .5s var(--ease), transform .6s var(--spring), background 1.2s var(--ease); }
#mas .cw-fila + .cw-fila::before{ content:''; position:absolute; left:54px; right:10px; top:-1px; height:1px; background:var(--hair); }
#mas .cw-ini{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#E5E5EA; font-size:.7rem; font-weight:700; color:#3A3A3C; }
#mas .cw-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.25; }
#mas .cw-t b{ font-size:.86rem; font-weight:600; }
#mas .cw-t small{ font-size:.72rem; color:var(--muted); }
#mas .cw-h{ flex:none; align-self:flex-start; display:flex; flex-direction:column; align-items:flex-end; gap:5px; font-size:.7rem; color:var(--muted); padding-top:2px; }
#mas .cw-nuevo{ font-size:.62rem; font-weight:700; color:#fff; background:var(--brand); border-radius:999px; padding:2px 8px; }
#mas .cw-fila.nueva{ background:var(--brand-soft); opacity:0; transform:translateY(-16px) scale(.97); }
#mas .cw-fila.nueva.on{ opacity:1; transform:none; }
#mas .cw-fila.nueva.calma{ background:transparent; }
#mas .cw-fila.nueva .cw-ini{ background:var(--brand); color:#fff; }
#mas .cw-fila.nueva + .cw-fila::before{ opacity:0; }

/* ── la IA ── */
#mas .chat{ flex:1; min-height:0; margin-top:clamp(16px,2vw,24px); padding:0; gap:0; justify-content:flex-start; border-radius:22px; background:#F5F5F7; }
#mas .chat{ --ia-a:#8E7BFF; --ia-b:var(--brand); }
#mas .ia-cab{ flex:none; display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--hair); background:rgba(255,255,255,.7); font-size:.86rem; }
#mas .ia-cab b{ font-weight:600; }
#mas .ia-on{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-size:.72rem; color:var(--ok-ink); }
#mas .ia-on::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
#mas .ia-av{ flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--ia-a), var(--ia-b)); box-shadow:0 2px 6px -2px rgba(0,113,227,.5); }
#mas .ia-av svg{ width:15px; height:15px; fill:#fff; }
#mas .ia-fila{ flex:none; display:flex; align-items:flex-end; gap:8px; max-width:92%;
  opacity:0; transform:translateY(14px) scale(.96); transform-origin:left bottom; transition:opacity .5s var(--ease), transform .6s var(--spring); }
#mas .ia-fila.on{ opacity:1; transform:none; }
#mas .ia-fila .burb, #mas .ia-fila .escribe{ max-width:none; opacity:1; transform:none; margin:0; }
#mas .chat .hecho{ margin-left:34px; }
#mas .ia-inv{ flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 16px; border-bottom:1px solid var(--hair); }
#mas .ia-inv-t{ font-size:.74rem; font-weight:600; color:var(--muted); margin-right:4px; }
#mas .ia-u{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; padding:3px 9px 3px 7px; border-radius:999px;
  background:var(--ok-soft); color:var(--ok-ink); transition:background .5s, color .5s, transform .45s var(--spring); }
#mas .ia-u::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ok); transition:background .5s; }
#mas .ia-u.mira{ transform:scale(1.1); }
#mas .ia-u.ap{ background:var(--ap-soft); color:var(--ap-ink); }
#mas .ia-u.ap::before{ background:var(--ap); }
#mas .ia-msgs{ position:relative; flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:12px;
  padding:14px 18px 16px; transition:opacity .4s var(--ease);
  -webkit-mask-image:linear-gradient(transparent, #000 22px); mask-image:linear-gradient(transparent, #000 22px); }
#mas .ia-msgs.limpia{ opacity:0; }
#mas .chat .burb{ flex:none; background:#fff; }
#mas .chat .burb.mio{ background:var(--brand); }
#mas .chat .escribe{ background:#fff; }
#mas .chat .hecho{ flex:none; transform:translateY(8px) scale(.94); transition:opacity .5s var(--ease), transform .6s var(--spring); }
#mas .chat .hecho.on{ transform:none; }

/* aparecer: puntos de «escribiendo» con la misma entrada que las burbujas */
#mas .escribe{ flex:none; opacity:0; transform:translateY(10px) scale(.9); transition:opacity .35s var(--ease), transform .5s var(--spring); }
#mas .escribe.on{ opacity:1; transform:none; }

/* ── teléfono y tableta: las tarjetas se apilan y cada escena tiene alto propio ── */
@media (max-width:900px){
  #mas .tarjeta{ height:auto; }
  #mas .escena{ flex:none; height:460px; }
  #mas .chat{ flex:none; min-height:0; }
  #mas .ia-msgs{ flex:none; height:420px; }
}
@media (max-width:420px){
  #mas .escena{ height:440px; }
  #mas .cel{ width:min(100%, 280px); }
}

@media (prefers-reduced-motion:reduce){
  #mas .cel, #mas .crm-win, #mas .ia-u{ transition:none; }
}
/* la burbuja de la IA va junto al símbolo: tiene que poder encogerse y partir renglón */
#mas .ia-fila .burb{ flex:0 1 auto; min-width:0; }

/* 19-oct (Samuel: «te falta el Gemini y pon los logos»): con qué asistentes funciona */
#mas .ia-logos{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 18px; }
#mas .ia-logos span{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px 8px 10px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 6px 16px -10px rgba(0,0,0,.25); font-size:15px; font-weight:600; color:#1D1D1F; }
#mas .ia-logos svg{ width:22px; height:22px; flex:none; stroke:none; }   /* la regla global de svg les ponía trazo negro */