:root {
            --conversa-blue: #001F3F;
            --conversa-red: #DC143C;
            --conversa-light: #F5F7FA;
            --conversa-gray: #EEF2F7;
        }
        /* Fonts */
        .font-sans { font-family: 'Inter', sans-serif; }
        .font-display { font-family: 'Outfit', sans-serif; }
        /* bg- */
        .bg-conversa-blue { background-color: var(--conversa-blue); }
        .bg-conversa-red { background-color: var(--conversa-red); }
        .bg-conversa-light { background-color: var(--conversa-light); }
        .bg-conversa-gray { background-color: var(--conversa-gray); }
        /* text- */
        .text-conversa-blue { color: var(--conversa-blue); }
        .text-conversa-red { color: var(--conversa-red); }
        /* border- */
        .border-conversa-blue { border-color: var(--conversa-blue); }
        .border-conversa-red { border-color: var(--conversa-red); }
        /* fill- */
        .fill-conversa-light { fill: var(--conversa-light); }
        /* gradient stops */
        .from-conversa-blue { --tw-gradient-from: var(--conversa-blue); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,31,63,0)); }
        .to-conversa-blue { --tw-gradient-to: var(--conversa-blue); }
        .to-conversa-red { --tw-gradient-to: var(--conversa-red); }
        /* hover */
        .hover\:bg-conversa-blue:hover { background-color: var(--conversa-blue); }
        .hover\:bg-conversa-light:hover { background-color: var(--conversa-light); }
        .hover\:text-conversa-blue:hover { color: var(--conversa-blue); }
        .hover\:text-conversa-red:hover { color: var(--conversa-red); }
        /* focus */
        .focus\:ring-conversa-blue:focus { --tw-ring-color: var(--conversa-blue); }
        .focus\:border-conversa-blue:focus { border-color: var(--conversa-blue); }
        .focus-within\:border-conversa-blue:focus-within { border-color: var(--conversa-blue); }
        .focus-within\:ring-conversa-blue:focus-within { --tw-ring-color: var(--conversa-blue); }
        .focus-within\:ring-1:focus-within { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
        /* selection */
        .selection\:bg-conversa-red ::selection, .selection\:bg-conversa-red::selection { background-color: var(--conversa-red); }
        .selection\:text-white ::selection, .selection\:text-white::selection { color: #fff; }
        /* shadow custom */
        .shadow-red-500\/30 { --tw-shadow-color: rgba(239,68,68,0.3); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 10px 15px -3px var(--tw-shadow-color); }
        .shadow-red-500\/40 { --tw-shadow-color: rgba(239,68,68,0.4); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 10px 15px -3px var(--tw-shadow-color); }
        .shadow-blue-900\/20 { --tw-shadow-color: rgba(30,58,138,0.2); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 10px 15px -3px var(--tw-shadow-color); }
        /* Tailwind v3 utilities not in v2 CDN */
        .bg-white\/10 { background-color: rgba(255,255,255,0.1); }
        .bg-white\/20 { background-color: rgba(255,255,255,0.2); }
        .bg-white\/90 { background-color: rgba(255,255,255,0.9); }
        .bg-gray-50\/50 { background-color: rgba(249,250,251,0.5); }
        .border-white\/20 { border-color: rgba(255,255,255,0.2); }
        .border-white\/30 { border-color: rgba(255,255,255,0.3); }
        .text-white\/90 { color: rgba(255,255,255,0.9); }
        .hover\:bg-white\/20:hover { background-color: rgba(255,255,255,0.2); }
        .hover\:bg-red-700:hover { background-color: #b91c1c; }
        .hover\:bg-blue-900:hover { background-color: #1e3a5f; }
        .hover\:bg-green-600:hover { background-color: #059669; }
        .bg-green-600 { background-color: #059669; }
        .hover\:bg-gray-50:hover { background-color: #f9fafb; }
        .hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
        .backdrop-blur-md { backdrop-filter: blur(12px); }
        .backdrop-blur-sm { backdrop-filter: blur(4px); }
        .bg-clip-text { -webkit-background-clip: text; background-clip: text; }
        .text-transparent { color: transparent; }
        .from-red-400 { --tw-gradient-from: #f87171; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248,113,113,0)); }
        .via-blue-900 { --tw-gradient-stops: var(--tw-gradient-from), #1e3a8a, var(--tw-gradient-to, rgba(30,58,138,0)); }
        .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }
        .space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
        .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
        .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
        .gap-1 { gap: 0.25rem; }
        .gap-5 { gap: 1.25rem; }
        .rounded-2xl { border-radius: 1rem; }
        .rounded-3xl { border-radius: 1.5rem; }
        .rounded-tl-none { border-top-left-radius: 0; }
        .max-h-\[80vh\] { max-height: 80vh; }
        .h-\[500px\] { height: 500px; }
        .h-\[50px\] { height: 50px; }
        .md\:h-\[100px\] { height: auto; }
        @media (min-width: 768px) { .md\:h-\[100px\] { height: 100px; } }
        .max-w-\[85\%\] { max-width: 85%; }
        .min-w-\[200px\] { min-width: 200px; }
        .min-w-\[220px\] { min-width: 220px; }
        .mix-blend-overlay { mix-blend-mode: overlay; }
        .mix-blend-multiply { mix-blend-mode: multiply; }
        .blur-3xl { filter: blur(64px); }
        .translate-y-1 { --tw-translate-y: 0.25rem; transform: translateX(var(--tw-translate-x,0)) translateY(var(--tw-translate-y)); }
        .group-hover\:block { display: none; }
        .group:hover .group-hover\:block { display: block; }
        .appearance-none { appearance: none; -webkit-appearance: none; }
        /* lg breakpoint overrides (Tailwind v3 uses 1024px) */
        @media (min-width: 1024px) {
            .lg\:flex { display: flex; }
            .lg\:hidden { display: none; }
            .lg\:flex-row { flex-direction: row; }
            .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .lg\:pt-40 { padding-top: 10rem; }
            .lg\:pb-28 { padding-bottom: 7rem; }
            .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
            .lg\:p-12 { padding: 3rem; }
            .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
            .lg\:w-5\/12 { width: 41.666667%; }
            .lg\:w-7\/12 { width: 58.333333%; }
        }
        .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.glass-panel {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            box-shadow: 0 25px 50px -12px rgba(0, 31, 63, 0.15);
        }
        
        .pulse-ring {
            animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }
        
        @keyframes pulse-ring {
            0% { transform: scale(0.9); opacity: 0.5; }
            80% { transform: scale(1.4); opacity: 0; }
            100% { transform: scale(1.4); opacity: 0; }
        }

        .wave-bar {
            animation: wave 0.8s ease-in-out infinite alternate;
        }
        .wave-bar:nth-child(2) { animation-delay: 0.1s; }
        .wave-bar:nth-child(3) { animation-delay: 0.2s; }
        .wave-bar:nth-child(4) { animation-delay: 0.3s; }
        
        @keyframes wave {
            0% { height: 8px; }
            100% { height: 24px; }
        }

        .chat-container::-webkit-scrollbar {
            width: 6px;
        }
        .chat-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .chat-container::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }
        
        .typing-indicator span {
            animation: blink 1.4s infinite both;
            height: 6px;
            width: 6px;
            background: #cbd5e1;
            border-radius: 50%;
            display: inline-block;
            margin: 0 1px;
        }
        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes blink {
            0% { opacity: 0.2; }
            20% { opacity: 1; }
            100% { opacity: 0.2; }
        }

        .connecting-pulse { animation: connecting-pulse 1.5s ease-in-out infinite; }
        @keyframes connecting-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

        .status-breathe { animation: status-breathe 2s ease-in-out infinite; }
        @keyframes status-breathe {
            0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
            50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
        }

        .quick-action {
            display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
            border-radius:20px; border:1.5px solid #e2e8f0; background:white;
            color:#334155; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.2s;
        }
        .quick-action:hover {
            border-color:#DC143C; color:#DC143C; background:#fef2f2;
            transform:translateY(-1px); box-shadow:0 2px 8px rgba(220,20,60,0.15);
        }
        .quick-action.primary {
            border-color:#DC143C; background:linear-gradient(135deg,#DC143C,#b91c1c); color:white;
        }
        .quick-action.primary:hover { background:linear-gradient(135deg,#b91c1c,#991b1b); color:white; }

        .chat-wa-btn {
            display:inline-flex; align-items:center; gap:8px; padding:10px 20px;
            border-radius:12px; background:#25D366; color:white; font-weight:600;
            font-size:14px; cursor:pointer; transition:all 0.2s; text-decoration:none; border:none;
        }
        .chat-wa-btn:hover { background:#1da851; transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,211,102,0.3); }

        .chat-info-btn {
            display:inline-flex; align-items:center; gap:8px; padding:10px 20px;
            border-radius:12px; background:#001F3F; color:white; font-weight:600;
            font-size:14px; cursor:pointer; transition:all 0.2s; text-decoration:none; border:none;
        }
        .chat-info-btn:hover { background:#003366; transform:translateY(-1px); }

        .trust-badge {
            display:flex; align-items:center; gap:5px; font-size:11px;
            color:rgba(191,219,254,0.9); padding:4px 10px; border-radius:8px;
            background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1);
        }

        .avatar-active-glow {
            box-shadow: 0 0 20px rgba(220,20,60,0.35), 0 0 40px rgba(220,20,60,0.15);
            transition: box-shadow 0.3s ease;
        }

        .online-pill {
            display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
            border-radius:20px; background:#f0fdf4; color:#16a34a; font-size:12px; font-weight:500;
        }
        .online-pill .dot {
            width:6px; height:6px; border-radius:50%; background:#16a34a;
            animation: status-breathe 2s ease-in-out infinite;
        }

        /* Hero responsive: en desktop el gradiente va de izq a der y el texto no necesita empujarse */
        @media (min-width: 768px) {
            .hero-section { padding-top: 160px !important; padding-bottom: 112px !important; }
            .hero-section .hero-gradient { background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, transparent 70%) !important; }
            .hero-section .hero-text { min-height: auto !important; padding-top: 0 !important; justify-content: center !important; }
        }