body {
            font-family: 'Inter', sans-serif;
        }

        .font-serif {
            font-family: 'Crimson Pro', serif;
        }

        .font-display {
            font-family: 'Playfair Display', serif;
        }

        /* Personalización del Chat de n8n */
        :root {
            --chat--color-primary: #1D1D1F;
            --chat--color-primary-shade-50: #2d2d2f;
            --chat--color-secondary: #059669;
            --chat--color-background: #FFFFFF;
            --chat--color-font: #1D1D1F;
            --chat--border-radius: 16px;
            --chat--message--bot--background: #F5F5F7;
            --chat--message--bot--color: #1D1D1F;
            --chat--message--user--background: #1D1D1F;
            --chat--message--user--color: #FFFFFF;
            --chat--header--background: #1D1D1F;
            --chat--header--color: #FFFFFF;
            --chat--input--background: #F5F5F7;
            --chat--input--border-color: #e5e7eb;
            --chat--toggle--background: #000000;
            --chat--window--width: 380px;
            --chat--window--height: 580px;
        }

        /* Reemplazar el ícono del botón flotante por book-open (blanco) */
        .chat-window-wrapper .chat-window-toggle svg {
            display: none !important;
        }

        .chat-window-wrapper .chat-window-toggle::before {
            content: '';
            display: block;
            width: 24px;
            height: 24px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='white'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 136 32 78.1 32 22.1 49.3 2 61.2c-1.1 .7-2 2-2 3.4v402c0 10.1 9 17.5 19 15.6C73 470.4 117.7 464 152 464c51.9 0 81.3 7 97.6 7.5zM326.4 471.5c16.3-.5 45.7-7.5 97.6-7.5 34.3 0 79 6.4 133 18.2 10 2 19-5.5 19-15.6v-402c0-1.4-.9-2.7-2-3.4C553.9 49.3 497.9 32 440 32c-66.4 0-111.4 20-131 35.6-3.4 2.6-5 6.8-5 11V456c0 11.4 11.6 19.3 22.4 15.5z'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .n8n-chat .chat-window {
            border-radius: 20px !important;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18) !important;
            border: 1px solid rgba(0, 0, 0, 0.06) !important;
            overflow: hidden !important;
        }

        .n8n-chat .chat-window-header {
            background: #2d2d2f !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
            padding: 16px 20px !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 12px !important;
        }

        .n8n-chat .chat-window-header::before {
            content: '';
            display: block;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background-color: #3a3a3c;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none'%3E%3Crect x='20' y='6' width='24' height='20' rx='6' fill='%23e5e7eb'/%3E%3Ccircle cx='26' cy='14' r='3' fill='%232d2d2f'/%3E%3Ccircle cx='38' cy='14' r='3' fill='%232d2d2f'/%3E%3Crect x='30' y='24' width='4' height='5' rx='1' fill='%23e5e7eb'/%3E%3Crect x='10' y='30' width='44' height='26' rx='8' fill='%23e5e7eb'/%3E%3Crect x='18' y='38' width='8' height='8' rx='2' fill='%232d2d2f'/%3E%3Crect x='38' y='38' width='8' height='8' rx='2' fill='%232d2d2f'/%3E%3Crect x='26' y='42' width='12' height='3' rx='1.5' fill='%232d2d2f'/%3E%3Crect x='4' y='34' width='6' height='14' rx='3' fill='%23e5e7eb'/%3E%3Crect x='54' y='34' width='6' height='14' rx='3' fill='%23e5e7eb'/%3E%3C/svg%3E");
            background-size: 68%;
            background-repeat: no-repeat;
            background-position: center;
            flex-shrink: 0;
        }

        .n8n-chat .chat-window-title {
            font-family: 'Playfair Display', Georgia, serif !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            color: #f3f4f6 !important;
            letter-spacing: -0.01em !important;
        }

        .n8n-chat .chat-window-subtitle {
            font-size: 11px !important;
            color: #34d399 !important;
            font-weight: 500 !important;
        }

        .n8n-chat .chat-window-header .chat-close-button {
            margin-left: auto !important;
            color: rgba(255, 255, 255, 0.5) !important;
        }

        .n8n-chat .chat-message {
            border-radius: 14px !important;
            font-size: 13.5px !important;
            line-height: 1.55 !important;
            font-family: 'Inter', sans-serif !important;
        }

        .n8n-chat .chat-message.chat-message-from-bot {
            background: #F5F5F7 !important;
            color: #1D1D1F !important;
            border-bottom-left-radius: 4px !important;
        }

        .n8n-chat .chat-message.chat-message-from-user {
            background: #1D1D1F !important;
            color: white !important;
            border-bottom-right-radius: 4px !important;
        }

        .n8n-chat .chat-input textarea {
            font-family: 'Inter', sans-serif !important;
            font-size: 13px !important;
            border-radius: 12px !important;
            background: #F5F5F7 !important;
        }

        .n8n-chat .chat-input-send-button {
            background: #1D1D1F !important;
            border-radius: 50% !important;
        }

        .n8n-chat .chat-toggle {
            background: #1D1D1F !important;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
            border-radius: 50% !important;
            overflow: hidden !important;
            padding: 0 !important;
            border: none !important;
        }

        .light-lines {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .light-lines::before,
        .light-lines::after {
            content: "";
            position: absolute;
            width: 200%;
            height: 200%;
            background: repeating-linear-gradient(120deg,
                    rgba(0, 0, 0, 0.03) 0px,
                    rgba(0, 0, 0, 0.03) 1px,
                    transparent 1px,
                    transparent 60px);
            animation: moveLines 20s linear infinite;
        }

        .light-lines::after {
            animation-duration: 30s;
            opacity: 0.5;
        }

        @keyframes moveLines {
            from {
                transform: translateX(-10%) translateY(-10%);
            }

            to {
                transform: translateX(10%) translateY(10%);
            }
        }

        .hero-bg {
            background-image: url('https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?auto=format&fit=crop&w=2000&q=80');
            background-size: cover;
            background-position: center;
        }

        .hero-overlay {
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.7) 0%, rgba(20, 20, 20, 0.4) 50%, rgba(5, 150, 105, 0.2) 100%);
        }

        .book-float {
            animation: float 6s ease-in-out infinite;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(-2deg);
            }

            50% {
                transform: translateY(-10px) rotate(2deg);
            }
        }

        .organic-shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.6;
        }

        .leaf-decoration {
            position: absolute;
            opacity: 0.15;
            pointer-events: none;
        }

        /* float legacy */
        .float-element {
            animation: floatLegacy 6s ease-in-out infinite;
        }

        @keyframes floatLegacy {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-15px);
            }
        }

        /* Lógica del selector de roles */
        body[data-role="visitante"] .n8n-chat {
            display: none !important;
        }

        body[data-role="visitante"] #fake-chat-system {
            display: block !important;
        }

        body[data-role="registrado"] .n8n-chat {
            display: block !important;
        }

        body[data-role="registrado"] #fake-chat-system {
            display: none !important;
        }

        body[data-role="administrativo"] .n8n-chat {
            display: none !important;
        }

        body[data-role="administrativo"] #fake-chat-system {
            display: none !important;
        }

        #dashboard-btn {
            display: none;
        }

        body[data-role="administrativo"] #dashboard-btn {
            display: inline-flex;
        }

        #workflows-btn {
            display: none;
        }

        body[data-role="administrativo"] #workflows-btn {
            display: inline-flex;
        }

        /* Modal ¿Cómo funciona? */
        #how-it-works-modal {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .video-portrait-container {
            aspect-ratio: 9/16;
            max-height: 80vh;
            width: auto;
            background: #000;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        @media (max-aspect-ratio: 9/16) {
            .video-portrait-container {
                width: 90vw;
                height: auto;
            }
        }

