/* ==========================================================================
   AIYMAS — styles.css
   Hoja de estilos principal (extraída del index.html monolítico).

   Estructura:
     1.  Variables y base
     2.  Canvas de fondo
     3.  Utilidades (glass, gradientes, botones, enlaces)
     4.  Tarjetas y glows
     5.  Animaciones (keyframes)
     6.  Scroll reveal
     7.  Navbar
     8.  Hero
     9.  Toggle de idioma
     10. Modal
     11. WhatsApp flotante
     12. Widget de chat
     13. Toast
     14. Menú móvil
     15. Tarjetas comparación (Antes/Después)
     16. Narrativa de stats
     17. Canvas del orb (hero)
     18. Validación de formulario
     19. Chat proactivo
     20. Responsive
   ========================================================================== */

/* ============ 1. VARIABLES Y BASE ============ */
:root {
  /* Paleta de marca AIYMAS */
  --bg-dark:        #02040a;
  --cyan:           #06b6d4;
  --cyan-light:     #22d3ee;
  --cyan-lighter:   #67e8f9;
  --blue:           #2563eb;
  --purple:         #8b5cf6;
  --purple-light:   #a78bfa;
  --emerald:        #10b981;
  --emerald-light:  #34d399;
  --emerald-dark:   #059669;
  --amber:          #f59e0b;
  --amber-light:    #fbbf24;
  --rose:           #f43f5e;
  --rose-light:     #fb7185;
  --whatsapp:       #25d366;
  --whatsapp-dark:  #128c7e;
  --bookings:       #0078d4;
  --bookings-dark:  #106ebe;

  /* Escala slate */
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-200: #e2e8f0;

  /* Componentes RGB (para transparencias rgba()) */
  --rgb-cyan:       6, 182, 212;
  --rgb-cyan-light: 34, 211, 238;
  --rgb-blue:       37, 99, 235;
  --rgb-purple:     139, 92, 246;
  --rgb-emerald:    16, 185, 129;
  --rgb-rose:       244, 63, 94;
  --rgb-white:      255, 255, 255;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-dark);
  color: #ffffff;
  overflow-x: hidden;
}

::selection { background: rgba(var(--rgb-cyan), 0.3); color: #ecfeff; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--slate-800); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-700); }

/* ============ 2. CANVAS DE FONDO ============ */
#bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ============ 3. UTILIDADES ============ */
.glass-panel {
  background: rgba(var(--rgb-white), 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--rgb-white), 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.gradient-text {
  background: linear-gradient(to right, var(--cyan-lighter), var(--cyan), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-green {
  background: linear-gradient(to right, var(--emerald-light), var(--emerald), var(--emerald-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-number {
  background: linear-gradient(to bottom, #ffffff, var(--slate-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Botones ---- */
.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  background: rgba(var(--rgb-cyan), 0.1);
  border: 1px solid rgba(var(--rgb-cyan), 0.2);
  color: var(--cyan-light);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 200ms ease;
  margin-top: 16px;
}
.demo-btn:hover {
  background: rgba(var(--rgb-cyan), 0.2);
  border-color: rgba(var(--rgb-cyan), 0.4);
  transform: translateY(-2px);
}

.copy-btn {
  cursor: pointer;
  transition: all 200ms ease;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  background: rgba(var(--rgb-white), 0.05);
  border: 1px solid rgba(var(--rgb-white), 0.1);
  color: var(--slate-400);
}
.copy-btn:hover {
  background: rgba(var(--rgb-cyan), 0.1);
  border-color: rgba(var(--rgb-cyan), 0.3);
  color: var(--cyan-light);
}

.bookings-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bookings), var(--bookings-dark));
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 200ms ease;
}
.bookings-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 120, 212, 0.3); }

.external-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan-light);
  text-decoration: none;
  font-size: 13px;
  transition: all 200ms ease;
}
.external-link:hover { color: var(--cyan-lighter); }

/* ============ 4. TARJETAS Y GLOWS ============ */
.card-hover { transition: transform 500ms ease, box-shadow 500ms ease; }
.card-hover:hover { transform: translateY(-8px); }
.card-hover.cyan-glow:hover    { box-shadow: 0 0 40px -10px rgba(var(--rgb-cyan), 0.15); }
.card-hover.purple-glow:hover  { box-shadow: 0 0 40px -10px rgba(var(--rgb-purple), 0.15); }
.card-hover.emerald-glow:hover { box-shadow: 0 0 40px -10px rgba(var(--rgb-emerald), 0.15); }
.card-hover.amber-glow:hover   { box-shadow: 0 0 40px -10px rgba(245, 158, 11, 0.15); }
.card-hover.rose-glow:hover    { box-shadow: 0 0 40px -10px rgba(var(--rgb-rose), 0.15); }
.card-hover.blue-glow:hover    { box-shadow: 0 0 40px -10px rgba(var(--rgb-blue), 0.15); }

.card-icon { transition: transform 500ms ease; }
.card-hover:hover .card-icon { transform: scale(1.1); transition: transform 500ms ease; }

.cert-badge { transition: all 300ms ease; }
.cert-badge:hover { transform: scale(1.05); border-color: rgba(var(--rgb-cyan), 0.3) !important; }

.service-card-inner { position: relative; overflow: hidden; }
.service-card-inner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, var(--glow-color), transparent 60%);
  opacity: 0; transition: opacity 700ms ease;
}
.service-card-inner:hover::before { opacity: 1; }

