/* Bot de WhatsApp en Contenido: qué hace y un botón para probar el bot de Jema. Toma --accent, --ink y --display de la página. */
.bot-demo { padding-block: clamp(64px, 9vw, 110px); }
.bot-demo .bd-inner { width: min(1240px, calc(100% - 80px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.bd-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.bd-kicker:before { content: ''; width: 26px; height: 2px; background: var(--accent); }
.bot-demo h2 { margin: 0 0 22px; font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 5.4vw, 5.4rem); line-height: .98; }
.bot-demo h2 span { color: var(--accent); }
.bd-copy > p:not(.bd-kicker) { max-width: 480px; margin: 0; color: var(--muted, #5a6361); line-height: 1.7; }
.bd-points { display: grid; gap: 12px; max-width: 480px; margin: 26px 0 0; padding: 0; list-style: none; }
.bd-points li { position: relative; padding-left: 30px; line-height: 1.55; }
.bd-points li:before { content: ''; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: #187448; }
.bd-points li:after { content: ''; position: absolute; left: 6px; top: calc(.3em + 4px); width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bd-try { display: inline-flex; flex-direction: column; gap: 4px; margin-top: 30px; padding: 18px 26px; border-radius: 18px; background: #187448; color: #fff; box-shadow: 0 14px 30px #18744833; transition: transform .25s, box-shadow .25s; }
.bd-try:hover { transform: translateY(-3px); box-shadow: 0 18px 36px #1874484d; }
.bd-try strong { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.bd-try span { font-size: 1.0625rem; font-weight: 650; }
.bd-note { margin-top: 14px !important; font-size: .8125rem; }

/* Teléfono con una charla de ejemplo */
.bd-phone { justify-self: center; width: min(360px, 100%); margin: 0; padding: 12px; border-radius: 40px; background: #171b1b; box-shadow: 0 30px 70px #1b262a33, inset 0 0 0 2px #ffffff1f; }
.bd-screen { overflow: hidden; border-radius: 30px; background: #efeae2; }
.bd-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px; background: #187448; color: #fff; }
.bd-bar img { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #fff; object-fit: contain; }
.bd-bar span { display: flex; flex-direction: column; line-height: 1.25; }
.bd-bar strong { font-size: .9375rem; font-weight: 650; }
.bd-bar small { font-size: .75rem; opacity: .85; }
.bd-chat { display: flex; flex-direction: column; gap: 8px; min-height: 380px; padding: 16px 12px 18px; }
.bd-msg { max-width: 84%; margin: 0; padding: 8px 11px; border-radius: 12px; font-size: .875rem; line-height: 1.45; color: #111b21; box-shadow: 0 1px 1px #0b141a1f; }
.bd-bot { align-self: flex-start; border-top-left-radius: 4px; background: #fff; }
.bd-me { align-self: flex-end; border-top-right-radius: 4px; background: #d9fdd3; }
.bd-typing { display: none; align-self: flex-start; gap: 4px; margin: 0; padding: 12px 14px; border-radius: 12px; border-top-left-radius: 4px; background: #fff; box-shadow: 0 1px 1px #0b141a1f; }
.bd-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: bd-dot 1s infinite ease-in-out; }
.bd-typing i:nth-child(2) { animation-delay: .15s; }
.bd-typing i:nth-child(3) { animation-delay: .3s; }
.bd-phone figcaption { padding: 10px 0 2px; text-align: center; font-size: .75rem; color: #ffffffa6; }
@keyframes bd-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Con JavaScript, los mensajes aparecen de a uno cuando la charla entra en pantalla (bot-demo.js). */
.bd-ready .bd-msg { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.bd-ready .bd-msg.is-in { opacity: 1; transform: none; }
.bd-ready .bd-typing.is-on { display: flex; }

@media (max-width: 900px) {
  .bot-demo .bd-inner { grid-template-columns: 1fr; width: calc(100% - 40px); }
  .bd-try { display: flex; }
}
@media (max-width: 570px) {
  .bot-demo .bd-inner { width: calc(100% - 36px); }
  .bd-chat { min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-ready .bd-msg { opacity: 1; transform: none; }
  .bd-typing i { animation: none; }
}