:root {
    --color-borde: #E5E7EB;
    --color-error: #EF4444;
    --color-exito: #10B981;
    --color-fondo: #FAFAFA;
    --color-primario: #111111;
    --color-secundario: #FF6B6B;
    --color-advertencia: #F59E0B;
    --color-fondo-header: #FFFFFF;
    --color-texto-header: #000000;
    --color-texto-principal: #333333;
    --color-texto-secundario: #6B7280;
    --color-texto-sobre-primario: #FFFFFF;
    --font-titulos: 'Montserrat', sans-serif;
    --font-cuerpo: 'Open Sans', sans-serif;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.15);
    --transition: all 0.3s ease;
    --store-primary-bg: #FFFFFF;
    --store-primary-bg-rgb: 255, 255, 255;
    --store-primary-text: #000000;
    /* Botón Perfil Primario */
    --km-btn-p-bg: #111111;
    --km-btn-p-text: #FFFFFF;
    --km-btn-p-hover-bg: #333333;
    --km-btn-p-hover-text: #ffffff;
    --km-btn-p-border: transparent;
    --km-btn-p-radius: 8px;
    --km-btn-p-pad-y: 0.8em;
    --km-btn-p-pad-x: 1.5em;
    --km-btn-p-font-size: 1rem;
    --km-btn-p-effect: 'sweep';
    /* Botón Perfil Secundario */
    --km-btn-s-bg: #ffffff;
    --km-btn-s-text: #111111;
    --km-btn-s-hover-bg: #f5f5f5;
    --km-btn-s-hover-text: #111111;
    --km-btn-s-border: 1px solid #111111;
    --km-btn-s-radius: 8px;
    --km-btn-s-pad-y: 0.8em;
    --km-btn-s-pad-x: 1.5em;
    --km-btn-s-font-size: 1rem;
    --km-btn-s-effect: 'none';
    /* Legacy aliases */
    --km-btn-bg: #111111;
    --km-btn-text: #FFFFFF;
    --km-btn-hover-bg: #333333;
    --km-btn-hover-text: #ffffff;
    --km-btn-border: transparent;
    --km-btn-radius: 8px;
    --km-btn-pad-y: 0.8em;
    --km-btn-pad-x: 1.5em;
    --km-btn-font-size: 1rem;
    --km-global-btn-bg: #111111;
    --km-global-btn-text: #FFFFFF;
    --km-global-btn-radius: 8px;
    /* Variables de página */
    --km-bg-page: #FAFAFA;
    --km-text-primary: #333333;
    --km-accent-color: #FF6B6B;
    /* Variables de tarjetas */
    --km-card-bg: #ffffff;
    --km-card-radius: 8px;
    --km-card-padding: 15px;
    --km-text-color: #333333;
}

        /* =============================================
        SISTEMA DE BOTONES - PERFILES DUALES
        Las clases km-btn-primario y km-btn-secundario
        solo remapean las variables locales --km-btn-*
        hacia el perfil global correspondiente.
        botones.css se encarga del layout y animaciones.
        ============================================= */

        .km-btn-primario {
            --km-btn-bg: var(--km-btn-p-bg);
            --km-btn-text: var(--km-btn-p-text);
            --km-btn-hover-bg: var(--km-btn-p-hover-bg);
            --km-btn-hover-text: var(--km-btn-p-hover-text);
            --km-btn-border: var(--km-btn-p-border);
            --km-btn-radius: var(--km-btn-p-radius);
            --km-btn-pad-y: var(--km-btn-p-pad-y);
            --km-btn-pad-x: var(--km-btn-p-pad-x);
            --km-btn-font-size: var(--km-btn-p-font-size);
        }

        .km-btn-secundario {
            --km-btn-bg: var(--km-btn-s-bg);
            --km-btn-text: var(--km-btn-s-text);
            --km-btn-hover-bg: var(--km-btn-s-hover-bg);
            --km-btn-hover-text: var(--km-btn-s-hover-text);
            --km-btn-border: var(--km-btn-s-border);
            --km-btn-radius: var(--km-btn-s-radius);
            --km-btn-pad-y: var(--km-btn-s-pad-y);
            --km-btn-pad-x: var(--km-btn-s-pad-x);
            --km-btn-font-size: var(--km-btn-s-font-size);
        }

        /* =============================================
           FONDO DE PÁGINA - Aplicación global
           Tipo: solid
           ============================================= */
        body {
            background-color: #FAFAFA;
            min-height: 100vh;
        }

        /* Color y fuente de texto SOLO dentro del contenedor de la tienda.
           No contamina Bootstrap modals, header, footer ni otros componentes. */
        #tienda-dinamica-content,
        #marketplace-content {
            color: var(--km-text-primary);
            font-family: var(--font-cuerpo);
        }

        /* Aplicar la fuente de títulos a los componentes nativos con especificidad limpia (1 sola clase).
           Como GrapesJS inyecta sus .gjs-xyz DESPUÉS de esto, el usuario podrá editar cada texto individualmente ignorando el global. */
        .slide-title, .slide-description, .slide-cta, 
        .km-producto-titulo, .km-card-title, .km-card-description, 
        .km-marquee-text, .km-marquee-text-inner {
            font-family: var(--font-titulos);
        }

        /* El wrapper y canvas heredan o aplican según su necesidad */
        #wrapper-perfil {
            background: transparent;
            min-height: 100vh;
        }

        .kumara-canvas {
            background: transparent;
        }
        


/* CSS CUSTOM GRAPESJS (OPTIMIZADO WPO) */


/* === ESTILOS GJS (SELECTOR RULES) === */


/* === CUSTOM CSS (USER INJECTED) === */