/* ============ 5. ANIMACIONES (KEYFRAMES) ============ */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}
@keyframes float-delayed {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(var(--rgb-cyan), 0.3); }
  50% { box-shadow: 0 0 40px rgba(var(--rgb-cyan), 0.5); }
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(140px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}
@keyframes orbit-reverse {
  from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
  to { transform: rotate(-360deg) translateX(100px) rotate(360deg); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* FIX: este keyframe era referenciado por el punto "Online" del chat
   (animation: pulse 2s infinite) pero no existía en el CSS original. */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float-delayed 7s ease-in-out infinite 1s; }
.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 30s linear infinite; }

/* ============ 6. SCROLL REVEAL ============ */
.reveal { opacity: 0; transform: translateY(40px); transition: all 800ms ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }

/* ============ 7. NAVBAR ============ */
.nav-link { position: relative; transition: color 150ms ease; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--cyan); transition: width 300ms ease;
}
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--cyan-light); }

/* ============ 8. HERO ============ */
.hero-badge { animation: slide-up 800ms ease forwards; }
.hero-title { animation: slide-up 800ms ease 200ms forwards; opacity: 0; }
.hero-desc { animation: slide-up 800ms ease 400ms forwards; opacity: 0; }
.hero-buttons { animation: slide-up 800ms ease 600ms forwards; opacity: 0; }

/* ============ 9. TOGGLE DE IDIOMA ============ */
.lang-toggle {
  position: relative;
  width: 60px;
  height: 28px;
  background: rgba(var(--rgb-white), 0.08);
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid rgba(var(--rgb-white), 0.1);
  transition: all 200ms ease;
  flex-shrink: 0;
}
.lang-toggle:hover { border-color: rgba(var(--rgb-cyan), 0.3); }
.lang-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border-radius: 50%;
  transition: transform 300ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
}
.lang-toggle.active .lang-toggle-slider { transform: translateX(32px); }
.lang-label { font-size: 10px; color: var(--slate-500); position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; }
.lang-label.es { left: 8px; }
.lang-label.en { right: 8px; }

/* ============ 10. MODAL ============ */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-content {
  background: var(--slate-900);
  border: 1px solid rgba(var(--rgb-white), 0.1);
  border-radius: 20px;
  width: 92%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform 300ms ease;
}
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(var(--rgb-white), 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 80px);
}
.modal-close {
  background: none;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 200ms ease;
}
.modal-close:hover { color: white; background: rgba(var(--rgb-white), 0.05); }