/* Fondo gris muy suave */
        .bg-scene-1,
        .bg-scene-2,
        .bg-scene-3,
        .bg-scene-4,
        .bg-scene-5,
        .bg-scene-6,
        .bg-scene-7 {
            background: #F7F7F7;
        }

        @keyframes robotFloat {

            0%,
            100% {
                transform: translateY(0px) rotate(-1deg);
            }

            50% {
                transform: translateY(-14px) rotate(1deg);
            }
        }

        @keyframes waveArm {

            0%,
            100% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(6deg);
            }
        }

        @keyframes blinkEye {

            0%,
            88%,
            100% {
                opacity: 1;
                transform: scaleY(1);
            }

            92% {
                opacity: 0.2;
                transform: scaleY(0.1);
            }
        }

        @keyframes pulseDot {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.5;
                transform: scale(0.75);
            }
        }

        @keyframes bookFloat {

            0%,
            100% {
                transform: translateY(0px) rotate(-1deg);
            }

            50% {
                transform: translateY(-10px) rotate(0.5deg);
            }
        }

        @keyframes bookPulse {

            0%,
            100% {
                box-shadow: -6px 6px 0 #0a0a0a, 0 30px 50px rgba(0, 0, 0, 0.3);
            }

            50% {
                box-shadow: -6px 6px 0 #0a0a0a, 0 30px 50px rgba(16, 185, 129, 0.25);
            }
        }

        @keyframes toolFloat {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-8px) rotate(-5deg);
            }
        }

        @keyframes heartBeat {

            0%,
            100% {
                transform: scale(1);
            }

            25% {
                transform: scale(1.15);
            }

            50% {
                transform: scale(1);
            }

            75% {
                transform: scale(1.08);
            }
        }

        @keyframes sparkle {

            0%,
            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }

            50% {
                opacity: 0.4;
                transform: scale(0.7) rotate(20deg);
            }
        }

        @keyframes slideInRow {
            from {
                opacity: 0;
                transform: translateX(16px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }