.whatsapp-widget {
  --whatsapp-surface: var(--surface, #2E2B26);
  --whatsapp-cream: var(--cream, #F7F4EE);
  /* Keep chat-panel secondary text consistent on dark pages and cream forms. */
  --whatsapp-muted: #A39B90;
  --whatsapp-accent: var(--crema, #C08A3E);
  position: fixed; right: 24px; bottom: 24px; z-index: 90; font-family: 'Inter', sans-serif;
}
.whatsapp-float { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-left: auto; padding: 0; border: 1px solid rgba(247,244,238,.18); border-radius: 50%; background: var(--whatsapp-surface); cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.28); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.whatsapp-float:hover { transform: translateY(-3px); border-color: var(--whatsapp-accent); box-shadow: 0 14px 32px rgba(0,0,0,.34); }
.whatsapp-float:focus-visible, .whatsapp-close:focus-visible, .whatsapp-contact:focus-visible { outline: 3px solid rgba(247,244,238,.85); outline-offset: 3px; }
.whatsapp-icon { width: 26px; height: 26px; filter: brightness(0) saturate(100%) invert(56%) sepia(27%) saturate(1038%) hue-rotate(356deg) brightness(88%) contrast(88%); }
.whatsapp-card { position: absolute; right: 0; bottom: 66px; width: min(348px, calc(100vw - 32px)); overflow: hidden; border: 1px solid rgba(247,244,238,.14); border-radius: 14px; background: var(--whatsapp-surface); color: var(--whatsapp-cream); box-shadow: 0 18px 42px rgba(0,0,0,.38); opacity: 0; visibility: hidden; transform: scale(.88) translateY(12px); transform-origin: bottom right; transition: opacity .24s ease, transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s linear .24s; }
.whatsapp-widget.is-open .whatsapp-card { opacity: 1; visibility: visible; transform: scale(1) translateY(0); transition: opacity .24s ease, transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.whatsapp-card-header { position: relative; display: flex; gap: 12px; padding: 22px 48px 18px 20px; border-bottom: 1px solid rgba(247,244,238,.1); }
.whatsapp-card-mark { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(247,244,238,.14); border-radius: 50%; background: rgba(247,244,238,.05); }
.whatsapp-card-mark .whatsapp-icon { width: 22px; height: 22px; }
.whatsapp-card h2 { margin: 0 0 4px; color: var(--whatsapp-accent); font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 500; line-height: 1.15; }
.whatsapp-card p { margin: 0; }
.whatsapp-intro { color: var(--whatsapp-muted); font-size: 13px; line-height: 1.5; }
.whatsapp-close { position: absolute; top: 13px; right: 13px; display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--whatsapp-muted); cursor: pointer; font-size: 23px; line-height: 1; transition: color .2s ease, background .2s ease; }
.whatsapp-close:hover { background: rgba(247,244,238,.08); color: var(--whatsapp-cream); }
.whatsapp-card-body { padding: 16px 20px 20px; }
.whatsapp-reply-note { margin-bottom: 13px !important; color: var(--whatsapp-muted); font-size: 12px; line-height: 1.45; }
.whatsapp-contact { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(247,244,238,.14); border-radius: 10px; background: rgba(247,244,238,.04); color: var(--whatsapp-cream); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.whatsapp-contact:hover { border-color: var(--whatsapp-accent); background: rgba(192,138,62,.1); transform: translateY(-1px); }
.whatsapp-contact .whatsapp-icon { width: 24px; height: 24px; }
.whatsapp-contact-name { font-size: 14px; font-weight: 600; }
.whatsapp-contact-label { display: block; margin-top: 2px; color: var(--whatsapp-muted); font-size: 11px; }
@media (max-width: 620px) { .whatsapp-widget { right: 16px; bottom: 16px; } .whatsapp-float { width: 46px; height: 46px; } .whatsapp-float .whatsapp-icon { width: 24px; height: 24px; } .whatsapp-card { bottom: 60px; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-float, .whatsapp-card, .whatsapp-close, .whatsapp-contact { transition: none; } }