/* ============ 11. WHATSAPP FLOTANTE ============ */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
  transition: all 300ms ease;
  cursor: pointer;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5); }

/* ============ 12. WIDGET DE CHAT ============ */
.chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 1000; }

.chat-toggle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(var(--rgb-cyan), 0.3);
  transition: all 300ms ease;
  /* Nota: en el original .chat-toggle se definía dos veces;
     aquí se unifican ambas declaraciones. */
  animation: chat-pulse 2s infinite, chat-bounce 3s ease-in-out infinite;
}
.chat-toggle:hover { transform: scale(1.1); }
.chat-toggle svg { color: white; }

.chat-container {
  position: fixed; bottom: 90px; right: 24px;
  width: 380px; max-width: calc(100vw - 48px);
  height: 520px; max-height: calc(100vh - 120px);
  background: rgba(2, 6, 23, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--rgb-cyan), 0.2);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 300ms ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--rgb-cyan), 0.1);
}
.chat-container.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }

.chat-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(var(--rgb-cyan), 0.15), rgba(var(--rgb-blue), 0.1));
  border-bottom: 1px solid rgba(var(--rgb-cyan), 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-header-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
}
.chat-header-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--emerald-light); }
.chat-header-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-light); animation: pulse 2s infinite; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(var(--rgb-cyan), 0.3); border-radius: 2px; }

.chat-message { max-width: 85%; padding: 12px 16px; border-radius: 16px; font-size: 13px; line-height: 1.5; word-wrap: break-word; }
.chat-message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-message.bot {
  align-self: flex-start;
  background: rgba(var(--rgb-white), 0.05);
  border: 1px solid rgba(var(--rgb-white), 0.08);
  color: var(--slate-200);
  border-bottom-left-radius: 4px;
}
.chat-message.bot a { color: var(--cyan-light); text-decoration: underline; }
.chat-message.bot strong { color: var(--cyan-lighter); }

.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid rgba(var(--rgb-white), 0.05);
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-input {
  flex: 1;
  background: rgba(var(--rgb-white), 0.03);
  border: 1px solid rgba(var(--rgb-white), 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  color: white;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  resize: none;
  outline: none;
  transition: all 200ms ease;
}
.chat-input:focus { border-color: rgba(var(--rgb-cyan), 0.4); }
.chat-input::placeholder { color: var(--slate-500); }

.chat-send-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 200ms ease;
  flex-shrink: 0;
}
.chat-send-btn:hover { transform: scale(1.05); }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.typing-indicator {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  align-self: flex-start;
  background: rgba(var(--rgb-white), 0.05);
  border: 1px solid rgba(var(--rgb-white), 0.08);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
.typing-indicator span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan-light);
  animation: typing-dot 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.chat-suggestion {
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(var(--rgb-cyan), 0.08);
  border: 1px solid rgba(var(--rgb-cyan), 0.15);
  color: var(--cyan-light);
  font-size: 11px;
  cursor: pointer;
  transition: all 200ms ease;
  white-space: nowrap;
}
.chat-suggestion:hover {
  background: rgba(var(--rgb-cyan), 0.15);
  border-color: rgba(var(--rgb-cyan), 0.3);
}

.chat-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 200ms ease;
}
.chat-close:hover { color: white; background: rgba(var(--rgb-white), 0.05); }

@keyframes chat-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--rgb-cyan), 0.4); }
  50% { box-shadow: 0 0 0 15px rgba(var(--rgb-cyan), 0); }
}
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}
@keyframes chat-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-chat-pulse { animation: chat-pulse 2s infinite; }

