/* ============================================================
   CHAT DE LA WEB · claro y compacto
   ============================================================ */
.cw-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(145deg,#FFE7BE,#F7C578 38%,#D9942F);color:#1A1008;
  box-shadow:0 14px 32px -12px rgba(120,80,20,.55);transition:transform .22s}
.cw-fab::before,.cw-fab::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(217,148,47,.55);animation:cwPulso 2.8s cubic-bezier(.22,.8,.28,1) infinite;pointer-events:none}
.cw-fab::after{animation-delay:1.4s}
@keyframes cwPulso{0%{transform:scale(1);opacity:.65}70%,100%{transform:scale(1.55);opacity:0}}
.cw-fab__abrir{animation:cwLatido 2.8s ease-in-out infinite}
@keyframes cwLatido{0%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(1)}36%{transform:scale(1.09)}48%{transform:scale(1)}}
.cw-fab:hover{transform:scale(1.07)}
.cw-fab svg{width:25px;height:25px;position:absolute;transition:.24s}
.cw-fab__cerrar{opacity:0;transform:rotate(-90deg) scale(.6)}
.cw-fab--on .cw-fab__abrir{opacity:0;transform:rotate(90deg) scale(.6);animation:none}
.cw-fab--on .cw-fab__cerrar{opacity:1;transform:none}
.cw-fab--on::before,.cw-fab--on::after{animation:none;opacity:0}
.cw-fab__pin{position:absolute;top:-2px;right:-2px;background:#E8496E;color:#fff;font-size:.68rem;
  font-weight:700;min-width:20px;height:20px;border-radius:999px;display:grid;place-items:center;
  padding:0 6px;border:2px solid #fff;box-shadow:0 3px 10px -2px rgba(0,0,0,.4);z-index:2}
.cw-fab__pin[hidden]{display:none}

.cw{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:69;
  width:min(384px,calc(100vw - 32px));
  /* alto fijo y generoso: el hilo respira aunque haya un solo mensaje */
  height:min(660px,calc(100dvh - 132px));
  max-height:calc(100dvh - 118px);min-height:min(430px,calc(100dvh - 132px));
  background:#FFFFFF;border:1px solid #EDE6DB;border-radius:24px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 6px -2px rgba(90,64,20,.12), 0 34px 72px -26px rgba(70,48,12,.42);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);
  transition:opacity .22s ease,transform .26s cubic-bezier(.2,.9,.3,1),visibility .22s;
  color:#241F19}
.cw--on{opacity:1;visibility:visible;transform:none}

.cw__head{display:flex;align-items:center;gap:12px;padding:16px 16px 15px;flex:0 0 auto;
  background:linear-gradient(135deg,#1A1620,#241C10);color:#F7F2E9;
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
.cw__head img{border-radius:11px;object-fit:contain;background:rgba(255,255,255,.07)}
.cw__quien strong{display:block;font-size:.97rem;line-height:1.25;color:#FFF3DE;letter-spacing:.01em}
.cw__quien small{display:flex;align-items:center;gap:6px;font-size:.75rem;color:#C7BBA6;margin-top:3px}
.cw__punto{width:7px;height:7px;border-radius:50%;background:#25D366;animation:cwVivo 2s ease-out infinite}
@keyframes cwVivo{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 0 0 7px rgba(37,211,102,0)}}
.cw__x{margin-left:auto;background:none;border:0;color:#C7BBA6;cursor:pointer;width:30px;height:30px;
  display:grid;place-items:center;border-radius:8px}
.cw__x:hover{color:#FFD9A3;background:rgba(255,255,255,.08)}
.cw__x svg{width:16px;height:16px}

.cw__hilo{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 15px;display:flex;flex-direction:column;gap:10px;
  min-height:0;background:#FBF8F3;scrollbar-width:thin}
/* los mensajes se apoyan abajo, como en un chat de verdad */
.cw__hilo::before{content:'';margin-top:auto}
.cw__hilo::-webkit-scrollbar{width:7px}
.cw__hilo::-webkit-scrollbar-thumb{background:#E0D6C6;border-radius:8px}
.cw__msg{max-width:86%;padding:10px 13px;border-radius:15px;font-size:.88rem;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;animation:cwEntra .2s ease-out}
@keyframes cwEntra{from{opacity:0;transform:translateY(6px)}}
.cw__msg--ellos{background:#FFFFFF;border:1px solid #EDE4D6;align-self:flex-start;
  border-bottom-left-radius:5px;color:#2A241D;box-shadow:0 2px 6px -3px rgba(120,90,40,.18)}
.cw__msg--yo{background:linear-gradient(145deg,#FFE7BE,#F7CE92);border:1px solid #EEC287;
  align-self:flex-end;border-bottom-right-radius:5px;color:#3B2B10}
.cw__msg--aviso{align-self:center;background:#FFF6E6;border:1px dashed #E3C88F;color:#8A6B32;font-size:.79rem}
.cw__msg time{display:block;font-size:.65rem;opacity:.55;margin-top:4px}
.cw__msg img{border-radius:11px;display:block;max-width:210px;width:100%}
.cw__msg audio{width:210px;max-width:100%;height:36px;display:block}

/* tarjeta de producto dentro del chat */
.cw__prod{align-self:stretch;max-width:100%;display:flex;gap:11px;padding:10px;border-radius:15px;
  background:#FFFFFF;border:1px solid #EDE4D6;box-shadow:0 3px 10px -6px rgba(120,90,40,.25)}
.cw__prod img{width:74px;height:74px;object-fit:cover;border-radius:11px;flex:0 0 auto;max-width:74px}
.cw__prod__ph{width:74px;height:74px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,#F7E2C4,#EBC58A);color:#8A5A08;font-size:1.4rem}
.cw__prod b{display:block;font-size:.9rem;line-height:1.3;color:#2A241D}
.cw__prod span{display:block;font-size:.78rem;color:#7A6E5C;margin-top:2px;line-height:1.45}
.cw__prod em{display:block;font-style:normal;font-weight:800;color:#96560F;font-size:1rem;margin-top:5px}

.cw__datos{padding:10px 14px 4px;flex:0 0 auto;background:#FBF8F3}
.cw__datos p{margin:0 0 8px;font-size:.75rem;color:#7A6E5C;line-height:1.45}
.cw__par{display:flex;gap:7px}
.cw__par input{flex:1;min-width:0;background:#FFFFFF;border:1px solid #E4DACA;border-radius:10px;
  padding:9px 11px;font-size:16px;color:#241F19;outline:none}
.cw__par input:focus{border-color:#D9942F;box-shadow:0 0 0 3px rgba(217,148,47,.14)}

.cw__form{display:flex;gap:8px;padding:11px 14px;flex:0 0 auto;background:#FBF8F3;align-items:center;
  border-top:1px solid #F0E8DC}
.cw__form input{flex:1;background:#FFFFFF;border:1px solid #E4DACA;border-radius:999px;
  padding:11px 15px;font-size:16px;color:#241F19;outline:none}
.cw__form input:focus{border-color:#D9942F;box-shadow:0 0 0 3px rgba(217,148,47,.14)}
.cw__adj{width:38px;height:38px;border-radius:50%;border:1px solid #E4DACA;background:#FFF;
  cursor:pointer;display:grid;place-items:center;color:#8A7A62;flex:0 0 auto}
.cw__adj:hover{border-color:#D9942F;color:#9A6A18}
.cw__adj svg{width:17px;height:17px}
.cw__form button[type=submit]{width:40px;height:40px;border-radius:50%;border:0;flex:0 0 auto;cursor:pointer;
  background:linear-gradient(145deg,#FFE7BE,#F7C578 40%,#D9942F);color:#1A1008;display:grid;place-items:center}
.cw__form button[type=submit] svg{width:17px;height:17px}

.cw__wa{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;
  background:#25D366;color:#062A14;font-weight:700;font-size:.85rem;text-decoration:none;flex:0 0 auto}
.cw__wa svg{width:17px;height:17px}
.cw__wa:hover{filter:brightness(1.06)}

.cw__form{padding:12px 14px 13px}
.cw__wa{padding:13px;letter-spacing:.01em}

/* ---------- teléfono: hoja alta, casi a pantalla completa ---------- */
@media(max-width:560px){
  .cw{right:8px;left:8px;width:auto;
      bottom:calc(78px + env(safe-area-inset-bottom,0px));
      height:calc(100dvh - 94px - env(safe-area-inset-bottom,0px));
      max-height:calc(100dvh - 94px - env(safe-area-inset-bottom,0px));
      min-height:0;border-radius:22px;
      z-index:120}   /* por encima de la barra fija y del aviso de cookies */
  .cw__head{padding:14px 14px 13px}
  .cw__msg{max-width:88%}
  .cw-fab{right:14px;width:52px;height:52px;z-index:121}
}
/* pantallas muy bajas (móvil apaisado): que nunca se salga */
@media(max-height:520px){
  .cw{height:calc(100dvh - 84px);min-height:0}
}


/* ---- «Conectando con un agente…» -------------------------------
   Aparece cuando el bot pasa la conversación a una persona y se va
   sola en cuanto el equipo responde. Los tres puntos laten por
   turnos; con «movimiento reducido» activado se quedan quietos. */
.cw__conecta{display:flex; align-items:center; gap:9px; align-self:flex-start;
  margin:2px 0 4px; padding:9px 13px; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid var(--line, rgba(255,255,255,.14));
  font-size:.82rem; color:var(--muted, #9a9a9a)}
.cw__conecta-puntos{display:inline-flex; gap:4px}
.cw__conecta-puntos i{width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.35; animation:cwLatido 1.25s infinite ease-in-out}
.cw__conecta-puntos i:nth-child(2){animation-delay:.18s}
.cw__conecta-puntos i:nth-child(3){animation-delay:.36s}
@keyframes cwLatido{
  0%, 60%, 100%{opacity:.3; transform:translateY(0)}
  30%{opacity:1; transform:translateY(-3px)}
}
@media (prefers-reduced-motion: reduce){
  .cw__conecta-puntos i{animation:none; opacity:.6}
}