/* Asistente de demostración con aspecto de WhatsApp, en los colores de Los Castaños. */
.wa { --wa-green: #25d366; --wa-out: #d9fdd3; --wa-paper: #efeae2; --wa-head: #1f3329; font-family: var(--sans); }
.wa-fab {
  position: fixed; z-index: 140; right: 28px; bottom: 28px;
  height: 62px; padding: 0 24px 0 16px; border: 0; border-radius: 31px; cursor: pointer;
  display: flex; align-items: center; gap: 12px; color: #fff; background: var(--wa-green);
  box-shadow: 0 14px 34px rgba(12, 40, 24, .32), 0 0 0 0 rgba(37, 211, 102, .5);
  animation: waPulse 2.8s 1.2s 3;
  transition: transform .5s var(--ease), opacity .3s, visibility .3s;
}
/* Rótulo fijo: en la demo el asistente tiene que notarse a primera vista. */
.wa-fab-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.wa-fab-label strong { font: 600 14px/1.1 var(--sans); }
.wa-fab-label em {
  margin-top: 5px; padding: 3px 6px 2px; border-radius: 3px; background: #c5a866; color: #1f2e26;
  font: 700 8.5px/1.2 var(--sans); font-style: normal; letter-spacing: .14em; white-space: nowrap;
}
.wa-fab:hover { transform: translateY(-3px) scale(1.04); }
.wa-fab svg { width: 32px; height: 32px; flex: none; }
.wa-badge {
  position: absolute; top: -2px; right: -2px; min-width: 21px; height: 21px; border-radius: 11px;
  background: #c5a866; color: #1f2e26; font: 600 11px/21px var(--sans); text-align: center; border: 2px solid #fff;
}
.wa-badge[hidden] { display: none; }
@keyframes waPulse { 70% { box-shadow: 0 14px 34px rgba(12, 40, 24, .32), 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 14px 34px rgba(12, 40, 24, .32), 0 0 0 0 rgba(37, 211, 102, 0); } }

.wa-teaser {
  position: fixed; z-index: 139; right: 28px; bottom: 104px; margin: 0; max-width: 250px;
  padding: 14px 34px 14px 16px; background: #fff; color: #2b3a31; border-radius: 12px 12px 2px 12px;
  font-size: 12.5px; line-height: 1.45; box-shadow: 0 16px 40px rgba(20, 30, 24, .22); cursor: pointer;
  animation: waRise .5s var(--ease) both;
}
.wa-teaser strong { display: block; font-weight: 600; color: #1f3329; }
.wa-teaser[hidden] { display: none; }
.wa-teaser-close { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: #8a948d; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; }

.wa-panel {
  position: fixed; z-index: 150; right: 28px; bottom: 104px;
  width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100svh - 140px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 16px;
  background: var(--wa-paper); box-shadow: 0 30px 80px rgba(10, 20, 14, .38), 0 0 0 1px rgba(255, 255, 255, .06);
  opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right;
  transition: opacity .25s ease, transform .3s var(--ease);
}
.wa-panel[hidden] { display: none; }
.wa-panel.is-open { opacity: 1; transform: none; }
.wa-head { display: flex; align-items: center; gap: 11px; padding: 12px 10px 12px 14px; background: var(--wa-head); color: #fff; }
.wa-avatar { width: 42px; height: 42px; object-fit: contain; padding: 5px; border-radius: 50%; background: #2c4436; border: 1px solid rgba(197, 168, 102, .45); }
.wa-who { flex: 1; min-width: 0; line-height: 1.25; }
.wa-who strong { display: block; font-weight: 600; font-size: 14.5px; }
.wa-status { font-size: 11.5px; color: #b9c9bd; }
.wa-test { display: block; margin-top: 3px; font: 700 9px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #d6bc7d; }
.wa-icon { width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: #d9e2da; cursor: pointer; display: grid; place-items: center; }
.wa-icon:hover { background: rgba(255, 255, 255, .1); }
.wa-icon svg { width: 20px; height: 20px; }

.wa-body {
  flex: 1; overflow-y: auto; padding: 12px 12px 6px; overscroll-behavior: contain;
  background-color: var(--wa-paper);
  background-image: radial-gradient(rgba(84, 70, 48, .07) 1px, transparent 1.4px), radial-gradient(rgba(84, 70, 48, .05) 1px, transparent 1.4px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px;
}
.wa-note {
  margin: 2px auto 10px; max-width: 290px; padding: 7px 12px; border-radius: 8px; text-align: center;
  background: #fdf3c8; color: #54483a; font-size: 11px; line-height: 1.45;
}
.wa-day { margin: 0 auto 10px; width: max-content; padding: 4px 11px; border-radius: 8px; background: #fff; color: #667781; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-msg { display: flex; margin: 3px 0; }
.wa-user { justify-content: flex-end; }
.wa-bubble {
  position: relative; max-width: 84%; padding: 7px 9px 8px 10px; border-radius: 9px; color: #111b21;
  font-size: 13.8px; line-height: 1.45; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere;
}
.wa-bot .wa-bubble { background: #fff; border-top-left-radius: 2px; }
.wa-user .wa-bubble { background: var(--wa-out); border-top-right-radius: 2px; }
.wa-bubble strong { font-weight: 600; }
.wa-time { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -3px 12px; font-size: 10.5px; color: #667781; }
.wa-ticks { width: 16px; height: 11px; color: #53bdeb; }
.wa-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.wa-action {
  flex: 1 1 auto; text-align: center; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  color: #1f5f45; background: #f0f5f1; border: 1px solid #d5e3d9; transition: background .2s;
}
.wa-action:hover { background: #e2eee6; }
.wa-in { animation: waRise .28s var(--ease) both; }
.wa-typing .wa-bubble { display: flex; gap: 4px; padding: 12px 14px; }
.wa-typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: waDot 1.2s infinite; }
.wa-typing i:nth-child(2) { animation-delay: .15s; }
.wa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes waDot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes waRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.wa-chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 4px; background: var(--wa-paper); scrollbar-width: none; }
.wa-chips::-webkit-scrollbar { display: none; }
.wa-chip {
  flex: none; padding: 7px 12px; border-radius: 16px; border: 1px solid #cfd9d2; background: #fff; color: #1f5f45;
  font-size: 12px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s;
}
.wa-chip:hover { background: #f0f5f1; border-color: #9fbcaa; }
.wa-form { display: flex; gap: 8px; align-items: center; padding: 8px 10px 10px; background: var(--wa-paper); }
.wa-input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: #fff; color: #111b21; font-size: 14px; outline: none; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-input:focus-visible { outline: 2px solid #1f5f45; outline-offset: 1px; }
.wa-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #1f5f45; color: #fff; cursor: pointer; display: grid; place-items: center; }
.wa-send svg { width: 20px; height: 20px; margin-left: 2px; }
.wa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.menu-open .wa { display: none; }

@media (max-width: 900px) {
  .wa-fab { right: 16px; bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 70px); height: 54px; padding: 0 24px 0 12px; gap: 10px; }
  .wa-fab svg { width: 28px; height: 28px; }
  .wa-fab-label strong { font-size: 13px; }
  .wa-teaser { right: 16px; bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 136px); max-width: 210px; }
  /* Sobre la portada los botones ocupan la parte baja: el asistente sube al hueco libre bajo el menú
     y baja solo al pasar la portada. */
  .wa-over-hero:not(.is-open) .wa-fab { transform: translateY(calc(264px - 100svh)); }
  .wa-over-hero .wa-teaser { opacity: 0; visibility: hidden; }
  .wa-panel { inset: 0; width: 100%; height: 100%; border-radius: 0; transform: translateY(24px); }
  .wa-panel.is-open { transform: none; }
  .wa.is-open .wa-fab, .wa.is-open .wa-teaser { display: none; }
  .wa-head { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .wa-form { padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  .wa-input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-teaser, .wa-panel, .wa-in, .wa-typing i { animation: none; transition: none; }
}