/* ============ 13. TOAST ============ */
.toast {
  position: fixed; bottom: 100px; right: 24px;
  background: rgba(var(--rgb-cyan), 0.15);
  border: 1px solid rgba(var(--rgb-cyan), 0.3);
  backdrop-filter: blur(16px);
  padding: 16px 24px;
  border-radius: 12px;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  transition: all 400ms ease;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ============ 14. MENÚ MÓVIL ============ */
.mobile-menu { transform: translateX(100%); transition: transform 400ms ease; }
.mobile-menu.open { transform: translateX(0); }

/* ============ 15. TARJETAS COMPARACIÓN (ANTES/DESPUÉS) ============ */
.comparison-card {
  position: relative;
  border-radius: 20px;
  padding: 32px;
  transition: all 500ms ease;
}
.comparison-card.before {
  background: rgba(var(--rgb-rose), 0.03);
  border: 1px solid rgba(var(--rgb-rose), 0.12);
}
.comparison-card.after {
  background: rgba(var(--rgb-emerald), 0.03);
  border: 1px solid rgba(var(--rgb-emerald), 0.12);
}
.comparison-card.before:hover {
  border-color: rgba(var(--rgb-rose), 0.3);
  box-shadow: 0 0 40px -10px rgba(var(--rgb-rose), 0.1);
}
.comparison-card.after:hover {
  border-color: rgba(var(--rgb-emerald), 0.3);
  box-shadow: 0 0 40px -10px rgba(var(--rgb-emerald), 0.1);
}
.comparison-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--rgb-white), 0.04);
}
.comparison-metric:last-child { border-bottom: none; }
.comparison-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.comparison-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--rgb-emerald), 0.15), rgba(var(--rgb-cyan), 0.15));
  border: 1px solid rgba(var(--rgb-emerald), 0.2);
  flex-shrink: 0;
  margin: 0 -24px;
  z-index: 2;
  position: relative;
}

/* ============ 16. NARRATIVA DE STATS ============ */
.stat-narrative { overflow: hidden; }
.stat-narrative .stat-item {
  opacity: 0;
  transform: translateY(20px);
  transition: all 600ms ease;
}
.stat-narrative.active .stat-item { opacity: 1; transform: translateY(0); }
.stat-narrative.active .stat-item:nth-child(1) { transition-delay: 0ms; }
.stat-narrative.active .stat-item:nth-child(2) { transition-delay: 150ms; }
.stat-narrative.active .stat-item:nth-child(3) { transition-delay: 300ms; }
.stat-narrative.active .stat-item:nth-child(4) { transition-delay: 450ms; }

/* ============ 17. CANVAS DEL ORB (HERO) ============ */
#orb-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ============ 18. VALIDACIÓN DE FORMULARIO ============ */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgba(var(--rgb-cyan), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--rgb-cyan), 0.1);
}
.field-valid {
  border-color: rgba(var(--rgb-emerald), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--rgb-emerald), 0.1);
}
.field-invalid {
  border-color: rgba(var(--rgb-rose), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--rgb-rose), 0.1);
}
.field-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; margin-top: 4px;
  opacity: 0; transition: opacity 200ms ease;
}
.field-status.visible { opacity: 1; }
.field-status.valid { color: var(--emerald-light); }
.field-status.invalid { color: var(--rose-light); }

/* ============ 19. CHAT PROACTIVO ============ */
.proactive-msg {
  background: rgba(var(--rgb-cyan), 0.08);
  border: 1px solid rgba(var(--rgb-cyan), 0.15);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 12px 16px;
  max-width: 85%;
  align-self: flex-start;
  font-size: 13px;
  color: var(--slate-200);
  animation: slide-up 400ms ease forwards;
  opacity: 0;
}
.proactive-msg a { color: var(--cyan-light); text-decoration: underline; }

/* ============ 20. RESPONSIVE ============ */
@media (max-width: 480px) {
  .chat-container { width: calc(100vw - 32px); right: 16px; bottom: 80px; }
  .chat-widget { bottom: 16px; right: 16px; }
  .whatsapp-float { bottom: 16px; left: 16px; }
  .toast { bottom: 90px; right: 16px; left: 16px; }
}