/* Integración técnica del diseño de Valeria (diseno-valeria-v2). NO es diseño: su landing.css y tema.css van tal cual.
   Aquí solo: fotos en <picture> (WebP con respaldo), el chat real con su maquetado y la burbuja en celular. */

/* <picture> no debe cambiar el acomodo: la imagen sigue siendo el elemento del grid/flex como en su index.html */
.logo picture, .l-portada-dentro > picture, .l-escena-imagen picture, .l-pie picture { display: contents; }
picture > source { display: none; } /* (si no, el <source> ocupa un lugar en la cuadrícula) */

/* Chat real con su maquetado (.chat-mensaje): respuestas de varios renglones y "escribiendo…" */
.chat-mensaje p { white-space: pre-wrap; word-wrap: break-word; }
.chat-mensaje .escribiendo { display: inline-flex; margin-top: 6px; }

/* Celular: la burbuja "¿Dudas? Pregúntame" no tapa la portada (ahí ya está el botón "Quiero mi semana gratis").
   Aparece en cuanto se baja un poco. Mismo estilo, solo cuándo se ve. */
.chat-burbuja { transition: opacity .25s ease, transform .25s ease; }
.chat-burbuja.en-portada { opacity: 0; transform: translateY(24px); pointer-events: none; }