/**
 * Variables de marca SPE (prefijo --spe-*).
 * No usar --primary-color aquí: Elementor lo redefine en su UI y en el canvas.
 */
.spe-theme {
    --spe-primary: #0F2B3D;
    --spe-primary-dark: #081721;
    --spe-accent: #00B3B3;
    --spe-accent-hover: #00cccc;
    --spe-bg-light: #F8FAFC;
    --spe-white: #FFFFFF;
    --spe-text-main: #334155;
    --spe-text-muted: #64748B;
    --spe-text-green: #10b981;
    --spe-radius-xl: 24px;
    --spe-radius-lg: 16px;
    --spe-radius-md: 12px;
    --spe-shadow-sm: 0 4px 6px -1px rgba(15, 43, 61, 0.05), 0 2px 4px -1px rgba(15, 43, 61, 0.03);
    --spe-shadow-md: 0 10px 25px -3px rgba(15, 43, 61, 0.08), 0 4px 6px -2px rgba(15, 43, 61, 0.04);
    --spe-shadow-lg: 0 25px 50px -12px rgba(15, 43, 61, 0.15);
}

/**
 * Solo iframe de vista previa: Elementor pisa --primary-color en el canvas.
 * Alcance estricto a la página SPE — no afecta menús/panel del editor.
 */
body.spe-theme.elementor-page .elementor-edit-area-active {
    --primary-color: #0F2B3D;
    --primary-dark: #081721;
    --accent-color: #00B3B3;
    --accent-hover: #00cccc;
    --bg-light: #F8FAFC;
    --white: #FFFFFF;
    --text-main: #334155;
    --text-muted: #64748B;
    --text-green: #10b981;
    --radius-xl: 24px;
    --radius-lg: 16px;
    --radius-md: 12px;
}