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

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

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


        .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="administrativo"] #af-chat-btn,
        body[data-role="administrativo"] #af-chat-window {
            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);
            }
        }

/* Transiciones para la portada del modal de detalles en móvil */
#detail-book-cover-container {
    transition: max-width 0.2s ease;
}
#book-details-modal .md\:w-5\/12 {
    transition: padding 0.2s ease, min-height 0.2s ease;
}

/* Fondo del menú hamburguesa en móvil */
#mobile-menu {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}