/* Chat con IA en el hero de la portada (se carga solo cuando el chat está activo) */
.chat-hero { background: #fff; border-radius: 22px; padding: 18px; box-shadow: var(--sombra-fuerte); display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.chat-cabeza { display: flex; align-items: center; gap: 12px; }
.chat-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--lavanda-suave); }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-cabeza b { display: block; font: 600 22px/1.1 var(--font-titulo); color: var(--noche); }
.chat-cabeza span { font: 500 14px var(--font-main); color: var(--texto-suave); }
.chat-mensajes { display: flex; flex-direction: column; gap: 8px; max-height: 260px; min-height: 64px; overflow-y: auto; padding: 4px 2px; scroll-behavior: smooth; overscroll-behavior: contain; }
.chat-burbuja { max-width: 88%; padding: 10px 14px; border-radius: 18px; font: 500 15px/1.45 var(--font-main); white-space: pre-line; overflow-wrap: anywhere; }
.chat-burbuja.asistente { align-self: flex-start; background: var(--fondo); color: var(--noche); border-bottom-left-radius: 6px; }
.chat-burbuja.viajera { align-self: flex-end; background: var(--noche); color: #fff; border-bottom-right-radius: 6px; }
.chat-burbuja.error { background: var(--rosa-suave); color: var(--fucsia-texto); }
.chat-escribiendo { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--fondo); }
.chat-escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--lila); animation: chat-punto 1s infinite ease-in-out; }
.chat-escribiendo i:nth-child(2) { animation-delay: .15s; }
.chat-escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-punto { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-viajes { align-self: stretch; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.chat-viaje { flex: 0 0 200px; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); color: var(--noche); transition: box-shadow .2s; }
.chat-viaje:hover { color: var(--noche); box-shadow: inset 0 0 0 2px var(--lavanda); }
.chat-viaje img { width: 100%; height: 92px; object-fit: cover; background: var(--lavanda-suave); }
.chat-viaje span { padding: 0 12px; font-size: 12px; color: var(--texto-suave); }
.chat-viaje b { padding: 8px 12px 2px; font: 600 15px/1.2 var(--font-titulo); }
.chat-viaje .precio { padding-bottom: 10px; font-weight: 700; color: var(--lila); }
.chat-sugerencias { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-sugerencias:empty { display: none; }
.chat-chip { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--fondo); color: var(--texto-medio); font: 600 13px var(--font-main); cursor: pointer; transition: background .2s, color .2s; }
.chat-chip:hover, .chat-chip:focus-visible { background: var(--lavanda-suave); color: var(--noche); }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border: 1.5px solid var(--linea); border-radius: 16px; background: var(--fondo); font: 500 16px var(--font-main); color: var(--noche); }
.chat-form input:focus { outline: none; border-color: var(--lila); background: #fff; }
.chat-enviar { flex: none; width: 50px; height: 50px; border: 0; border-radius: 16px; background: var(--lila); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.chat-enviar:hover { background: var(--lila-hover); }
.chat-enviar[disabled] { opacity: .5; cursor: default; }
.chat-pie { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 600 13px var(--font-main); }
.chat-pie a:first-child { display: inline-flex; align-items: center; gap: 6px; color: #1EA352; }
.chat-pie a:first-child .icon { font-size: 18px; }
@media (max-width: 599px) {
    .chat-hero { padding: 16px; }
    .chat-mensajes { max-height: 220px; }
    .chat-cabeza b { font-size: 20px; }
}
.chat-mensajes > * { flex-shrink: 0; }
.hero-texto, .chat-hero, .chat-mensajes, .chat-viajes, .chat-cabeza > div { min-width: 0; }
.chat-hero { width: 100%; box-sizing: border-box; }
@media (max-width: 599px) { .chat-viaje { flex-basis: 170px; } }
@media (prefers-reduced-motion: reduce) { .chat-escribiendo i { animation: none; } .chat-mensajes { scroll-behavior: auto; } }

/* Burbuja flotante (resto del sitio): sobre el botón de WhatsApp */
.chat-flotante { position: fixed; right: 18px; bottom: 88px; z-index: 31; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.chat-abrir { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 4px; border: 0; border-radius: 999px; background: #fff; color: var(--noche); font: 700 14px var(--font-main); box-shadow: 0 14px 30px -10px rgba(45, 16, 86, .45); cursor: pointer; transition: transform .3s var(--ease); }
.chat-abrir:hover { transform: translateY(-2px); }
.chat-abrir img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--lavanda-suave); }
.chat-flotante.abierto .chat-abrir { display: none; }
.chat-panel { position: relative; width: min(400px, calc(100vw - 24px)); }
.chat-panel .chat-hero { max-width: none; box-shadow: 0 24px 60px -18px rgba(45, 16, 86, .5); }
.chat-panel .chat-mensajes { max-height: min(46vh, 380px); }
.chat-cerrar { position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--fondo); color: var(--noche); cursor: pointer; display: flex; align-items: center; justify-content: center; }
@media (max-width: 600px) {
    .chat-flotante { right: 12px; bottom: 84px; }
    .chat-abrir-texto { display: none; }
    .chat-abrir { padding: 4px; }
    .chat-flotante.abierto { left: 12px; bottom: 12px; }
    .chat-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .chat-abrir { transition: none; } }
.chat-panel .chat-cabeza { padding-right: 44px; }

/* Formulario de contacto dentro del chat (datos directo al CRM, con consentimiento) */
.chat-contacto { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: var(--lavanda-suave); color: var(--noche); font: 500 14px/1.4 var(--font-main); }
.chat-contacto > b { font: 600 16px/1.2 var(--font-titulo); }
.chat-contacto label { display: flex; flex-direction: column; gap: 4px; }
.chat-contacto label > span { font-weight: 600; font-size: 13px; }
.chat-contacto input:not([type=checkbox]) { height: 44px; padding: 0 12px; border: 1.5px solid var(--linea); border-radius: 12px; background: #fff; font: 500 16px var(--font-main); color: var(--noche); }
.chat-contacto input:focus { outline: none; border-color: var(--lila); }
.chat-contacto .chat-consentimiento { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--texto-medio); }
.chat-consentimiento input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--lila); }
.chat-consentimiento a { color: var(--lila); text-decoration: underline; }
.chat-contacto-error { color: var(--fucsia-texto); font-weight: 600; }
.chat-contacto-error:empty { display: none; }
.chat-contacto-botones { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-contacto .btn.chico { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; }
.chat-contacto-no { border: 0; background: none; color: var(--texto-suave); font: 600 13px var(--font-main); cursor: pointer; text-decoration: underline; }