/* ---------- CHAT ---------- */
.chatwrap{margin:30px 0 0;max-width:800px}
.chatbox{border:1px solid var(--linia);border-radius:24px;background:var(--blanc);overflow:hidden;
  box-shadow:0 26px 70px rgba(28,27,24,.10),0 2px 6px rgba(28,27,24,.04)}
.chattop{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--linia);
  background:var(--crema-suau)}
.chattop .av{width:38px;height:38px;border-radius:50%;background:var(--groc);flex:none;
  display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--negre);letter-spacing:-.02em}
.chattop b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.chattop span{font-size:12.5px;color:var(--suau);display:inline-flex;align-items:center;gap:6px}
.chattop span .pip{width:6px;height:6px;border-radius:50%;background:#2ea44f;flex:none}
/* ALTURA FIJA a proposito: con min/max el contenedor crecia al llegar las burbujas del
   saludo, el layout se movia y el navegador reajustaba el scroll -> la pagina 'cargaba'
   un poco mas abajo. overflow-anchor:none remata el mismo problema. */
.chatlog{padding:22px;height:270px;overflow-y:auto;overflow-anchor:none;display:flex;
  flex-direction:column;gap:11px;scroll-behavior:smooth}
@media(max-width:640px){.chatlog{height:300px;padding:18px}}
.msg{max-width:82%;padding:13px 17px;border-radius:18px;font-size:15.5px;line-height:1.55;
  animation:pop .28s cubic-bezier(.2,.8,.3,1);word-wrap:break-word;overflow-wrap:anywhere}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg.bot{align-self:flex-start;background:var(--crema-suau);border:1px solid var(--linia);
  border-bottom-left-radius:6px;color:var(--tinta)}
.msg.me{align-self:flex-end;background:var(--negre);color:#fff;border-bottom-right-radius:6px}
.msg.crisis{background:#FFF4F2;border-color:#F5C6BC;color:#7A2E1D}
.msg.consentbox{font-size:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.msg.consentbox button{border:0;border-radius:999px;padding:9px 20px;font:inherit;font-weight:700;cursor:pointer;background:var(--negre);color:#fff}
.msg.consentbox.ok{opacity:.7}
.msg a{color:#0a3d5c;text-decoration:underline;font-weight:600}
.msg.me a{color:var(--groc)}
.typing{align-self:flex-start;display:flex;align-items:center;gap:5px;background:var(--crema-suau);
  border:1px solid var(--linia);border-radius:18px;border-bottom-left-radius:6px;padding:15px 18px}
.typing i{width:7px;height:7px;border-radius:50%;background:#B9B096;display:block;
  animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chatform{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--linia);background:var(--blanc)}
.chatform input{flex:1;border:1px solid var(--linia);border-radius:999px;padding:14px 20px;
  font:inherit;font-size:16px;background:var(--crema-suau);transition:border-color .2s,background .2s}
.chatform input:focus{outline:0;border-color:var(--groc);background:var(--blanc)}
.chatform button{width:50px;height:50px;flex:none;border:0;border-radius:50%;background:var(--groc);
  color:var(--negre);font-size:21px;font-weight:800;cursor:pointer;transition:transform .2s,background .2s;
  display:grid;place-items:center}
.chatform button:hover{transform:translateY(-2px);background:var(--groc-fosc)}
.chatform button:disabled{opacity:.45;cursor:default;transform:none}
.chipline{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.chip{border:1px solid var(--linia);background:var(--blanc);border-radius:999px;padding:10px 17px;
  font:inherit;font-size:14px;font-weight:600;color:var(--tinta);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s}
.chip:hover{border-color:var(--groc);background:var(--crema-suau);transform:translateY(-1px)}
.privline{margin-top:14px;font-size:12.5px;color:#7a746a;line-height:1.6;max-width:62ch}
.privline a{text-decoration:underline}

/* ---------- CHAT A PANTALLA COMPLETA (movil) ---------- */
/* 100dvh y no 100vh: en movil la barra del navegador cambia de alto y con vh el campo de
   escribir se queda debajo del teclado. */
.chatbox.full{position:fixed;inset:0;z-index:200;border:0;border-radius:0;max-width:none;
  width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;box-shadow:none;
  background:#fff;animation:sube .26s cubic-bezier(.2,.8,.3,1)}
.chatbox.full .chatlog{background:#fff}
/* burbujas pegadas abajo, como en una app de mensajeria. Con margin-top:auto en el primer
   hijo y no con justify-content:flex-end, que rompe el scroll hacia arriba en flex. */
.chatbox.full .chatlog>:first-child{margin-top:auto}
/* telon por si el teclado deja un hueco abajo: nunca se ve la pagina por detras */
body.chatfull:before{content:"";position:fixed;inset:0;z-index:199;background:#fff}
@keyframes sube{from{opacity:.4;transform:translateY(14px)}to{opacity:1;transform:none}}
.chatbox.full .chatlog{flex:1;height:auto;min-height:0}
.chatbox.full .chattop{padding-top:calc(16px + env(safe-area-inset-top))}
.chatbox.full .chatform{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.chatx{display:none;margin-left:auto;width:38px;height:38px;flex:none;border:1px solid var(--linia);
  background:var(--blanc);border-radius:50%;font-size:22px;line-height:1;color:var(--suau);
  cursor:pointer;place-items:center;font-family:inherit}
.chatbox.full .chatx{display:grid}
/* Bloqueo con position:fixed y top negativo, no con overflow:hidden: asi la posicion de
   scroll la decidimos nosotros y al cerrar se vuelve EXACTAMENTE donde estaba. */
body.chatfull{position:fixed;left:0;right:0;width:100%;overflow:hidden}
body.chatfull .callbar{display:none}

/* el avatar va en oceano; el boton de enviar en coral con la flecha oscura */
.chattop .av{background:var(--ocea);color:var(--crema)!important}
.chatform button{color:var(--negre)!important}
.msg a{color:var(--ocea)}
.msg.me a{color:#fff}

/* ---------- paginas interiores: el chat dentro del hero ---------- */
.heroin .chatwrap{margin-top:24px}
.heroin .chatlog{height:230px}
@media(max-width:640px){.heroin .chatlog{height:250px}.heroin{padding-top:26px}.heroin .miga{margin-bottom:10px}}
.puente{font-size:13.5px;font-weight:700;color:#8a8272;margin:0 0 12px}
.entradeta{font-size:clamp(16.5px,2vw,19px);color:var(--suau);max-width:60ch;margin:0 0 30px;font-weight:500}
/* el numero de WhatsApp que da el asistente, como boton: es la puerta facil desde el movil */
.msg a.wa{display:inline-flex;align-items:center;gap:7px;background:#25D366;color:#fff!important;text-decoration:none;
  border-radius:999px;padding:8px 14px;margin:6px 0 2px;font-weight:700;white-space:nowrap}
.msg a.wa:before{content:"";width:16px;height:16px;flex:none;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 12 12 0 0 0 4.6 4c1.7.7 2.3.8 3.2.7a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .1-1.2c0-.2-.2-.2-.5-.4z'/%3E%3C/svg%3E")}
.msg a.wa:active{transform:scale(.98)}